[OPIK-563] Add sections to the sidebar menu

comet-ml · Dec 12, 2024 · cdf4baa · cdf4baa
1 parent 2f81aea
commit cdf4baa
Showing 1 changed file with 92 additions and 38 deletions.
diff --git a/apps/opik-frontend/src/components/layout/SideBar/SideBar.tsx b/apps/opik-frontend/src/components/layout/SideBar/SideBar.tsx
@@ -47,53 +47,89 @@ type MenuItem = {
   onClick?: MouseEventHandler<HTMLButtonElement>;
 };
 
-const MAIN_MENU_ITEMS: MenuItem[] = [
+type MenuItemGroup = {
+  id: string;
+  label?: string;
+  items: MenuItem[];
+};
+
+const MAIN_MENU_ITEMS: MenuItemGroup[] = [
   {
     id: "home",
-    path: "/$workspaceName/home",
-    type: MENU_ITEM_TYPE.router,
-    icon: LucideHome,
-    label: "Home",
+    items: [
+      {
+        id: "home",
+        path: "/$workspaceName/home",
+        type: MENU_ITEM_TYPE.router,
+        icon: LucideHome,
+        label: "Home",
+      },
+    ],
   },
   {
-    id: "projects",
-    path: "/$workspaceName/projects",
-    type: MENU_ITEM_TYPE.router,
-    icon: LayoutGrid,
-    label: "Projects",
-    count: "projects",
-  },
-  {
-    id: "prompts",
-    path: "/$workspaceName/prompts",
-    type: MENU_ITEM_TYPE.router,
-    icon: FileTerminal,
-    label: "Prompt library",
-    count: "prompts",
+    id: "observability",
+    label: "Observability",
+    items: [
+      {
+        id: "projects",
+        path: "/$workspaceName/projects",
+        type: MENU_ITEM_TYPE.router,
+        icon: LayoutGrid,
+        label: "Projects",
+        count: "projects",
+      },
+    ],
   },
+
   {
-    id: "datasets",
-    path: "/$workspaceName/datasets",
-    type: MENU_ITEM_TYPE.router,
-    icon: Database,
-    label: "Datasets",
-    count: "datasets",
+    id: "evaluation",
+    label: "Evaluation",
+    items: [
+      {
+        id: "datasets",
+        path: "/$workspaceName/datasets",
+        type: MENU_ITEM_TYPE.router,
+        icon: Database,
+        label: "Datasets",
+        count: "datasets",
+      },
+      {
+        id: "experiments",
+        path: "/$workspaceName/experiments",
+        type: MENU_ITEM_TYPE.router,
+        icon: FlaskConical,
+        label: "Experiments",
+        count: "experiments",
+      },
+    ],
   },
   {
-    id: "experiments",
-    path: "/$workspaceName/experiments",
-    type: MENU_ITEM_TYPE.router,
-    icon: FlaskConical,
-    label: "Experiments",
-    count: "experiments",
+    id: "prompt_engineering",
+    label: "Prompt engineering",
+    items: [
+      {
+        id: "prompts",
+        path: "/$workspaceName/prompts",
+        type: MENU_ITEM_TYPE.router,
+        icon: FileTerminal,
+        label: "Prompt library",
+        count: "prompts",
+      },
+    ],
   },
   {
-    id: "feedback-definitions",
-    path: "/$workspaceName/feedback-definitions",
-    type: MENU_ITEM_TYPE.router,
-    icon: MessageSquare,
-    label: "Feedback definitions",
-    count: "feedbackDefinitions",
+    id: "config",
+    label: "Config",
+    items: [
+      {
+        id: "feedback-definitions",
+        path: "/$workspaceName/feedback-definitions",
+        type: MENU_ITEM_TYPE.router,
+        icon: MessageSquare,
+        label: "Feedback definitions",
+        count: "feedbackDefinitions",
+      },
+    ],
   },
 ];
 
@@ -330,6 +366,24 @@ const SideBar: React.FunctionComponent<SideBarProps> = ({
     });
   };
 
+  const renderGroups = (groups: MenuItemGroup[]) => {
+    return groups.map((group) => {
+      return (
+        <li key={group.id} className={cn(expanded && "mb-1")}>
+          <div>
+            {group.label && expanded && (
+              <div className="comet-body-s truncate px-3 pb-1 pt-3 text-light-slate">
+                {group.label}
+              </div>
+            )}
+
+            <ul>{renderItems(group.items)}</ul>
+          </div>
+        </li>
+      );
+    });
+  };
+
   return (
     <>
       <aside className="comet-sidebar-width h-full border-r transition-all">
@@ -355,7 +409,7 @@ const SideBar: React.FunctionComponent<SideBarProps> = ({
         </div>
         <div className="flex h-[calc(100%-var(--header-height))] flex-col justify-between px-3 py-6">
           <ul className="flex flex-col gap-1">
-            {renderItems(MAIN_MENU_ITEMS)}
+            {renderGroups(MAIN_MENU_ITEMS)}
           </ul>
           <div className="flex flex-col gap-4">
             <Separator />