Had to update child menu item logic

Noticed that submenus weren't rendered on mobile. Updated logic to make children work with mobile dropdown
This commit is contained in:
grokdesigns 2025-04-10 07:43:51 -07:00
parent d9e6d0c71a
commit d89ca10a82
No known key found for this signature in database
GPG key ID: 1084CD111FEE75DD

View file

@ -55,8 +55,25 @@ export function SidebarNav({
}; };
function getSelectedValue() { function getSelectedValue() {
const item = items.find((item) => hydrateHref(item.href) === pathname); let foundHref = "";
return hydrateHref(item?.href || ""); for (const item of items) {
const hydratedHref = hydrateHref(item.href);
if (hydratedHref === pathname) {
foundHref = hydratedHref;
break;
}
if (item.children) {
for (const child of item.children) {
const hydratedChildHref = hydrateHref(child.href);
if (hydratedChildHref === pathname) {
foundHref = hydratedChildHref;
break;
}
}
}
if (foundHref) break;
}
return foundHref;
} }
function hydrateHref(val: string): string { function hydrateHref(val: string): string {
@ -151,14 +168,44 @@ export function SidebarNav({
<SelectValue placeholder="Select an option" /> <SelectValue placeholder="Select an option" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{items.map((item) => ( {items.flatMap((item) => {
<SelectItem const topLevelItem = (
key={hydrateHref(item.href)} <SelectItem
value={hydrateHref(item.href)} key={hydrateHref(item.href)}
> value={hydrateHref(item.href)}
{item.title} >
</SelectItem> {item.icon ? (
))} <div className="flex items-center space-x-2">
{item.icon}
<span>{item.title}</span>
</div>
) : (
item.title
)}
</SelectItem>
);
const childItems =
item.children?.map((child) => (
<SelectItem
key={hydrateHref(child.href)}
value={hydrateHref(child.href)}
className="pl-8"
>
<div className="flex items-center space-x-2">
<CornerDownRight className="h-4 w-4 text-gray-500" />
{child.icon ? (
<>
{child.icon}
<span>{child.title}</span>
</>
) : (
<span>{child.title}</span>
)}
</div>
</SelectItem>
)) || [];
return [topLevelItem, ...childItems];
})}
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>