SEction 2 part 2

frontend/src/layout/AppHeader.tsx

@@ -22,6 +22,7 @@ const SITE_AND_SECTOR_ROUTES = [
 
 const SINGLE_SITE_ROUTES = [
   '/automation',
+  '/publisher',  // Content Calendar page
   '/account/content-settings',  // Content settings and sub-pages
 ];
 

frontend/src/layout/AppSidebar.tsx

@@ -19,6 +19,7 @@ import {
   UserIcon,
   UserCircleIcon,
   ShootingStarIcon,
+  CalendarIcon,
 } from "../icons";
 import { useSidebar } from "../context/SidebarContext";
 import { useAuthStore } from "../store/authStore";
@@ -68,7 +69,7 @@ const AppSidebar: React.FC = () => {
   // New structure: Dashboard (standalone) → SETUP → WORKFLOW → SETTINGS
   // Module visibility is controlled by GlobalModuleSettings (Django Admin only)
   const menuSections: MenuSection[] = useMemo(() => {
-    // SETUP section items - Ordered: Setup Wizard → Sites → Add Keywords → Content Settings → Thinker
+    // SETUP section items - Ordered: Setup Wizard → Sites → Add Keywords → Thinker
     const setupItems: NavItem[] = [];
 
     // Setup Wizard at top - guides users through site setup
@@ -92,16 +93,7 @@ const AppSidebar: React.FC = () => {
       path: "/setup/add-keywords",
     });
 
-    // Content Settings third - with dropdown
-    setupItems.push({
-      icon: <PageIcon />,
-      name: "Content Settings",
-      subItems: [
-        { name: "Content Generation", path: "/account/content-settings" },
-        { name: "Publishing", path: "/account/content-settings/publishing" },
-        { name: "Image Settings", path: "/account/content-settings/images" },
-      ],
-    });
+    // Content Settings moved to Site Settings tabs - removed from sidebar
 
     // Add Thinker last (admin only - prompts and AI settings)
     if (isModuleEnabled('thinker')) {
@@ -156,6 +148,13 @@ const AppSidebar: React.FC = () => {
       });
     }
     
+    // Add Content Calendar (Publisher) - always visible
+    workflowItems.push({
+      icon: <CalendarIcon />,
+      name: "Content Calendar",
+      path: "/publisher/content-calendar",
+    });
+    
     // Linker and Optimizer removed - not active modules
     
     return [
@@ -326,14 +325,18 @@ const AppSidebar: React.FC = () => {
           }
           return true;
         })
-        .map((nav, itemIndex) => (
-        <li key={nav.name}>
+        .map((nav, itemIndex) => {
+          // Check if any subitem is active to determine parent active state
+          const hasActiveSubItem = nav.subItems?.some(subItem => isActive(subItem.path)) ?? false;
+          const isSubmenuOpen = openSubmenu?.sectionIndex === sectionIndex && openSubmenu?.itemIndex === itemIndex;
+          
+          return (
+        <li key={`${sectionIndex}-${nav.name}-${location.pathname}`}>
           {nav.subItems ? (
             <button
               onClick={() => handleSubmenuToggle(sectionIndex, itemIndex)}
               className={`menu-item group ${
-                openSubmenu?.sectionIndex === sectionIndex && openSubmenu?.itemIndex === itemIndex ||
-                (nav.subItems && nav.subItems.some(subItem => isActive(subItem.path)))
+                hasActiveSubItem
                   ? "menu-item-active"
                   : "menu-item-inactive"
               } cursor-pointer ${
@@ -343,9 +346,8 @@ const AppSidebar: React.FC = () => {
               }`}
             >
               <span
-                className={`menu-item-icon-size  ${
-                  (openSubmenu?.sectionIndex === sectionIndex && openSubmenu?.itemIndex === itemIndex) ||
-                  (nav.subItems && nav.subItems.some(subItem => isActive(subItem.path)))
+                className={`menu-item-icon-size ${
+                  hasActiveSubItem
                     ? "menu-item-icon-active"
                     : "menu-item-icon-inactive"
                 }`}
@@ -358,8 +360,7 @@ const AppSidebar: React.FC = () => {
               {(isExpanded || isHovered || isMobileOpen) && (
                 <ChevronDownIcon
                   className={`ml-auto w-5 h-5 transition-transform duration-200 ${
-                    openSubmenu?.sectionIndex === sectionIndex &&
-                    openSubmenu?.itemIndex === itemIndex
+                    isSubmenuOpen
                       ? "rotate-180 text-brand-500"
                       : ""
                   }`}
@@ -396,8 +397,7 @@ const AppSidebar: React.FC = () => {
               }}
               className="overflow-hidden transition-all duration-300"
               style={{
-                height:
-                  openSubmenu?.sectionIndex === sectionIndex && openSubmenu?.itemIndex === itemIndex
+                height: isSubmenuOpen
                     ? `${subMenuHeight[`${sectionIndex}-${itemIndex}`]}px`
                     : "0px",
               }}
@@ -445,7 +445,8 @@ const AppSidebar: React.FC = () => {
             </div>
           )}
         </li>
-      ))}
+          );
+        })}
     </ul>
   );
 
@@ -497,7 +498,7 @@ const AppSidebar: React.FC = () => {
         <nav>
           <div className="flex flex-col gap-1">
             {allSections.map((section, sectionIndex) => (
-              <div key={section.label || `section-${sectionIndex}`} className={section.label ? "mt-4" : ""}>
+              <div key={section.label || `section-${sectionIndex}`} className={section.label ? "mt-2" : ""}>
                 {section.label && (
                   <h2
                     className={`mb-2 text-xs font-medium uppercase flex leading-[20px] text-gray-500 dark:text-gray-400 ${