79 lines
4.8 KiB
TypeScript
79 lines
4.8 KiB
TypeScript
import React from 'react';
|
|
import { Toaster } from 'sonner';
|
|
import { Head, Link, usePage } from '@inertiajs/react';
|
|
import { LogOut, Home, CalendarClock, User, Menu } from 'lucide-react';
|
|
|
|
interface EmployeeLayoutProps {
|
|
children: React.ReactNode;
|
|
title?: string;
|
|
}
|
|
|
|
export default function EmployeeLayout({ children, title }: EmployeeLayoutProps) {
|
|
const user = (usePage<any>().props.auth as any).user;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-slate-50 font-sans text-slate-900 pb-20 md:pb-0">
|
|
{title && <Head title={title} />}
|
|
<Toaster position="top-center" richColors />
|
|
|
|
<nav className="hidden md:block bg-white border-b border-slate-200 sticky top-0 z-50 shadow-sm">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
<div className="flex items-center gap-8">
|
|
<div className="flex-shrink-0 flex items-center gap-3">
|
|
<img src="/assets/logo-clear.png" alt="Logo" className="h-8 w-auto object-contain" onError={(e) => { e.currentTarget.style.display='none'; }} />
|
|
<span className="font-bold text-xl text-sky-800 tracking-tight hidden lg:block">HRIS Portal</span>
|
|
</div>
|
|
<div className="flex space-x-1">
|
|
<Link href="/employee/index" className="px-3 py-2 rounded-md text-sm font-medium text-slate-600 hover:text-sky-600 hover:bg-sky-50 transition-colors flex items-center gap-2">
|
|
<Home className="w-4 h-4" /> Beranda
|
|
</Link>
|
|
<Link href="/employee/attendances" className="px-3 py-2 rounded-md text-sm font-medium text-slate-600 hover:text-sky-600 hover:bg-sky-50 transition-colors flex items-center gap-2">
|
|
<CalendarClock className="w-4 h-4" /> Absensi
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="text-sm font-medium text-slate-700 hidden sm:block">
|
|
Halo, {user.name}
|
|
</div>
|
|
<Link href="/logout" method="post" as="button" className="p-2 text-slate-500 hover:text-red-600 transition-colors rounded-full hover:bg-slate-100">
|
|
<LogOut className="w-5 h-5" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<header className="md:hidden bg-white border-b border-slate-200 sticky top-0 z-40 px-4 h-14 flex items-center justify-between">
|
|
<img src="/assets/logo-clear.png" alt="Logo" className="h-7 w-auto object-contain" onError={(e) => { e.currentTarget.style.display='none'; }} />
|
|
<div className="font-semibold text-slate-800 text-sm">HRIS Portal</div>
|
|
<div className="w-7 h-7"></div>
|
|
</header>
|
|
|
|
<main className="w-full relative">
|
|
{children}
|
|
</main>
|
|
|
|
<nav className="md:hidden fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-slate-200 px-6 py-2 flex justify-between items-center pb-safe shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
|
|
<Link href="/employee/index" className="flex flex-col items-center gap-1 text-slate-400 hover:text-sky-500 focus:text-sky-500 transition-colors p-1">
|
|
<Home className="w-5 h-5" />
|
|
<span className="text-[10px] font-medium">Beranda</span>
|
|
</Link>
|
|
<Link href="/employee/attendances" className="flex flex-col items-center gap-1 text-slate-400 hover:text-sky-500 focus:text-sky-500 transition-colors p-1">
|
|
<CalendarClock className="w-5 h-5" />
|
|
<span className="text-[10px] font-medium">Absensi</span>
|
|
</Link>
|
|
<Link href="/profile" className="flex flex-col items-center gap-1 text-slate-400 hover:text-sky-500 focus:text-sky-500 transition-colors p-1">
|
|
<User className="w-5 h-5" />
|
|
<span className="text-[10px] font-medium">Profil</span>
|
|
</Link>
|
|
<Link href="/logout" method="post" as="button" className="flex flex-col items-center gap-1 text-slate-400 hover:text-red-500 focus:text-red-500 transition-colors p-1">
|
|
<LogOut className="w-5 h-5" />
|
|
<span className="text-[10px] font-medium">Keluar</span>
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|