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/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>
   );
 }