feat(relaunch): responsiveness pass — hamburger + slide-out NavDrawer (diff #4)

- TopBar: mobile hamburger (.nav-burger ≤720px) + flexible grid (auto/1fr/auto)
  so the centered search shrinks instead of overflowing; ⌘K kbd hidden ≤560px
- NavDrawer (new): left slide-out drawer (panel + fading backdrop, Esc/backdrop/
  link-close) holding nav + Your topics + footer links — replaces the left rail
  ≤720px. Removed the bottom MobileNav tab bar (+ .app-mobilenav CSS); sign-in
  bar shows on mobile again
- Settings: Topics editor in the Profile tab (chips + Edit → TopicsModal) so
  topics are reachable on mobile
- Auth: split collapses to one column ≤860px (brand panel hidden, logo above form)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: NiallJoeMaher

app/(app)/settings/_client.tsx

@@ -17,7 +17,8 @@ import { Avatar } from "@/components/ui-components/avatar";
 import { Input } from "@/components/ui-components/input";
 import { ErrorMessage } from "@/components/ui-components/fieldset";
 import { Textarea } from "@/components/ui-components/textarea";
-import { ReferralCard } from "@/components/ds";
+import { ReferralCard, Tag } from "@/components/ds";
+import { useShellActions } from "@/components/Create/ShellActionsProvider";
 import { useTheme } from "next-themes";
 
 /** Mint switch — rounded-full track, knob slides left→right when on. */
@@ -145,6 +146,10 @@ const Settings = ({ profile }: { profile: User }) => {
     url: profile.image,
   });
 
+  const { openTopics } = useShellActions();
+  const { data: interestsData } = api.profile.myInterests.useQuery();
+  const myTopics = interestsData?.topics ?? [];
+
   const { mutate, isError, isSuccess } = api.profile.edit.useMutation();
   const { mutate: getUploadUrl } = api.profile.getUploadUrl.useMutation();
   const { mutate: updateUserPhotoUrl } =
@@ -399,6 +404,29 @@ const Settings = ({ profile }: { profile: User }) => {
         )}
       </FieldBlock>
 
+      <FieldBlock
+        title="Topics"
+        desc="The topics you follow shape your feed. Edit them anytime."
+      >
+        <div className="flex flex-wrap items-center gap-2">
+          {myTopics.length > 0 ? (
+            myTopics.map((t) => <Tag key={t}>{t}</Tag>)
+          ) : (
+            <p className="text-sm text-muted">
+              You haven&apos;t chosen any topics yet.
+            </p>
+          )}
+        </div>
+        <Button
+          color="dark/white"
+          type="button"
+          className="mt-3 h-[30px] rounded-md text-xs"
+          onClick={openTopics}
+        >
+          Edit topics
+        </Button>
+      </FieldBlock>
+
       <FieldBlock
         title="Invite friends"
         desc="Share Codú and earn points + the Connector badge for every builder who joins."

app/(auth)/get-started/_client.tsx

@@ -48,9 +48,10 @@ const GetStarted: NextPage = () => {
   }, [searchParams]);
 
   return (
-    <div className="grid min-h-screen w-full lg:mx-auto lg:max-w-[1080px] lg:grid-cols-2">
-      {/* Brand panel — slim header on mobile, full panel on desktop */}
-      <aside className="relative flex flex-col justify-between overflow-hidden border-b border-hairline bg-surface px-6 py-8 lg:border-b-0 lg:border-r lg:px-12 lg:py-16">
+    <div className="grid min-h-screen w-full min-[861px]:mx-auto min-[861px]:max-w-[1080px] min-[861px]:grid-cols-2">
+      {/* Brand panel — full split panel ≥861px; hidden entirely on narrow
+          screens (a small logo shows above the form instead). */}
+      <aside className="relative hidden flex-col justify-between overflow-hidden border-hairline bg-surface px-12 py-16 min-[861px]:flex min-[861px]:border-r">
         <div
           aria-hidden
           className="pointer-events-none absolute inset-0 bg-grid-dots bg-[length:24px_24px] opacity-50 [mask-image:radial-gradient(90%_70%_at_20%_10%,black_30%,transparent_80%)]"
@@ -70,7 +71,7 @@ const GetStarted: NextPage = () => {
           />
         </Link>
 
-        <div className="relative mt-8 hidden lg:mt-0 lg:block">
+        <div className="relative mt-0">
           <Eyebrow>where coders become product engineers</Eyebrow>
           <h1 className="mt-5 font-display text-4xl font-extrabold leading-[1.05] tracking-tight text-fg xl:text-5xl">
             Build the right thing.
@@ -84,15 +85,30 @@ const GetStarted: NextPage = () => {
         </div>
 
         {/* spacer keeps logo top-aligned on desktop */}
-        <div className="relative hidden lg:block" aria-hidden />
+        <div className="relative" aria-hidden />
       </aside>
 
       {/* Form panel */}
-      <main className="flex items-center justify-center px-6 py-12 lg:px-12 lg:py-16">
+      <main className="flex items-center justify-center px-6 py-12 min-[861px]:px-12 min-[861px]:py-16">
         <div className="w-full max-w-sm">
-          <div className="text-center lg:text-left">
-            <Eyebrow className="lg:hidden">join the community</Eyebrow>
-            <h2 className="mt-4 font-display text-3xl font-extrabold tracking-tight text-fg lg:mt-0">
+          {/* Small logo above the form when the brand panel is hidden */}
+          <Link
+            href="/"
+            aria-label="Codú home"
+            className="mb-8 inline-flex w-full justify-center min-[861px]:hidden"
+          >
+            <Image
+              src="/images/codu.png"
+              alt="Codú"
+              width={189}
+              height={60}
+              className="h-6 w-auto"
+              priority
+            />
+          </Link>
+          <div className="text-center min-[861px]:text-left">
+            <Eyebrow className="min-[861px]:hidden">join the community</Eyebrow>
+            <h2 className="mt-4 font-display text-3xl font-extrabold tracking-tight text-fg min-[861px]:mt-0">
               Start building with AI
             </h2>
             <p className="mt-2 text-sm text-muted">
@@ -166,7 +182,7 @@ const GetStarted: NextPage = () => {
 
           <p className="mt-4 text-xs text-muted">More sign-in options coming soon.</p>
 
-          <p className="mt-6 text-center text-xs text-faint lg:text-left">
+          <p className="mt-6 text-center text-xs text-faint min-[861px]:text-left">
             By continuing you agree to our{" "}
             <Link href="/tou" className="text-muted underline hover:text-fg">
               terms

components/Layout/AppShell.tsx

@@ -6,7 +6,7 @@ import { TopBar } from "./TopBar";
 import { LeftRail } from "./LeftRail";
 import { RightRail } from "./RightRail";
 import { SignInBar } from "./SignInBar";
-import { MobileNav } from "./MobileNav";
+import { NavDrawer } from "./NavDrawer";
 import { CommandPalette } from "@/components/CommandPalette/CommandPalette";
 import { ShellActionsProvider } from "@/components/Create/ShellActionsProvider";
 
@@ -24,6 +24,7 @@ interface AppShellProps {
  */
 export function AppShell({ children, session, username }: AppShellProps) {
   const [paletteOpen, setPaletteOpen] = useState(false);
+  const [drawerOpen, setDrawerOpen] = useState(false);
   // Remember the element that opened the palette so focus can be restored.
   const paletteTrigger = useRef<HTMLElement | null>(null);
 
@@ -64,6 +65,7 @@ export function AppShell({ children, session, username }: AppShellProps) {
           session={session}
           username={username}
           onOpenPalette={openPalette}
+          onOpenMenu={() => setDrawerOpen(true)}
         />
         <main className="app-main">
           <LeftRail session={session} username={username} />
@@ -73,7 +75,12 @@ export function AppShell({ children, session, username }: AppShellProps) {
 
         {paletteOpen && <CommandPalette onClose={closePalette} />}
         {!session && <SignInBar />}
-        <MobileNav session={session} username={username} />
+        <NavDrawer
+          open={drawerOpen}
+          onClose={() => setDrawerOpen(false)}
+          session={session}
+          username={username}
+        />
       </div>
     </ShellActionsProvider>
   );