feat: style

frontend/src/components/shared/NavMenu.tsx

@@ -5,6 +5,7 @@ import menuSvg from "@/assets/menu.min.svg";
 const NAV_ITEMS = [
   { label: "Browse", path: "/browse" },
   { label: "Compose", path: "/" },
+  { label: "Settings", path: "/settings" },
 ] as const;
 
 /**
@@ -47,7 +48,12 @@ function useSmoothScroll(scrollSelector: string, ease = 0.08) {
   return offset;
 }
 
-export default function NavMenu() {
+interface NavMenuProps {
+  theme: "terra" | "azure";
+  onToggleTheme: () => void;
+}
+
+export default function NavMenu({ theme, onToggleTheme }: NavMenuProps) {
   const navigate = useNavigate();
   const location = useLocation();
   const scrollY = useSmoothScroll("[data-scroll-root]", 0.07);
@@ -82,6 +88,15 @@ export default function NavMenu() {
           );
         })}
       </nav>
+
+      {/* Theme toggle — bottom container */}
+      <button
+        onClick={onToggleTheme}
+        className="nav-menu-theme-toggle"
+        title={`Switch to ${theme === "terra" ? "Azure" : "Terracotta"} theme`}
+      >
+        {theme === "terra" ? "◐ AZURE" : "◑ TERRA"}
+      </button>
     </div>
   );
 }