feat: make hooks folder

web/src/hooks/barItems.tsx

@@ -0,0 +1,61 @@
+import { useAuth } from "@/store/auth";
+import { Blocks, Home, Settings2, User } from "lucide-react";
+import { useCallback, type ReactNode } from "react";
+import { useLocation } from "react-router";
+
+export interface BarItem {
+  icon: ReactNode;
+  title: string;
+  tab: string;
+  pathname: string;
+}
+
+export const useBarItems = (): [BarItem[], (item: BarItem) => boolean] => {
+  const profile = useAuth((state) => state.profile);
+  const location = useLocation();
+
+  const isActive = useCallback(
+    (item: BarItem) => {
+      return location.pathname === item.pathname;
+    },
+    [location.pathname],
+  );
+
+  if (!profile) {
+    return [[], isActive];
+  }
+
+  return [
+    [
+      {
+        icon: <Home />,
+        title: "Home",
+        tab: "home",
+        pathname: "/",
+      },
+      {
+        icon: <User />,
+        title: "Personal Info",
+        tab: "personal-info",
+        pathname: "/personal-info",
+      },
+      {
+        icon: <Settings2 />,
+        title: "Data & Personalization",
+        tab: "data-personalization",
+        pathname: "/data-personalize",
+      },
+      ...(profile.isAdmin
+        ? [
+            {
+              icon: <Blocks />,
+              title: "API Services",
+              tab: "api-services",
+              pathname: "/admin/api-services",
+            },
+          ]
+        : []),
+    ],
+    isActive,
+  ];
+};