From af69dc4df7459327199fb30e951389db36154db4 Mon Sep 17 00:00:00 2001
From: seriouselly <supriyatinselly@gmail.com>
Date: Mon, 8 Jun 2026 21:00:55 +0700
Subject: [PATCH] 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.
---
 apps/web/src/components/layout/footer.tsx     |   4 +-
 .../web/src/components/layout/main-layout.tsx |  59 +++++++-
 apps/web/src/components/layout/mobile-nav.tsx |  64 +++++---
 apps/web/src/components/layout/navbar.tsx     |  97 ------------
 apps/web/src/components/layout/sidebar.tsx    | 139 ++++++++++++++++++
 5 files changed, 232 insertions(+), 131 deletions(-)
 delete mode 100644 apps/web/src/components/layout/navbar.tsx
 create mode 100644 apps/web/src/components/layout/sidebar.tsx

diff --git a/apps/web/src/components/layout/footer.tsx b/apps/web/src/components/layout/footer.tsx
index 6995856..669f1d8 100644
--- a/apps/web/src/components/layout/footer.tsx
+++ b/apps/web/src/components/layout/footer.tsx
@@ -1,7 +1,7 @@
 export function Footer() {
   return (
-    <footer className="border-t bg-[#ECF4E8]">
-      <div className="mx-auto max-w-6xl px-6 py-6 text-sm text-muted-foreground text-center">
+    <footer className="h-22 shrink-0 border-t bg-[#ECF4E8] flex items-center justify-center">
+      <div className="mx-auto max-w-5xl px-6 py-6 text-sm text-muted-foreground text-center">
         © 2026 ZeaVis Edu - AI for Smart Education
       </div>
     </footer>
diff --git a/apps/web/src/components/layout/main-layout.tsx b/apps/web/src/components/layout/main-layout.tsx
index c4cfb03..6ec3a1e 100644
--- a/apps/web/src/components/layout/main-layout.tsx
+++ b/apps/web/src/components/layout/main-layout.tsx
@@ -1,17 +1,60 @@
-import { ReactNode } from "react";
-import { Navbar } from "./navbar";
+import { ReactNode, useState } from "react";
 import { Footer } from "./footer";
+import { Sidebar } from "./sidebar";
+import { MobileNav } from "./mobile-nav";
+import { Leaf, Menu } from "lucide-react";
 
 type Props = { children: ReactNode };
 
 export function MainLayout({ children }: Props) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
   return (
-    <div className="min-h-screen flex flex-col bg-[#ECF4E8]">
-      <Navbar />
-      <main className="mx-auto w-full max-w-6xl flex-1 px-4 sm:px-6 py-6 sm:py-8">
-        {children}
-      </main>
-      <Footer />
+    <div className="flex w-full h-screen bg-[#ECF4E8] overflow-hidden relative">
+      {/* Sidebar Desktop */}
+      <Sidebar />
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col w-full h-screen overflow-hidden">
+        {/* Header Mobile */}
+        <div className="md:hidden flex items-center justify-between px-5 h-20 bg-[#306D29] text-white shrink-0 shadow-sm z-20">
+          <div className="flex items-center gap-3 font-semibold">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-[#48A111]">
+              <Leaf className="h-5 w-5 text-white" />
+            </div>
+            <div className="leading-tight">
+              <div className="text-[17px] font-bold">ZeaVis Edu</div>
+              <div className="text-[11px] font-normal text-[#9AD872]">
+                Smart AI for Corn Disease Detection
+              </div>
+            </div>
+          </div>
+
+          <button
+            onClick={() => setMobileMenuOpen(true)}
+            className="rounded-xl p-2 bg-white/10 text-white hover:bg-white/20 transition-colors shrink-0"
+            aria-label="Buka menu navigasi"
+          >
+            <Menu className="h-6 w-6" />
+          </button>
+        </div>
+
+        {/* Mobile Navigation */}
+        <MobileNav
+          open={mobileMenuOpen}
+          onClose={() => setMobileMenuOpen(false)}
+        />
+
+        {/* Page Content */}
+        <main className="flex-1 overflow-y-auto p-4 sm:p-6 lg:p-8">
+          <div className="mx-auto w-full max-w-6xl flex flex-col">
+            {children}
+          </div>
+        </main>
+
+        {/* Footer */}
+        <Footer />
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/components/layout/mobile-nav.tsx b/apps/web/src/components/layout/mobile-nav.tsx
index 99c01f8..504d402 100644
--- a/apps/web/src/components/layout/mobile-nav.tsx
+++ b/apps/web/src/components/layout/mobile-nav.tsx
@@ -1,46 +1,55 @@
 import { createPortal } from "react-dom";
 import { Link, useLocation } from "react-router-dom";
-import { X, Leaf, LogOut } from "lucide-react";
+import {
+  X,
+  Leaf,
+  LogOut,
+  LayoutDashboard,
+  Scan,
+  Activity,
+  BookOpen,
+  UserCheck,
+  ChartBar,
+} from "lucide-react";
 
 type Props = {
   open: boolean;
   onClose: () => void;
 };
 
+// Daftar menu disamakan persis dengan sidebar.tsx
 const NAV_ITEMS = [
-  { path: "/dashboard", label: "Dashboard" },
-  { path: "/scan", label: "Scan Tanaman" },
-  { path: "/diagnoses", label: "Diagnosa" },
-  { path: "/catalog", label: "Pustaka", altPath: "/library" },
-  { path: "/expert/reviews", label: "Review" },
-  { path: "/telemetry", label: "Telemetry" },
+  { path: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
+  { path: "/scan", label: "Scan 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 MobileNav({ open, onClose }: Props) {
   const location = useLocation();
-
   const isActive = (path: string) => location.pathname === path;
 
   const navContent = (
     <div
-      className={`fixed inset-0 z-[999] lg:hidden transition-opacity duration-300 ease-in-out ${
+      className={`fixed inset-0 z-999 lg:hidden transition-opacity duration-300 ease-in-out ${
         open ? "opacity-100" : "opacity-0 pointer-events-none"
       }`}
-      aria-hidden={!open}
     >
       {/* Backdrop */}
       <div
-        className="fixed inset-0 bg-black/60 backdrop-blur-sm"
+        className="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ease-in-out"
         onClick={onClose}
       />
 
-      {/* Panel */}
+      {/* Menu */}
       <div
-        className={`fixed inset-y-0 right-0 z-[999] flex w-full max-w-sm flex-col bg-[#306D29] shadow-2xl transition-transform duration-300 ease-in-out ${
+        className={`fixed inset-y-0 right-0 z-999 flex w-full max-w-sm flex-col bg-[#306D29] shadow-2xl transition-transform duration-300 ease-in-out ${
           open ? "translate-x-0" : "translate-x-full"
         }`}
       >
-        {/* Header */}
+        {/* Header Menu Mobile */}
         <div className="flex items-center justify-between px-6 h-20 border-b border-white/10 shrink-0">
           <div className="flex items-center gap-3 font-semibold text-white">
             <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-[#48A111]">
@@ -49,50 +58,57 @@ export function MobileNav({ open, onClose }: Props) {
               </Link>
             </div>
             <div className="leading-tight">
-              <div className="text-lg font-bold">ZeaVis Edu</div>
-              <div className="text-[13px] font-normal text-[#9AD872]">
+              <div className="text-[18px] font-bold">ZeaVis Edu</div>
+              <div className="text-[12px] font-normal text-[#9AD872]">
                 Smart AI for Corn Disease Detection
               </div>
             </div>
           </div>
           <button
             onClick={onClose}
-            className="rounded-full p-2 text-white/80 hover:bg-white/10 hover:text-white transition-colors"
+            className="rounded-xl p-2 bg-white/10 text-white hover:bg-white/20 transition-colors"
             aria-label="Tutup menu"
           >
             <X className="h-6 w-6" />
           </button>
         </div>
 
-        {/* Nav items */}
-        <nav className="flex flex-col gap-2 overflow-y-auto px-4 py-6 flex-1">
+        {/* Item Menu */}
+        <nav className="flex flex-col gap-2 overflow-y-auto px-5 py-6 flex-1">
           {NAV_ITEMS.map((item) => {
             const active =
               isActive(item.path) || (item.altPath && isActive(item.altPath));
+            const Icon = item.icon; // Ambil icon dari daftar
+
             return (
               <Link
                 key={item.path}
                 to={item.path}
                 onClick={onClose}
-                className={`rounded-full px-4 py-3 text-[16px] font-medium transition-colors ${
+                className={`flex items-center gap-3 rounded-full px-4 py-3 text-[16px] font-medium transition-colors ${
                   active
                     ? "bg-[#48A111] text-white shadow-sm"
                     : "text-white/85 hover:bg-white/10 hover:text-white"
                 }`}
               >
-                {item.label}
+                <Icon className="w-5 h-5 shrink-0" />
+                <span>{item.label}</span>
               </Link>
             );
           })}
+        </nav>
+
+        {/* Logout */}
+        <div className="p-5 border-t border-white/10 shrink-0">
           <Link
             to="/logout"
             onClick={onClose}
-            className="inline-flex items-center rounded-full bg-[#ECF4E8] border border-white/50 px-4 py-2 text-[16px] font-medium text-black transition-colors hover:bg-white/50"
+            className="flex items-center justify-between w-full rounded-full bg-[#ECF4E8] border border-white/50 px-5 py-3 text-[16px] font-medium text-black transition-colors hover:bg-white/80"
           >
             <span>Keluar</span>
-            <LogOut className="ml-64 h-4 w-4" />
+            <LogOut className="h-5 w-5 shrink-0" />
           </Link>
-        </nav>
+        </div>
       </div>
     </div>
   );
diff --git a/apps/web/src/components/layout/navbar.tsx b/apps/web/src/components/layout/navbar.tsx
deleted file mode 100644
index 30472ae..0000000
--- a/apps/web/src/components/layout/navbar.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-import { Leaf, LogOut, Menu } from "lucide-react";
-import { MobileNav } from "./mobile-nav";
-
-export function Navbar() {
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
-  const location = useLocation();
-  //
-
-  const isActive = (path: string) => location.pathname === path;
-
-  const navLinkClassName = (active: boolean) =>
-    [
-      "inline-flex items-center rounded-full px-4 py-2 text-[16px] font-medium transition-colors",
-      active
-        ? "bg-[#48A111] text-white shadow-sm"
-        : "text-white/85 hover:bg-white/10 hover:text-white",
-    ].join(" ");
-
-  return (
-    <header className="sticky top-0 z-40 bg-[#306D29] text-white shadow-sm backdrop-blur">
-      <div className="mx-auto flex h-20 max-w-6xl items-center justify-between px-6">
-        <div className="flex items-center gap-3 font-semibold">
-          <div className="flex h-10 w-10 items-center justify-center rounded-2xl bg-[#48A111] text-primary-foreground">
-            <Link to="/dashboard">
-              <Leaf className="h-5 w-5" />
-            </Link>
-          </div>
-          <div className="leading-tight font-bold text-2xl">
-            <div>ZeaVis Edu</div>
-            <div className="text-[14px] font-normal text-[#9AD872]">
-              Smart AI for Corn Disease Detection
-            </div>
-          </div>
-        </div>
-
-        <nav className="hidden lg:flex items-center gap-2">
-          <Link
-            to="/dashboard"
-            className={navLinkClassName(isActive("/dashboard"))}
-          >
-            Dashboard
-          </Link>
-          <Link to="/scan" className={navLinkClassName(isActive("/scan"))}>
-            Scan Daun
-          </Link>
-          <Link
-            to="/diagnoses"
-            className={navLinkClassName(isActive("/diagnoses"))}
-          >
-            Diagnosa
-          </Link>
-          <Link
-            to="/catalog"
-            className={navLinkClassName(
-              isActive("/catalog") || isActive("/library"),
-            )}
-          >
-            Pustaka
-          </Link>
-          <Link
-            to="/expert/reviews"
-            className={navLinkClassName(isActive("/expert/reviews"))}
-          >
-            Hasil Pakar
-          </Link>
-          <Link
-            to="/logout"
-            className="ml-4 inline-flex items-center rounded-full bg-[#ECF4E8] border border-white/50 px-4 py-2 text-[16px] font-medium text-black transition-colors hover:bg-white/50"
-          >
-            Keluar <LogOut className="ml-2 h-4 w-4" />
-          </Link>
-          <Link
-            to="/telemetry"
-            className={navLinkClassName(isActive("/telemetry"))}
-          >
-            Telemetry
-          </Link>
-        </nav>
-
-        <button
-          onClick={() => setMobileMenuOpen(true)}
-          className="lg:hidden rounded-full p-2 text-white/80 hover:bg-white/10 hover:text-white transition-colors"
-          aria-label="Buka menu navigasi"
-        >
-          <Menu className="h-6 w-6" />
-        </button>
-
-        <MobileNav
-          open={mobileMenuOpen}
-          onClose={() => setMobileMenuOpen(false)}
-        />
-      </div>
-    </header>
-  );
-}
diff --git a/apps/web/src/components/layout/sidebar.tsx b/apps/web/src/components/layout/sidebar.tsx
new file mode 100644
index 0000000..598cfa4
--- /dev/null
+++ b/apps/web/src/components/layout/sidebar.tsx
@@ -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>
+  );
+}