Initial commit

2025-11-15 14:58:44 +01:00
commit 84c9e3f855
38 changed files with 14052 additions and 0 deletions
@@ -0,0 +1,103 @@
+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>
+    );
+}