Merge pull request #27 from ATLAS-PJK-GM007/selly/frontend

Selly/frontend

apps/web/src/components/layout/sidebar.tsx

@@ -13,21 +13,40 @@ import {
   ChartBar,
 } from "lucide-react";
 import { MobileNav } from "./mobile-nav";
+import { useAuthStore } from "@/store/auth-store";
+import { useUiStore } from "@/store/ui-store";
 
 const NAV_ITEMS = [
   { path: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
   { path: "/scan", label: "Pindai Daun", icon: Scan },
   { path: "/diagnoses", label: "Diagnosa", icon: Activity },
   { path: "/catalog", label: "Pustaka", icon: BookOpen, altPath: "/library" },
-  { path: "/expert/reviews", label: "Tinjauan Pakar", icon: UserCheck },
-  { path: "/telemetry", label: "Telemetry", icon: ChartBar },
+  {
+    path: "/expert/reviews",
+    label: "Tinjauan Pakar",
+    icon: UserCheck,
+    expertOnly: true,
+  },
+  { path: "/telemetry", label: "Telemetry", icon: ChartBar, expertOnly: true },
 ];
 
 export function Sidebar() {
   const location = useLocation();
-  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
+  const isSidebarOpen = useUiStore((state) => state.isSidebarOpen);
+  const setIsSidebarOpen = useUiStore((state) => state.setIsSidebarOpen);
+
+  const user = useAuthStore((state) => state.user);
+  const isExpert = user?.role === "expert";
+
+  const filteredNavItems = NAV_ITEMS.filter((item) => {
+    if (!item.expertOnly || isExpert) {
+      return true;
+    }
+    return false;
+  });
+
   const isActive = (path: string, altPath?: string) => {
     if (path === "/dashboard" || path === "/scan") {
       return location.pathname === path;
@@ -83,7 +102,12 @@ export function Sidebar() {
       <nav
         className={`flex-1 overflow-y-auto py-6 flex flex-col gap-3 ${isSidebarOpen ? "px-5" : "px-0 items-center"}`}
       >
-        {NAV_ITEMS.map((item) => {
+        {filteredNavItems.map((item) => {
+          // Skip expert-only items for non-expert users
+          if (item.expertOnly && !isExpert) {
+            return null;
+          }
+
           const active = isActive(item.path, item.altPath);
           const Icon = item.icon;
 
@@ -92,7 +116,7 @@ export function Sidebar() {
               key={item.path}
               to={item.path}
               title={item.label}
-              onClick={() => setIsSidebarOpen(true)}
+              onClick={() => setIsSidebarOpen(!isSidebarOpen)}
               className={`flex items-center rounded-full font-medium transition-all ${
                 isSidebarOpen
                   ? "px-4 py-3 gap-3 text-[16px] w-full"

apps/web/src/store/ui-store.ts

@@ -1,12 +1,18 @@
-import { create } from 'zustand';
+import { create } from "zustand";
 
 type UiState = {
   dashboardCompact: boolean;
   toggleDashboardCompact: () => void;
+
+  isSidebarOpen: boolean;
+  setIsSidebarOpen: (isOpen: boolean) => void;
 };
 
 export const useUiStore = create<UiState>((set) => ({
   dashboardCompact: false,
   toggleDashboardCompact: () =>
     set((state) => ({ dashboardCompact: !state.dashboardCompact })),
+
+  isSidebarOpen: false,
+  setIsSidebarOpen: (isOpen: boolean) => set({ isSidebarOpen: isOpen }),
 }));