feat(mobile-nav): enhance responsive sidebar with user info and auth actions

- Remove userRole prop, read user directly from auth store
- Add user info section (avatar, name, email) when logged in
- Add Masuk/Daftar buttons at bottom when unauthenticated
- Add Keluar button with loading state when authenticated
- Add tagline under logo in sidebar header
- Add backdrop blur effect for better visual depth
- Use flex-col layout for consistent spacing at any height
This commit is contained in:
seriouselly
2026-06-06 02:15:43 +07:00
parent 5129bbe958
commit 9f9098b91b
14 changed files with 137 additions and 41 deletions
+18 -2
View File
@@ -1,11 +1,14 @@
import { useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { Leaf } from "lucide-react";
import { Leaf, Menu } from "lucide-react";
import { MobileNav } from "./mobile-nav";
import { Button } from "@/components/ui/button";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { useAuthStore } from "@/store/auth-store";
import { apiClient } from "@/lib/api-client";
export function Navbar() {
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
const location = useLocation();
const navigate = useNavigate();
const queryClient = useQueryClient();
@@ -50,7 +53,7 @@ export function Navbar() {
</div>
</div>
<nav className="flex items-center gap-2">
<nav className="hidden lg:flex items-center gap-2">
<Link to="/dashboard" className={navLinkClassName(isActive("/dashboard"))}>
Dashboard
</Link>
@@ -72,6 +75,19 @@ export function Navbar() {
</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>
);