feat: styles

frontend/src/components/shared/NavBar.tsx

@@ -1,90 +1,46 @@
-import { useState } from "react";
-import { NavLink } from "react-router-dom";
-import { toast } from "sonner";
-import { RotateCcw } from "lucide-react";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
+import { useNavigate } from "react-router-dom";
+import baldothSvg from "@/assets/baldoth.min.svg";
 
-const navLink = ({ isActive }: { isActive: boolean }) =>
-  cn(
-    "px-3 py-1.5 text-sm rounded-md transition-colors",
-    isActive
-      ? "bg-accent text-accent-foreground font-medium"
-      : "text-muted-foreground hover:text-foreground hover:bg-accent"
-  );
+const TITLE = `      █████   ██    ██
+   ██████  █████ █████    █
+  ██   █  █  █████ █████ ███
+ █    █  █   █ ██  █ ██   █
+     █  █    █     █                     ███  ████      ████                  ████
+    ██ ██    █     █    ███       ████    ████ ████ █  █ ███  ████  ████     █ ███  ████ ████ ████   ███       ████     █ ███  ████  ████
+    ██ ██    █     █     ███     █ ███  █  ██   ████  █   ████  ████ ████ █ █   ████  ███ ████ ███  █ ███     █ ███  █ █   ████  ████ ████ █
+    ██ ██    █     █      ██    █   ████   ██        ██    ██    ██   ████ ██    ██    ██  ████ ████   ██    █   ████ ██    ██    ██   ████
+    ██ ██    █     █      ██   ██          ██        ██    ██    ██    ██  ██    ██    ██   ██   ██    ██   ██        ██    ██    ██    ██
+    ██ ██    █     ██     ██   ██          ██        ██    ██    ██    ██  ██    ██    ██   ██   ██    ██   ██        ██    ██    ██    ██
+    █  ██    █     ██     ██   ██          ██        ██    ██    ██    ██  ██    ██    ██   ██   ██    ██   ██        ██    ██    ██    ██
+       █     █      ██    ██   ██          ██        ██    ██    ██    ██  ██    ██    ██   ██   ██    ██   ██        ██    ██    ██    ██
+   ████      █      ██    ██   ███     █   ███        ██████     ██    ██   ██████     ██   ██   ██    ██   ███     █  ██████     ██    ██
+  █  █████           ██   ███ █ ███████     ███        ████      ███   ███   ████      ███  ███  ███   ███ █ ███████    ████      ███   ███
+ █     ██                  ███   █████                            ███   ███             ███  ███  ███   ███   █████                ███   ███
+ █
+  █
+   ██`;
 
 export default function NavBar() {
-  const [restartOpen, setRestartOpen] = useState(false);
-  const [restarting, setRestarting] = useState(false);
-
-  const handleRestart = async () => {
-    setRestarting(true);
-    try {
-      const res = await fetch("/api/restart", { method: "POST" });
-      if (!res.ok) throw new Error(await res.text());
-      toast.success("NomadNet restarted");
-    } catch (e) {
-      toast.error(`Restart failed: ${e}`);
-    } finally {
-      setRestarting(false);
-      setRestartOpen(false);
-    }
-  };
+  const navigate = useNavigate();
 
   return (
-    <nav className="flex items-center gap-1 px-4 h-12 border-b bg-card shrink-0">
-      <span className="mr-6 text-primary font-bold tracking-widest" title="Micronomicon"
-        style={{ fontVariantLigatures: "none" }}
-      >╠═ MICRONOMICON ═╣</span>
-
-      <NavLink to="/" end className={navLink}>
-        Dashboard
-      </NavLink>
-      <NavLink to="/editor/new" className={navLink}>
-        New Page
-      </NavLink>
-      <NavLink to="/graph" className={navLink}>
-        Graph
-      </NavLink>
-
-      <div className="flex-1" />
-
-      <Button
-        variant="outline"
-        size="sm"
-        disabled={restarting}
-        onClick={() => setRestartOpen(true)}
+    <div className="flex flex-col items-center pt-6 pb-3 shrink-0 gap-2">
+      <button
+        onClick={() => navigate("/")}
+        className="hover:opacity-80 transition-opacity cursor-pointer flex flex-col items-center gap-2"
+        title="Go to Dashboard"
       >
-        <RotateCcw className="w-4 h-4 mr-2" />
-        Restart NomadNet
-      </Button>
-
-      <AlertDialog open={restartOpen} onOpenChange={setRestartOpen}>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>Restart NomadNet?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will briefly interrupt mesh network connectivity.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction onClick={handleRestart}>
-              Restart
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </nav>
+        <div
+          className="h-28 w-28"
+          style={{
+            backgroundColor: "var(--primary)",
+            opacity: 0.5,
+            mask: `url(${baldothSvg}) center/contain no-repeat`,
+            WebkitMask: `url(${baldothSvg}) center/contain no-repeat`,
+          }}
+        />
+        <pre className="text-[4px] leading-[1] tracking-tighter select-none text-primary/40">{TITLE}</pre>
+      </button>
+    </div>
   );
 }