feat: delimiter def

web/src/hooks/barItems.tsx

@@ -1,21 +1,31 @@
 import { useAuth } from "@/store/auth";
-import { Blocks, Home, Settings2, User, Users } from "lucide-react";
+import { Blocks, Home, User, Users } from "lucide-react";
 import { useCallback, type ReactNode } from "react";
 import { useLocation } from "react-router";
 
+export interface BarDelimiter {
+  type: "delimiter";
+  key: string;
+  title?: string;
+}
+
 export interface BarItem {
+  type?: "nav";
   icon: ReactNode;
   title: string;
   tab: string;
   pathname: string;
 }
 
-export const useBarItems = (): [BarItem[], (item: BarItem) => boolean] => {
+export type Item = BarItem | BarDelimiter;
+
+export const useBarItems = (): [Item[], (item: Item) => boolean] => {
   const profile = useAuth((state) => state.profile);
   const location = useLocation();
 
   const isActive = useCallback(
-    (item: BarItem) => {
+    (item: Item) => {
+      if (item.type === "delimiter") return false;
       if (item.pathname === "/") return location.pathname === item.pathname;
       return location.pathname.startsWith(item.pathname);
     },
@@ -28,6 +38,11 @@ export const useBarItems = (): [BarItem[], (item: BarItem) => boolean] => {
 
   return [
     [
+      {
+        type: "delimiter" as const,
+        title: "Basic",
+        key: "basic-del",
+      },
       {
         icon: <Home />,
         title: "Home",
@@ -40,14 +55,20 @@ export const useBarItems = (): [BarItem[], (item: BarItem) => boolean] => {
         tab: "personal-info",
         pathname: "/personal-info",
       },
-      {
-        icon: <Settings2 />,
-        title: "Data & Personalization",
-        tab: "data-personalization",
-        pathname: "/data-personalize",
-      },
+      // TODO:
+      // {
+      //   icon: <Settings2 />,
+      //   title: "Data & Personalization",
+      //   tab: "data-personalization",
+      //   pathname: "/data-personalize",
+      // },
       ...(profile.is_admin
         ? [
+            {
+              type: "delimiter" as const,
+              title: "Admin",
+              key: "admin-del",
+            },
             {
               icon: <Blocks />,
               title: "API Services",