Mr. Drew's Assignment Creator — Docker share build

Self-contained Dockerized build for end users. Run via docker compose; see README.md for setup. Source-only, no sample data or build artifacts. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-21 19:58:36 -04:00
commit 5a51a0f112
33 changed files with 5413 additions and 0 deletions
@@ -0,0 +1,65 @@
+"use client";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+const LINKS = [
+  { href: "/", label: "Create" },
+  { href: "/library", label: "Library" },
+  { href: "/settings", label: "Settings" },
+];
+
+export default function Nav() {
+  const pathname = usePathname();
+  const [theme, setTheme] = useState(null);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    setTheme(document.documentElement.dataset.theme === "dark" ? "dark" : "light");
+  }, []);
+
+  useEffect(() => {
+    function onScroll() {
+      setScrolled(window.scrollY > 8);
+    }
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+
+  function toggleTheme() {
+    const next = document.documentElement.dataset.theme === "dark" ? "light" : "dark";
+    document.documentElement.dataset.theme = next;
+    try { localStorage.setItem("theme", next); } catch {}
+    setTheme(next);
+  }
+
+  return (
+    <header className={`topnav${scrolled ? " nav-scrolled" : ""}`}>
+      <div className="topnav-inner">
+        <Link href="/" className="brand">
+          <span className="brand-mark" aria-hidden="true">✎</span>
+          <span className="brand-text">Mr. Drew&rsquo;s Assignment Creator</span>
+        </Link>
+        <nav className="navlinks" aria-label="Main">
+          {LINKS.map((l) => {
+            const active = l.href === "/" ? pathname === "/" : pathname.startsWith(l.href);
+            return (
+              <Link key={l.href} href={l.href} className={`navlink${active ? " active" : ""}`}>
+                {l.label}
+              </Link>
+            );
+          })}
+        </nav>
+        <button
+          type="button"
+          className="icon-btn theme-toggle"
+          onClick={toggleTheme}
+          aria-label={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+          title={theme === "dark" ? "Switch to light mode" : "Switch to dark mode"}
+        >
+          {theme === "dark" ? "☀" : "☾"}
+        </button>
+      </div>
+    </header>
+  );
+}