fosrl/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-05-16 15:20:41 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

improve sidebar rendering

Browse source
This commit is contained in:
miloschwartz 2025-04-30 22:56:10 -04:00
parent 237960fc5b
commit 1ff3a9b2f9
No known key found for this signature in database
1 changed files with 24 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

56
src/components/SidebarNav.tsx
View file

@ -37,7 +37,30 @@ export function SidebarNav({
const niceId = params.niceId as string; const niceId = params.niceId as string;
const resourceId = params.resourceId as string; const resourceId = params.resourceId as string;
const userId = params.userId as string; const userId = params.userId as string;
const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set()); const [expandedItems, setExpandedItems] = useState<Set<string>>(() => {
const autoExpanded = new Set<string>();
function findAutoExpandedAndActivePath(
items: SidebarNavItem[],
parentHrefs: string[] = []
) {
items.forEach((item) => {
const hydratedHref = hydrateHref(item.href);
const currentPath = [...parentHrefs, hydratedHref];
if (item.autoExpand || pathname.startsWith(hydratedHref)) {
currentPath.forEach((href) => autoExpanded.add(href));
}
if (item.children) {
findAutoExpandedAndActivePath(item.children, currentPath);
}
});
}
findAutoExpandedAndActivePath(items);
return autoExpanded;
});
const { licenseStatus, isUnlocked } = useLicenseStatusContext(); const { licenseStatus, isUnlocked } = useLicenseStatusContext();
const { user } = useUserContext(); const { user } = useUserContext();
@ -50,37 +73,6 @@ export function SidebarNav({
.replace("{userId}", userId); .replace("{userId}", userId);
} }
// Initialize expanded items based on autoExpand property and current path
useEffect(() => {
const autoExpanded = new Set<string>();
function findAutoExpandedAndActivePath(
items: SidebarNavItem[],
parentHrefs: string[] = []
) {
items.forEach((item) => {
const hydratedHref = hydrateHref(item.href);
// Add current item's href to the path
const currentPath = [...parentHrefs, hydratedHref];
// Auto expand if specified or if this item or any child is active
if (item.autoExpand || pathname.startsWith(hydratedHref)) {
// Expand all parent sections when a child is active
currentPath.forEach((href) => autoExpanded.add(href));
}
// Recursively check children
if (item.children) {
findAutoExpandedAndActivePath(item.children, currentPath);
}
});
}
findAutoExpandedAndActivePath(items);
setExpandedItems(autoExpanded);
}, [items, pathname]);
function toggleItem(href: string) { function toggleItem(href: string) {
setExpandedItems((prev) => { setExpandedItems((prev) => {
const newSet = new Set(prev); const newSet = new Set(prev);