mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-07-10 22:14:58 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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
No known key found for this signature in database
GPG key ID: 1084CD111FEE75DD
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>