refactor(sidebar): set initial state to collapsed by default

- Update `isSidebarOpen` initial state from true to false in `sidebar.tsx`.
- Ensure the sidebar starts in a mini/collapsed mode when the dashboard is first loaded to provide more space for the main content.
This commit is contained in:
seriouselly
2026-06-12 11:27:23 +07:00
parent cb90d23293
commit 8ede458a71
+19 -4
View File
@@ -13,21 +13,31 @@ import {
ChartBar,
} from "lucide-react";
import { MobileNav } from "./mobile-nav";
import { useAuthStore } from "@/store/auth-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 [isSidebarOpen, setIsSidebarOpen] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
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 +93,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;