fix nav expand

src/App.tsx

@@ -271,7 +271,6 @@ export default function App() {
         return <NewOrganization {...commonProps} />;
 
       // Updated content routes section
-      // In App.tsx - Update the content routes section
       case "/content":
       case "/content/profiler":
       case "/content/blogs":

src/components/layout/AuthenticatedLayout.tsx

@@ -115,7 +115,7 @@ const navigationItems: NavigationItem[] = [
         id: 'profiler',
         label: 'Profiler',
         icon: Target,
-        route: '/content'  
+        route: '/content/profiler'
       },
       {
         id: 'blogs',
@@ -365,6 +365,7 @@ export function AuthenticatedLayout({
     setExpandedItems(newExpandedItems);
   }, [currentRoute]);
 
+
   // Notification handlers
   const handleMarkAsRead = (notificationId: string) => {
     setLocalNotifications(prev =>
@@ -415,15 +416,25 @@ export function AuthenticatedLayout({
     // User routes
     if (route === '/users/individual' && currentRoute.startsWith('/users/')) return true;
 
-    // Content routes - match both parent and children
-    if (route === '/content' && currentRoute.startsWith('/content/')) return true;
+    // Content section — highlight both parent and child routes
+    if (route === '/content') {
+      return currentRoute.startsWith('/content');
+    }
+
+    // Child route check
+    if (route.startsWith('/content/')) {
+      return currentRoute === route || currentRoute.startsWith(route + '/');
+    }
 
     return false;
   };
 
   const getActiveParent = (items: NavigationItem[]): string | null => {
     for (const item of items) {
+      // Check if this item is active
       if (isActiveRoute(item.route)) return item.id;
+
+      // Check if any children are active
       if (item.children) {
         for (const child of item.children) {
           if (isActiveRoute(child.route)) return item.id;
@@ -453,26 +464,38 @@ export function AuthenticatedLayout({
     const expanded = isExpanded(item.id);
     const Icon = item.icon;
 
+    // const handleItemClick = () => {
+    //   if (hasChildren && !isChild) {
+    //     // Always expand when parent clicked
+    //     const newExpandedItems = new Set(expandedItems);
+    //     newExpandedItems.add(item.id);
+    //     setExpandedItems(newExpandedItems);
+
+    //     // Navigate to parent route (like /content)
+    //     onNavigate(item.route);
+    //   } else {
+    //     // Navigate directly for child items
+    //     onNavigate(item.route);
+    //   }
+    // };
+
     const handleItemClick = () => {
       if (hasChildren && !isChild) {
-        // Toggle dropdown for parent items
+        // Toggle dropdown open/close when clicking parent
         toggleExpanded(item.id);
-        // If not active and has children, navigate to first child
-        if (!isActive && item.children && item.children.length > 0) {
-          onNavigate(item.children[0].route);
-        }
       } else {
         // Navigate directly for child items or items without children
         onNavigate(item.route);
       }
     };
 
+
+
     return (
       <div key={item.id}>
         <Button
           variant="ghost"
-          className={`w-full justify-start min-h-[44px] ${
-            isActive 
+          className={`w-full justify-start min-h-[44px] ${isActive
             ? 'bg-primary text-primary-foreground'
             : expanded && !isChild
               ? 'bg-accent text-accent-foreground'
@@ -485,8 +508,7 @@ export function AuthenticatedLayout({
             <>
               <span className="truncate flex-1 text-left">{item.label}</span>
               {hasChildren && (
-                <ChevronDown className={`h-4 w-4 ml-auto transition-transform ${
-                  expanded ? 'rotate-180' : ''
+                <ChevronDown className={`h-4 w-4 ml-auto transition-transform ${expanded ? 'rotate-180' : ''
                   }`} />
               )}
             </>

src/components/pages/ContentManager.tsx

@@ -159,18 +159,17 @@ export function ContentManager({
   console.log('📌 Current content type:', currentContentType.label);
 
   const getBreadcrumbs = () => {
-    const breadcrumbs = [
-      { label: "Content", href: "/content" }
-    ];
+    const breadcrumbs = [{ label: "Content", href: "/content" }];
 
-    // Add specific content type to breadcrumbs if not on the main content page
-    if (currentRoute !== "/content") {
+    // Always show current content type
+    if (currentContentType) {
       breadcrumbs.push({ label: currentContentType.label });
     }
 
     return breadcrumbs;
   };
 
+
   const renderContent = () => {
     console.log('🎨 Rendering content for:', currentContentType.id);