Improve admin save UX and portfolio navigation

components/dashboard/sidebar.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import Link from "next/link";
-import type { LucideIcon } from "lucide-react";
+import { ChevronDown, ChevronRight, type LucideIcon } from "lucide-react";
 
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
@@ -10,6 +10,7 @@ type DashboardSidebarItem = {
   href: string;
   icon: LucideIcon;
   active?: boolean;
+  expanded?: boolean;
   children?: DashboardSidebarItem[];
 };
 
@@ -23,6 +24,8 @@ type DashboardSidebarProps = {
 export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSidebarProps) {
   function renderItem(item: DashboardSidebarItem, nested = false) {
     const Icon = item.icon;
+    const hasChildren = Boolean(item.children?.length);
+    const ChevronIcon = item.expanded ? ChevronDown : ChevronRight;
 
     return (
       <div key={item.href} className="space-y-1">
@@ -37,9 +40,10 @@ export function DashboardSidebar({ items, iconSrc, top, footer }: DashboardSideb
           )}
         >
           <Icon className="h-4 w-4" />
-          <span>{item.label}</span>
+          <span className="flex-1">{item.label}</span>
+          {hasChildren ? <ChevronIcon className="h-4 w-4 opacity-70" /> : null}
         </Link>
-        {item.children?.length ? item.children.map((child) => renderItem(child, true)) : null}
+        {item.expanded && item.children?.length ? item.children.map((child) => renderItem(child, true)) : null}
       </div>
     );
   }