274 lines
9.9 KiB
TypeScript
274 lines
9.9 KiB
TypeScript
import { ReactNode, useState } from 'react';
|
|
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
|
import { useAuth } from '@/hooks/useAuth';
|
|
import { useCart } from '@/contexts/CartContext';
|
|
import { useBranding } from '@/hooks/useBranding';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
|
|
import { cn } from '@/lib/utils';
|
|
import {
|
|
LayoutDashboard,
|
|
Package,
|
|
BookOpen,
|
|
ShoppingCart,
|
|
Receipt,
|
|
User,
|
|
Settings,
|
|
Users,
|
|
Calendar,
|
|
LogOut,
|
|
Menu,
|
|
Home,
|
|
MoreHorizontal,
|
|
X,
|
|
Video,
|
|
} from 'lucide-react';
|
|
|
|
interface NavItem {
|
|
label: string;
|
|
href: string;
|
|
icon: React.ComponentType<{ className?: string }>;
|
|
}
|
|
|
|
const userNavItems: NavItem[] = [
|
|
{ label: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
|
|
{ label: 'Produk', href: '/products', icon: Package },
|
|
{ label: 'Akses', href: '/access', icon: BookOpen },
|
|
{ label: 'Order', href: '/orders', icon: Receipt },
|
|
{ label: 'Profil', href: '/profile', icon: User },
|
|
];
|
|
|
|
const adminNavItems: NavItem[] = [
|
|
{ label: 'Dashboard', href: '/admin', icon: LayoutDashboard },
|
|
{ label: 'Produk', href: '/admin/products', icon: Package },
|
|
{ label: 'Bootcamp', href: '/admin/bootcamp', icon: BookOpen },
|
|
{ label: 'Konsultasi', href: '/admin/consulting', icon: Video },
|
|
{ label: 'Order', href: '/admin/orders', icon: Receipt },
|
|
{ label: 'Member', href: '/admin/members', icon: Users },
|
|
{ label: 'Kalender', href: '/admin/events', icon: Calendar },
|
|
{ label: 'Pengaturan', href: '/admin/settings', icon: Settings },
|
|
];
|
|
|
|
const mobileUserNav: NavItem[] = [
|
|
{ label: 'Home', href: '/dashboard', icon: Home },
|
|
{ label: 'Kelas', href: '/access', icon: BookOpen },
|
|
{ label: 'Pesanan', href: '/orders', icon: Receipt },
|
|
{ label: 'Profil', href: '/profile', icon: User },
|
|
];
|
|
|
|
const mobileAdminNav: NavItem[] = [
|
|
{ label: 'Dashboard', href: '/admin', icon: LayoutDashboard },
|
|
{ label: 'Produk', href: '/admin/products', icon: Package },
|
|
{ label: 'Pesanan', href: '/admin/orders', icon: Receipt },
|
|
{ label: 'Pengguna', href: '/admin/members', icon: Users },
|
|
];
|
|
|
|
interface AppLayoutProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function AppLayout({ children }: AppLayoutProps) {
|
|
const { user, isAdmin, signOut } = useAuth();
|
|
const { items } = useCart();
|
|
const branding = useBranding();
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const [moreOpen, setMoreOpen] = useState(false);
|
|
|
|
const navItems = isAdmin ? adminNavItems : userNavItems;
|
|
const mobileNav = isAdmin ? mobileAdminNav : mobileUserNav;
|
|
|
|
const handleSignOut = async () => {
|
|
await signOut();
|
|
navigate('/');
|
|
};
|
|
|
|
const isActive = (href: string) => {
|
|
if (href === '/dashboard' && location.pathname === '/dashboard') return true;
|
|
if (href === '/admin' && location.pathname === '/admin') return true;
|
|
if (href !== '/dashboard' && href !== '/admin') {
|
|
return location.pathname.startsWith(href);
|
|
}
|
|
return false;
|
|
};
|
|
|
|
// Get additional items for "More" menu
|
|
const moreItems = navItems.filter(item => !mobileNav.some(m => m.href === item.href));
|
|
|
|
const brandName = branding.brand_name || 'LearnHub';
|
|
const logoUrl = branding.brand_logo_url;
|
|
|
|
if (!user) {
|
|
// Public layout for non-authenticated pages
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<header className="border-b-2 border-border bg-background sticky top-0 z-50">
|
|
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
|
<Link to="/" className="text-2xl font-bold flex items-center gap-2">
|
|
{logoUrl ? (
|
|
<img src={logoUrl} alt={brandName} className="h-8 object-contain" />
|
|
) : (
|
|
brandName
|
|
)}
|
|
</Link>
|
|
<nav className="flex items-center gap-4">
|
|
<Link to="/products" className="hover:underline font-medium">Produk</Link>
|
|
<Link to="/events" className="hover:underline font-medium">Kalender</Link>
|
|
<Link to="/auth">
|
|
<Button variant="outline" size="sm" className="border-2">
|
|
<User className="w-4 h-4 mr-2" />
|
|
Login
|
|
</Button>
|
|
</Link>
|
|
<Link to="/checkout">
|
|
<Button variant="outline" size="sm" className="relative border-2">
|
|
<ShoppingCart className="w-4 h-4" />
|
|
{items.length > 0 && (
|
|
<span className="absolute -top-2 -right-2 bg-primary text-primary-foreground text-xs w-5 h-5 flex items-center justify-center">
|
|
{items.length}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<main>{children}</main>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background flex">
|
|
{/* Desktop Sidebar */}
|
|
<aside className="hidden md:flex flex-col w-64 border-r-2 border-border bg-sidebar fixed h-screen">
|
|
<div className="p-4 border-b-2 border-border">
|
|
<Link to="/" className="text-xl font-bold flex items-center gap-2">
|
|
{logoUrl ? (
|
|
<img src={logoUrl} alt={brandName} className="h-8 object-contain" />
|
|
) : (
|
|
brandName
|
|
)}
|
|
</Link>
|
|
</div>
|
|
|
|
<nav className="flex-1 p-4 space-y-1 overflow-y-auto">
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
to={item.href}
|
|
className={cn(
|
|
"flex items-center gap-3 px-3 py-2 rounded-none text-sm font-medium transition-colors",
|
|
isActive(item.href)
|
|
? "bg-primary text-primary-foreground"
|
|
: "hover:bg-muted"
|
|
)}
|
|
>
|
|
<item.icon className="w-5 h-5" />
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="p-4 border-t-2 border-border space-y-2">
|
|
{!isAdmin && (
|
|
<Link to="/checkout" className="flex items-center gap-3 px-3 py-2 hover:bg-muted text-sm font-medium">
|
|
<ShoppingCart className="w-5 h-5" />
|
|
Keranjang
|
|
{items.length > 0 && (
|
|
<span className="ml-auto bg-primary text-primary-foreground text-xs px-2 py-0.5">
|
|
{items.length}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
)}
|
|
<button
|
|
onClick={handleSignOut}
|
|
className="flex items-center gap-3 px-3 py-2 hover:bg-muted text-sm font-medium w-full text-left"
|
|
>
|
|
<LogOut className="w-5 h-5" />
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main content */}
|
|
<div className="flex-1 md:ml-64">
|
|
{/* Mobile Header */}
|
|
<header className="md:hidden sticky top-0 z-50 border-b-2 border-border bg-background px-4 py-3 flex items-center justify-between">
|
|
<Link to="/" className="text-xl font-bold flex items-center gap-2">
|
|
{logoUrl ? (
|
|
<img src={logoUrl} alt={brandName} className="h-6 object-contain" />
|
|
) : (
|
|
brandName
|
|
)}
|
|
</Link>
|
|
<div className="flex items-center gap-2">
|
|
<Link to="/checkout" className="relative p-2">
|
|
<ShoppingCart className="w-5 h-5" />
|
|
{items.length > 0 && (
|
|
<span className="absolute top-0 right-0 bg-primary text-primary-foreground text-xs w-4 h-4 flex items-center justify-center">
|
|
{items.length}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="pb-20 md:pb-0">{children}</main>
|
|
|
|
{/* Mobile Bottom Navigation */}
|
|
<nav className="md:hidden fixed bottom-0 left-0 right-0 border-t-2 border-border bg-background z-50">
|
|
<div className="flex items-center justify-around py-2">
|
|
{mobileNav.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
to={item.href}
|
|
className={cn(
|
|
"flex flex-col items-center gap-1 px-3 py-1 text-xs font-medium",
|
|
isActive(item.href) ? "text-primary" : "text-muted-foreground"
|
|
)}
|
|
>
|
|
<item.icon className="w-5 h-5" />
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
{moreItems.length > 0 && (
|
|
<Sheet open={moreOpen} onOpenChange={setMoreOpen}>
|
|
<SheetTrigger asChild>
|
|
<button className="flex flex-col items-center gap-1 px-3 py-1 text-xs font-medium text-muted-foreground">
|
|
<MoreHorizontal className="w-5 h-5" />
|
|
Lainnya
|
|
</button>
|
|
</SheetTrigger>
|
|
<SheetContent side="bottom" className="border-t-2 border-border">
|
|
<div className="space-y-2 py-4">
|
|
{moreItems.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
to={item.href}
|
|
onClick={() => setMoreOpen(false)}
|
|
className="flex items-center gap-3 px-4 py-3 hover:bg-muted text-sm font-medium"
|
|
>
|
|
<item.icon className="w-5 h-5" />
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
<button
|
|
onClick={() => { handleSignOut(); setMoreOpen(false); }}
|
|
className="flex items-center gap-3 px-4 py-3 hover:bg-muted text-sm font-medium w-full text-left text-destructive"
|
|
>
|
|
<LogOut className="w-5 h-5" />
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|