mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-01 08:34:53 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

more prominent sidebar sections

Browse source
This commit is contained in:
miloschwartz 2025-04-16 20:49:06 -04:00
parent 36b62a5fe4
commit ab933d48de
No known key found for this signature in database
2 changed files with 81 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

120
src/components/SidebarNav.tsx
View file

@ -35,26 +35,6 @@ export function SidebarNav({
const userId = params.userId as string;
const [expandedItems, setExpandedItems] = useState<Set<string>>(new Set());
// Initialize expanded items based on autoExpand property
useEffect(() => {
const autoExpanded = new Set<string>();
function findAutoExpanded(items: SidebarNavItem[]) {
items.forEach(item => {
const hydratedHref = hydrateHref(item.href);
if (item.autoExpand) {
autoExpanded.add(hydratedHref);
}
if (item.children) {
findAutoExpanded(item.children);
}
});
}
findAutoExpanded(items);
setExpandedItems(autoExpanded);
}, [items]);
function hydrateHref(val: string): string {
return val
.replace("{orgId}", orgId)
@ -63,6 +43,34 @@ export function SidebarNav({
.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) {
setExpandedItems(prev => {
const newSet = new Set(prev);
@ -86,41 +94,49 @@ export function SidebarNav({
return (
<div key={hydratedHref}>
<div className="flex items-center group" style={{ marginLeft: `${indent}px` }}>
<Link
href={hydratedHref}
<div
className={cn(
"flex items-center py-1 w-full transition-colors",
isActive
? "text-primary font-medium"
: "text-muted-foreground hover:text-foreground",
disabled && "cursor-not-allowed opacity-60"
"flex items-center w-full transition-colors rounded-md",
isActive && level === 0 && "bg-primary/10",
"group-hover:bg-muted"
)}
onClick={(e) => {
if (disabled) {
e.preventDefault();
} else if (onItemClick) {
onItemClick();
}
}}
tabIndex={disabled ? -1 : undefined}
aria-disabled={disabled}
>
{item.icon && <span className="mr-2">{item.icon}</span>}
{item.title}
</Link>
{hasChildren && (
<button
onClick={() => toggleItem(hydratedHref)}
className="p-2 hover:bg-muted rounded-md ml-auto"
disabled={disabled}
>
{isExpanded ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
<Link
href={hydratedHref}
className={cn(
"flex items-center w-full px-3 py-2",
isActive
? "text-primary font-medium"
: "text-muted-foreground group-hover:text-foreground",
disabled && "cursor-not-allowed opacity-60"
)}
</button>
)}
onClick={(e) => {
if (disabled) {
e.preventDefault();
} else if (onItemClick) {
onItemClick();
}
}}
tabIndex={disabled ? -1 : undefined}
aria-disabled={disabled}
>
{item.icon && <span className="mr-3 opacity-70">{item.icon}</span>}
{item.title}
</Link>
{hasChildren && (
<button
onClick={() => toggleItem(hydratedHref)}
className="p-2 rounded-md opacity-70 hover:opacity-100"
disabled={disabled}
>
{isExpanded ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</button>
)}
</div>
</div>
{hasChildren && isExpanded && (
<div className="space-y-1 mt-1">
@ -135,7 +151,7 @@ export function SidebarNav({
return (
<nav
className={cn(
"flex flex-col space-y-1",
"flex flex-col space-y-2",
disabled && "pointer-events-none opacity-60",
className
)}