calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-01-28 22:00:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Had to update child menu item logic

Browse Source 
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
1 changed files with 57 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/SidebarNav.tsx
View File

@@ -55,8 +55,25 @@ export function SidebarNav({
};
function getSelectedValue() {
const item = items.find((item) => hydrateHref(item.href) === pathname);
return hydrateHref(item?.href || "");
let foundHref = "";
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 {
@@ -151,14 +168,44 @@ export function SidebarNav({
<SelectValue placeholder="Select an option" />
</SelectTrigger>
<SelectContent>
{items.map((item) => (
<SelectItem
key={hydrateHref(item.href)}
value={hydrateHref(item.href)}
>
{item.title}
</SelectItem>
))}
{items.flatMap((item) => {
const topLevelItem = (
<SelectItem
key={hydrateHref(item.href)}
value={hydrateHref(item.href)}
>
{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>
</Select>
</div>