mirror of
https://github.com/fosrl/pangolin.git
synced 2025-07-11 06:24:59 +02:00
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:
parent
d9e6d0c71a
commit
d89ca10a82
1 changed files with 57 additions and 10 deletions
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue