Initial commit

frontend/src/components/Layout.tsx

@@ -0,0 +1,37 @@
+import { Link, useLocation } from 'react-router-dom'
+import type { ReactNode } from 'react'
+
+const nav = [
+  { to: '/', label: 'Dashboard', icon: '⊞' },
+  { to: '/settings', label: 'Settings', icon: '🖥' },
+  { to: '/configs', label: 'Configs', icon: '⚙' },
+  { to: '/modlists', label: 'Modlists', icon: '📦' },
+  { to: '/logs', label: 'Logs', icon: '📋' },
+]
+
+export default function Layout({ children }: { children: ReactNode }) {
+  const loc = useLocation()
+
+  return (
+    <div className="flex h-screen bg-neutral-950 text-neutral-100">
+      <aside className="w-56 border-r border-neutral-800 p-4 flex flex-col gap-2">
+        <h1 className="text-lg font-bold mb-4 tracking-tight">Arma3 Web</h1>
+        {nav.map(item => (
+          <Link
+            key={item.to}
+            to={item.to}
+            className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm transition-colors ${
+              loc.pathname === item.to || (item.to !== '/' && loc.pathname.startsWith(item.to))
+                ? 'bg-neutral-800 text-white'
+                : 'text-neutral-400 hover:text-white hover:bg-neutral-800/50'
+            }`}
+          >
+            <span>{item.icon}</span>
+            {item.label}
+          </Link>
+        ))}
+      </aside>
+      <main className="flex-1 overflow-auto p-6">{children}</main>
+    </div>
+  )
+}