MythEclipse/zeavis-edu
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
- 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.
This commit is contained in:
seriouselly
2026-06-08 21:00:55 +07:00
parent 22ddd2d24e
commit af69dc4df7
5 changed files with 232 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/layout/footer.tsx
+2 -2
View File
@@ -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>
apps/web/src/components/layout/main-layout.tsx
+51 -8
View File
@@ -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>
);
}
apps/web/src/components/layout/mobile-nav.tsx
+40 -24
View File
@@ -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>
);
apps/web/src/components/layout/navbar.tsx
-97
View File
@@ -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>
);
}
apps/web/src/components/layout/sidebar.tsx
+139
View File
@@ -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>
);
}