Pit Friedrich
103 lines
4.2 KiB
TypeScript
103 lines
4.2 KiB
TypeScript
import { useAuthStore } from "../stores/authStore";
|
|
import { Box, Home, LogOut, Server } from "lucide-react";
|
|
import { ReactNode } from "react";
|
|
import { NavLink, useNavigate } from "react-router-dom";
|
|
|
|
interface LayoutProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export default function Layout({ children }: LayoutProps) {
|
|
const { user, logout } = useAuthStore();
|
|
const navigate = useNavigate();
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
navigate('/login');
|
|
};
|
|
|
|
const navItems = [
|
|
{ to: '/', icon: Home, label: 'Dashboard' },
|
|
{ to: '/containers', icon: Box, label: 'Container' },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-950">
|
|
{/* Header */}
|
|
<header className="bg-gray-900 border-b border-gray-800 sticky top-0 z-50">
|
|
<div className="max-2-7xl mx-auto px-4 py-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="bg-unraid-orange p-2 rounded-lg">
|
|
<Server size={24} />
|
|
</div>
|
|
<h1 className="text-xl font-bold">Unraid Monitor</h1>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<span className="text-sm text-gray-400">{user?.username}</span>
|
|
<button
|
|
onClick={handleLogout}
|
|
className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
|
|
>
|
|
<LogOut size={20} />
|
|
<span className="hidden sm:inline">Abmelden</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Mobile Navigation */}
|
|
<nav className="md:hidden bg-gray-900 border-b border-gray-800 sticky top-[73px] z-40">
|
|
<div className="flex">
|
|
{navItems.map((item) => (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
className={({isActive}) =>
|
|
`flex-1 flex flex-col items-center gap-1 py-3 transition-colors ${
|
|
isActive
|
|
? 'text-unraid-orange border-b-2 border-unraid-orange'
|
|
: 'text-gray-400 hover:text-white'
|
|
}`
|
|
}
|
|
>
|
|
<item.icon size={20} />
|
|
<span className="text-xs">{item.label}</span>
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
|
|
<div className="flex">
|
|
{/* Desktop Sidebar */}
|
|
<aside className="hidden md:block w-64 bg-gray-900 min-h-[calc(100vh-73px)] border-r border-gray-800 sticky top-[73px]">
|
|
<nav className="p-4 space-y-2">
|
|
{navItems.map((item) => (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
className={({isActive}) =>
|
|
`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
|
|
isActive
|
|
? 'bg-unraid-orange text-white'
|
|
: 'text-gray-400 hover:bg-gray-800 hover:text-white'
|
|
}`
|
|
}
|
|
>
|
|
<item.icon size={20} />
|
|
<span>{item.label}</span>
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 p-4 md:p-6 max-w-7xl mx-auto w-full">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |