frontend-refactor-1

frontend/src/layout/AppSidebar.tsx

@@ -78,132 +78,102 @@ const AppSidebar: React.FC = () => {
 
   // Define menu sections with useMemo to prevent recreation on every render
   // Filter out disabled modules based on module enable settings
+  // New structure: Dashboard (standalone) → SETUP → WORKFLOW → SETTINGS
   const menuSections: MenuSection[] = useMemo(() => {
-    const workflowItems: NavItem[] = [
+    // SETUP section items (single items, no dropdowns - submenus shown as in-page navigation)
+    const setupItems: NavItem[] = [
       {
-        icon: <PlugInIcon />,
-        name: "Setup",
-        subItems: [
-          { name: "Keywords Opportunities", path: "/planner/keyword-opportunities" },
-        ],
+        icon: <DocsIcon />,
+        name: "Industry, Sectors & Keywords",
+        path: "/setup/industries-sectors-keywords", // Merged page
+      },
+      {
+        icon: <GridIcon />,
+        name: "Sites",
+        path: "/sites", // Submenus shown as in-page navigation
       },
     ];
+
+    // Add Automation if enabled (single item, no dropdown)
+    if (moduleEnabled('automation')) {
+      setupItems.push({
+        icon: <BoltIcon />,
+        name: "Automation",
+        path: "/automation/rules", // Default to rules, submenus shown as in-page navigation
+      });
+    }
+
+    // Add Thinker if enabled (single item, no dropdown)
+    if (moduleEnabled('thinker')) {
+      setupItems.push({
+        icon: <BoltIcon />,
+        name: "Thinker",
+        path: "/thinker/prompts", // Default to prompts, submenus shown as in-page navigation
+      });
+    }
+
+    // WORKFLOW section items (single items, no dropdowns - submenus shown as in-page navigation)
+    const workflowItems: NavItem[] = [];
     
-    // Add Planner if enabled
+    // Add Planner if enabled (single item, no dropdown)
     if (moduleEnabled('planner')) {
       workflowItems.push({
         icon: <ListIcon />,
         name: "Planner",
-        subItems: [
-          { name: "Dashboard", path: "/planner" },
-          { name: "Keywords", path: "/planner/keywords" },
-          { name: "Clusters", path: "/planner/clusters" },
-          { name: "Ideas", path: "/planner/ideas" },
-        ],
+        path: "/planner/keywords", // Default to keywords, submenus shown as in-page navigation
       });
     }
     
-    // Add Writer if enabled
+    // Add Writer if enabled (single item, no dropdown)
     if (moduleEnabled('writer')) {
       workflowItems.push({
         icon: <TaskIcon />,
         name: "Writer",
-        subItems: [
-          { name: "Dashboard", path: "/writer" },
-          { name: "Tasks", path: "/writer/tasks" },
-          { name: "Content", path: "/writer/content" },
-          { name: "Images", path: "/writer/images" },
-          { name: "Published", path: "/writer/published" },
-        ],
+        path: "/writer/content", // Default to content, submenus shown as in-page navigation
       });
     }
     
-    // Add Thinker if enabled
-    if (moduleEnabled('thinker')) {
-      workflowItems.push({
-        icon: <BoltIcon />,
-        name: "Thinker",
-        subItems: [
-          { name: "Dashboard", path: "/thinker" },
-          { name: "Prompts", path: "/thinker/prompts" },
-          { name: "Author Profiles", path: "/thinker/author-profiles" },
-          { name: "Strategies", path: "/thinker/strategies" },
-          { name: "Image Testing", path: "/thinker/image-testing" },
-        ],
-      });
-    }
-    
-    // Add Linker if enabled
+    // Add Linker if enabled (single item, no dropdown)
     if (moduleEnabled('linker')) {
       workflowItems.push({
         icon: <PlugInIcon />,
         name: "Linker",
-        subItems: [
-          { name: "Dashboard", path: "/linker" },
-          { name: "Content", path: "/linker/content" },
-        ],
+        path: "/linker/content",
       });
     }
     
-    // Add Optimizer if enabled
+    // Add Optimizer if enabled (single item, no dropdown)
     if (moduleEnabled('optimizer')) {
       workflowItems.push({
         icon: <BoltIcon />,
         name: "Optimizer",
-        subItems: [
-          { name: "Dashboard", path: "/optimizer" },
-          { name: "Content", path: "/optimizer/content" },
-        ],
+        path: "/optimizer/content",
       });
     }
     
-    // Add Automation if enabled
-    if (moduleEnabled('automation')) {
-      workflowItems.push({
-        icon: <BoltIcon />,
-        name: "Automation",
-        subItems: [
-          { name: "Dashboard", path: "/automation" },
-          { name: "Rules", path: "/automation/rules" },
-          { name: "Tasks", path: "/automation/tasks" },
-        ],
-      });
-    }
-    
-    // Add Sites menu (always available)
-    workflowItems.push({
-      icon: <GridIcon />,
-      name: "Sites",
-      subItems: [
-        { name: "All Sites", path: "/sites" },
-        { name: "Create Site", path: "/sites/builder" },
-        { name: "Blueprints", path: "/sites/blueprints" },
-      ],
-    });
-    
     return [
+      // Dashboard is standalone (no section header)
       {
-        label: "OVERVIEW",
+        label: "", // Empty label for standalone Dashboard
         items: [
           {
             icon: <GridIcon />,
             name: "Dashboard",
             path: "/",
           },
-          {
-            icon: <DocsIcon />,
-            name: "Industry / Sectors",
-            path: "/reference/industries",
-          },
         ],
       },
       {
-        label: "WORKFLOWS",
+        label: "SETUP",
+        items: setupItems,
+      },
+      {
+        label: "WORKFLOW",
         items: workflowItems,
       },
-    {
-      label: "ACCOUNT & SETTINGS",
-      items: [
+      {
+        label: "SETTINGS",
+        items: [
           {
             icon: <PlugInIcon />,
             name: "Settings",
@@ -215,28 +185,23 @@ const AppSidebar: React.FC = () => {
               { name: "Import / Export", path: "/settings/import-export" },
             ],
           },
-        {
-          icon: <DollarLineIcon />,
-          name: "Billing",
-          subItems: [
-            { name: "Credits", path: "/billing/credits" },
-            { name: "Transactions", path: "/billing/transactions" },
-            { name: "Usage", path: "/billing/usage" },
-          ],
-        },
-      ],
-    },
-    {
-      label: "HELP",
-      items: [
-        {
-          icon: <DocsIcon />,
-          name: "Help & Documentation",
-          path: "/help",
-        },
-      ],
-    },
-  ];
+          {
+            icon: <DollarLineIcon />,
+            name: "Billing",
+            subItems: [
+              { name: "Credits", path: "/billing/credits" },
+              { name: "Transactions", path: "/billing/transactions" },
+              { name: "Usage", path: "/billing/usage" },
+            ],
+          },
+          {
+            icon: <DocsIcon />,
+            name: "Help & Documentation",
+            path: "/help",
+          },
+        ],
+      },
+    ];
   }, [moduleEnabled]);
 
   // Admin section - only shown for users in aws-admin account
@@ -585,20 +550,22 @@ const AppSidebar: React.FC = () => {
         <nav className="mb-6">
           <div className="flex flex-col gap-2">
             {allSections.map((section, sectionIndex) => (
-              <div key={section.label}>
-                <h2
-                  className={`mb-4 text-xs uppercase flex leading-[20px] text-gray-400 ${
-                    !isExpanded && !isHovered
-                      ? "lg:justify-center"
-                      : "justify-start"
-                  }`}
-                >
-                  {isExpanded || isHovered || isMobileOpen ? (
-                    section.label
-                  ) : (
-                    <HorizontaLDots className="size-6" />
-                  )}
-                </h2>
+              <div key={section.label || `section-${sectionIndex}`}>
+                {section.label && (
+                  <h2
+                    className={`mb-4 text-xs uppercase flex leading-[20px] text-gray-400 ${
+                      !isExpanded && !isHovered
+                        ? "lg:justify-center"
+                        : "justify-start"
+                    }`}
+                  >
+                    {isExpanded || isHovered || isMobileOpen ? (
+                      section.label
+                    ) : (
+                      <HorizontaLDots className="size-6" />
+                    )}
+                  </h2>
+                )}
                 {renderMenuItems(section.items, sectionIndex)}
               </div>
             ))}