feat: menu and ponters

frontend/src/components/shared/AppShell.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useState, type ReactNode } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useLocation } from "react-router-dom";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Toaster } from "@/components/ui/sonner";
 import frameTerraSvg from "@/assets/frame.themed.svg";
 import frameAzureSvg from "@/assets/frame.azure.svg";
+import NavMenu from "./NavMenu";
 
 const TITLE = `
 
@@ -82,7 +83,9 @@ function RomanClock() {
 
 export default function AppShell({ children }: { children: ReactNode }) {
   const navigate = useNavigate();
+  const location = useLocation();
   const [theme, setTheme] = useState<Theme>(getStoredTheme);
+  const isEditor = location.pathname.startsWith("/editor");
 
   useEffect(() => {
     const root = document.documentElement;
@@ -103,7 +106,7 @@ export default function AppShell({ children }: { children: ReactNode }) {
   return (
     <TooltipProvider>
       <div className="flex flex-col h-screen bg-background text-foreground">
-        <main className="flex-1 overflow-auto">
+        <main className="flex-1 overflow-auto" data-scroll-root>
           <div className="relative max-w-5xl min-w-5xl mx-auto min-h-full">
             {/* Frame SVG — background */}
             <img
@@ -137,6 +140,17 @@ export default function AppShell({ children }: { children: ReactNode }) {
             >
               {children}
             </div>
+
+            {/* Nav menu — anchored below the frame, left side (hidden on editor) */}
+            {!isEditor && (
+              <div
+                className="absolute z-20"
+                style={{ top: 200, left: -210 }}
+              >
+                <NavMenu />
+              </div>
+            )}
+
           </div>
         </main>
         <footer className="flex items-center justify-center gap-3 text-[10px] text-muted-foreground py-4 shrink-0 tracking-widest uppercase">