refactor(layout): implement responsive sidebar and synchronize mobile menu

- Create a new `Sidebar` component for desktop with collapse/mini-sidebar feature. - Rename `navbar.tsx` to `mobile-header.tsx` to better reflect its mobile-specific purpose. - Synchronize icons (from lucide-react) and menu labels between desktop `Sidebar` and touch-based `MobileNav`. - Fix 'Logout' button sizing in the mobile menu by removing forced margins for better responsiveness on narrow screens. - Remove conflicting 'aria-hidden' attribute in MobileNav to resolve browser accessibility (a11y) warnings. - Add a spacer in `main-layout.tsx` to prevent the bottom content from being overlapped by the fixed Footer.
2026-06-08 21:00:55 +07:00
parent 22ddd2d24e
commit af69dc4df7
5 changed files with 232 additions and 131 deletions
@@ -0,0 +1,139 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import {
+  Leaf,
+  LogOut,
+  Menu,
+  ChevronLeft,
+  LayoutDashboard,
+  Scan,
+  Activity,
+  BookOpen,
+  UserCheck,
+  ChartBar,
+} from "lucide-react";
+import { MobileNav } from "./mobile-nav";
+
+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 },
+];
+
+export function Sidebar() {
+  const location = useLocation();
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  const isActive = (path: string, altPath?: string) => {
+    if (path === "/dashboard" || path === "/scan") {
+      return location.pathname === path;
+    }
+    return (
+      location.pathname.startsWith(path) ||
+      (altPath && location.pathname.startsWith(altPath))
+    );
+  };
+
+  return (
+    <aside
+      className={`hidden md:flex flex-col bg-[#306D29] shadow-xl z-30 text-white transition-all duration-300 ease-in-out ${
+        isSidebarOpen ? "w-80" : "w-30"
+      }`}
+    >
+      {/* logo & header area */}
+      <div
+        className={`h-30 flex items-center border-b border-white/10 shrink-0 transition-all duration-300 ${isSidebarOpen ? "px-6 justify-between" : "justify-center"}`}
+      >
+        <div
+          className={`flex items-center gap-3 font-semibold text-white overflow-hidden transition-all duration-300 ${isSidebarOpen ? "opacity-100 w-[180px]" : "opacity-0 w-0 hidden"}`}
+        >
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-[#48A111] p-6">
+            <Leaf className="h-8 w-8 shrink-0" />
+          </div>
+          <div className="leading-tight flex-1 ">
+            <div className="text-[20px] font-bold">ZeaVis Edu</div>
+            <div className="text-[13px] font-normal text-[#9AD872] leading-tight">
+              Smart AI for Corn Disease Detection
+            </div>
+          </div>
+        </div>
+
+        <button
+          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
+          className={`rounded-xl transition-colors flex items-center justify-center shrink-0 ${
+            isSidebarOpen
+              ? "p-1.5 bg-white/10 hover:bg-white/20 text-white"
+              : "w-12 h-12 bg-[#48A111] hover:bg-[#52B713] text-white shadow-sm"
+          }`}
+          title={isSidebarOpen ? "Sembunyikan Menu" : "Buka Menu"}
+        >
+          {isSidebarOpen ? (
+            <ChevronLeft className="w-5 h-5" />
+          ) : (
+            <Menu className="w-6 h-6" />
+          )}
+        </button>
+      </div>
+
+      {/* List Menu */}
+      <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) => {
+          const active = isActive(item.path, item.altPath);
+          const Icon = item.icon;
+
+          return (
+            <Link
+              key={item.path}
+              to={item.path}
+              title={item.label}
+              onClick={() => setIsSidebarOpen(true)}
+              className={`flex items-center rounded-full font-medium transition-all ${
+                isSidebarOpen
+                  ? "px-4 py-3 gap-3 text-[16px] w-full"
+                  : "justify-center w-12 h-12"
+              } ${
+                active
+                  ? "bg-[#48A111] text-white shadow-sm"
+                  : "text-white/85 hover:bg-white/10 hover:text-white"
+              }`}
+            >
+              <Icon className="w-5 h-5 shrink-0" />
+              {isSidebarOpen && (
+                <span className="whitespace-nowrap">{item.label}</span>
+              )}
+            </Link>
+          );
+        })}
+      </nav>
+
+      {/* Logout Button */}
+      <div
+        className={`h-22 px-5 border-t border-white/10 shrink-0 flex items-center ${isSidebarOpen ? "" : "justify-center"}`}
+      >
+        <Link
+          to="/logout"
+          title="Keluar"
+          className={`flex items-center rounded-full transition-all ${
+            isSidebarOpen
+              ? "justify-between w-full bg-[#ECF4E8] border border-white/50 px-5 py-3 text-[16px] font-medium text-black hover:bg-white/80"
+              : "justify-center w-12 h-12 bg-[#ECF4E8] text-black hover:bg-white shadow-sm"
+          }`}
+        >
+          {isSidebarOpen && <span className="whitespace-nowrap">Keluar</span>}
+          <LogOut className="h-5 w-5 shrink-0" />
+        </Link>
+      </div>
+
+      <MobileNav
+        open={mobileMenuOpen}
+        onClose={() => setMobileMenuOpen(false)}
+      />
+    </aside>
+  );
+}