v1.0 with SW PWA enabled

frontend/src/components/Layout.tsx

@@ -0,0 +1,118 @@
+import { NavLink } from '@/components/NavLink';
+import { Activity, Settings, Server, Menu, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+
+export function Layout({ children }: LayoutProps) {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Header */}
+      <header className="sticky top-0 z-50 border-b border-border/50 bg-background/80 backdrop-blur-lg">
+        <div className="container flex h-14 sm:h-16 items-center justify-between px-4">
+          <div className="flex items-center gap-2 sm:gap-3">
+            <div className="p-1.5 sm:p-2 rounded-lg bg-primary/10">
+              <Activity className="w-5 h-5 sm:w-6 sm:h-6 text-primary" />
+            </div>
+            <div>
+              <h1 className="text-base sm:text-lg font-bold">Status Monitor</h1>
+              <p className="text-[10px] sm:text-xs text-muted-foreground hidden sm:block">Surveillance en temps réel</p>
+            </div>
+          </div>
+          
+          {/* Desktop Navigation */}
+          <nav className="hidden sm:flex items-center gap-1">
+            <NavLink
+              to="/"
+              end
+              className={cn(
+                'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium',
+                'text-muted-foreground hover:text-foreground hover:bg-muted/50',
+                'transition-colors'
+              )}
+              activeClassName="bg-muted text-foreground"
+            >
+              <Server className="w-4 h-4" />
+              Dashboard
+            </NavLink>
+            <NavLink
+              to="/admin"
+              className={cn(
+                'flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium',
+                'text-muted-foreground hover:text-foreground hover:bg-muted/50',
+                'transition-colors'
+              )}
+              activeClassName="bg-muted text-foreground"
+            >
+              <Settings className="w-4 h-4" />
+              Administration
+            </NavLink>
+          </nav>
+
+          {/* Mobile Menu Button */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="sm:hidden"
+            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
+          >
+            {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+          </Button>
+        </div>
+
+        {/* Mobile Navigation */}
+        {mobileMenuOpen && (
+          <nav className="sm:hidden border-t border-border/50 bg-background/95 backdrop-blur-lg">
+            <div className="container px-4 py-3 space-y-1">
+              <NavLink
+                to="/"
+                end
+                className={cn(
+                  'flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium w-full',
+                  'text-muted-foreground hover:text-foreground hover:bg-muted/50',
+                  'transition-colors'
+                )}
+                activeClassName="bg-muted text-foreground"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                <Server className="w-5 h-5" />
+                Dashboard
+              </NavLink>
+              <NavLink
+                to="/admin"
+                className={cn(
+                  'flex items-center gap-3 px-4 py-3 rounded-lg text-sm font-medium w-full',
+                  'text-muted-foreground hover:text-foreground hover:bg-muted/50',
+                  'transition-colors'
+                )}
+                activeClassName="bg-muted text-foreground"
+                onClick={() => setMobileMenuOpen(false)}
+              >
+                <Settings className="w-5 h-5" />
+                Administration
+              </NavLink>
+            </div>
+          </nav>
+        )}
+      </header>
+
+      {/* Main Content */}
+      <main className="container py-4 sm:py-8 px-4">
+        {children}
+      </main>
+
+      {/* Footer */}
+      <footer className="border-t border-border/50 py-4 sm:py-6">
+        <div className="container text-center text-xs sm:text-sm text-muted-foreground px-4">
+          <p>Status Monitor — Surveillance distribuée des services</p>
+        </div>
+      </footer>
+    </div>
+  );
+}