157 lines
6.6 KiB
JavaScript
157 lines
6.6 KiB
JavaScript
import { useState } from 'react';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import { useRouter } from 'next/router';
|
|
import { useSession, signOut } from 'next-auth/react';
|
|
import {
|
|
HomeIcon,
|
|
Squares2X2Icon as GridIcon,
|
|
BoltIcon as LightningBoltIcon,
|
|
Bars3Icon as MenuIcon,
|
|
XMarkIcon as XIcon,
|
|
UserIcon,
|
|
ArrowRightOnRectangleIcon as LogoutIcon,
|
|
TruckIcon
|
|
} from '@heroicons/react/24/outline';
|
|
|
|
const navigationItems = [
|
|
{ name: 'Przekrój terenu', href: '/', icon: HomeIcon },
|
|
{ name: 'Siatka', href: '/cross', icon: GridIcon },
|
|
{ name: 'Uziomy', href: '/uziomy', icon: LightningBoltIcon },
|
|
{ name: 'Śledzenie przesyłek', href: '/tracking', icon: TruckIcon },
|
|
];
|
|
|
|
export default function Layout({ children, title = 'Wastpol' }) {
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
const { data: session } = useSession();
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
|
|
<Head>
|
|
<title>{title}</title>
|
|
<meta name="description" content="Professional electrical engineering tools" />
|
|
<link rel="icon" href="/icon.png" />
|
|
</Head>
|
|
|
|
{/* Mobile sidebar */}
|
|
<div className={`fixed inset-0 z-50 lg:hidden ${sidebarOpen ? 'block' : 'hidden'}`}>
|
|
<div className="fixed inset-0 bg-gray-600 bg-opacity-75" onClick={() => setSidebarOpen(false)} />
|
|
<div className="fixed inset-y-0 left-0 flex w-64 flex-col bg-white shadow-xl">
|
|
<div className="flex h-16 items-center justify-between px-4 border-b border-gray-200">
|
|
<img className="h-8 w-auto" src="/logo.png" alt="Wastpol" />
|
|
<button
|
|
onClick={() => setSidebarOpen(false)}
|
|
className="text-gray-500 hover:text-gray-700"
|
|
>
|
|
<XIcon className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
<nav className="flex-1 px-2 py-4 space-y-1">
|
|
{navigationItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = router.pathname === item.href;
|
|
return (
|
|
<Link key={item.name} href={item.href}>
|
|
<a
|
|
className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors ${
|
|
isActive
|
|
? 'bg-blue-100 text-blue-900 border-r-2 border-blue-500'
|
|
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
|
|
}`}
|
|
onClick={() => setSidebarOpen(false)}
|
|
>
|
|
<Icon className="mr-3 h-5 w-5 flex-shrink-0" />
|
|
{item.name}
|
|
</a>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Desktop layout */}
|
|
<div className="flex">
|
|
{/* Desktop sidebar */}
|
|
<div className="hidden lg:flex lg:flex-shrink-0">
|
|
<div className="flex w-64 flex-col">
|
|
<div className="flex min-h-0 flex-1 flex-col bg-white border-r border-gray-200 shadow-sm">
|
|
<div className="flex h-16 items-center justify-center px-4 border-b border-gray-200 bg-gradient-to-r from-blue-600 to-blue-700">
|
|
<img className="h-8 w-auto filter brightness-0 invert" src="/logo.png" alt="Wastpol" />
|
|
{/* <span className="ml-2 text-lg font-semibold text-white">Wastpol</span> */}
|
|
</div>
|
|
<div className="flex flex-1 flex-col overflow-y-auto">
|
|
<nav className="flex-1 px-2 py-4 space-y-1">
|
|
{navigationItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = router.pathname === item.href;
|
|
return (
|
|
<Link key={item.name} href={item.href}>
|
|
<a
|
|
className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-all duration-200 ${
|
|
isActive
|
|
? 'bg-blue-100 text-blue-900 border-r-2 border-blue-500 shadow-sm'
|
|
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900 hover:shadow-sm'
|
|
}`}
|
|
>
|
|
<Icon className={`mr-3 h-5 w-5 flex-shrink-0 transition-colors ${
|
|
isActive ? 'text-blue-600' : 'text-gray-400 group-hover:text-gray-500'
|
|
}`} />
|
|
{item.name}
|
|
</a>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main content */}
|
|
<div className="flex flex-1 flex-col">
|
|
{/* Top navbar */}
|
|
<div className="relative z-10 flex h-16 flex-shrink-0 bg-white shadow-sm border-b border-gray-200">
|
|
<button
|
|
onClick={() => setSidebarOpen(true)}
|
|
className="border-r border-gray-200 px-4 text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 lg:hidden"
|
|
>
|
|
<MenuIcon className="h-6 w-6" />
|
|
</button>
|
|
|
|
<div className="flex flex-1 justify-between px-4 sm:px-6 lg:px-8">
|
|
<div className="flex flex-1">
|
|
{/* You can add search or breadcrumbs here */}
|
|
</div>
|
|
|
|
{session && (
|
|
<div className="ml-4 flex items-center md:ml-6">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="flex items-center space-x-2 text-sm text-gray-700">
|
|
<UserIcon className="h-5 w-5 text-gray-400" />
|
|
<span className="hidden sm:block">{session.user.email}</span>
|
|
</div>
|
|
<button
|
|
onClick={() => signOut()}
|
|
className="inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
|
|
>
|
|
<LogoutIcon className="h-4 w-4 mr-2" />
|
|
Wyloguj
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Page content */}
|
|
<main className="flex-1 overflow-y-auto">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|