91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { ThemeToggle } from '@/components/theme-toggle';
|
|
import { Menu, PanelLeftClose, PanelLeft, LogOut } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
|
|
import SidebarContent from '@/components/ui/SidebarContent';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
interface NavbarProps {
|
|
onSidebarToggle: () => void;
|
|
isSidebarCollapsed: boolean;
|
|
}
|
|
|
|
const Navbar = ({ onSidebarToggle, isSidebarCollapsed }: NavbarProps) => {
|
|
const router = useRouter();
|
|
|
|
const handleLogout = async () => {
|
|
try {
|
|
const response = await fetch('/api/auth/logout', {
|
|
method: 'POST',
|
|
});
|
|
|
|
if (response.ok) {
|
|
router.push('/');
|
|
}
|
|
} catch (error) {
|
|
console.error('Logout error:', error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b py-2 px-5 flex justify-between items-center z-30 sticky top-0">
|
|
<div className="flex items-center gap-2">
|
|
{/* Mobile Menu Button */}
|
|
<div className="md:hidden">
|
|
<Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button variant="outline" size="icon">
|
|
<Menu className="h-5 w-5" />
|
|
<span className="sr-only">Toggle menu</span>
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent side="left" className="p-0 w-[250px] overflow-y-auto">
|
|
<SidebarContent />
|
|
</SheetContent>
|
|
</Sheet>
|
|
</div>
|
|
|
|
{/* Desktop Sidebar Toggle Button */}
|
|
<div className="hidden md:block">
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={onSidebarToggle}
|
|
title={isSidebarCollapsed ? "Tampilkan Sidebar" : "Sembunyikan Sidebar"}
|
|
>
|
|
{isSidebarCollapsed ? (
|
|
<PanelLeft className="h-5 w-5" />
|
|
) : (
|
|
<PanelLeftClose className="h-5 w-5" />
|
|
)}
|
|
<span className="sr-only">Toggle sidebar</span>
|
|
</Button>
|
|
</div>
|
|
|
|
<Link href="/dashboard" className="flex items-center text-lg font-semibold hover:text-primary transition-colors">
|
|
<img src="/podif-icon.png" alt="PODIF Logo" className="h-6 w-auto mr-2" />
|
|
PODIF
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<ThemeToggle />
|
|
<Button
|
|
variant="outline"
|
|
size="icon"
|
|
onClick={handleLogout}
|
|
title="Logout"
|
|
>
|
|
<LogOut className="h-5 w-5" />
|
|
<span className="sr-only">Logout</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Navbar;
|