Redesign navbar with avatar dropdown and mobile drawer

Stream C from docs/information-architecture.md. The navbar's account
cluster (<username> + Settings + Logout) was three controls for the
same concept; the cluster now collapses behind an avatar dropdown.
On mobile, all primary nav and account controls move into a
hamburger drawer so the top bar stays at logo + bell + hamburger
without wrapping at small viewports.

- New apps/journal/app/components/Avatar.tsx — initials-only avatar
  (no image-upload story yet; the component is the single place to
  add image fallback when one lands).
- New apps/journal/app/components/AccountDropdown.tsx — click the
  avatar trigger to reveal Profile / Settings / Log Out menuitems.
  Click-outside + Escape-to-close. role="menu" + role="menuitem" for
  a11y.
- New apps/journal/app/components/MobileNavMenu.tsx — hamburger
  trigger + slide-out drawer at md and below. Contains all primary
  nav (Feed, Explore, Routes, Activities, Notifications) plus the
  account cluster (Profile, Settings, Log Out). Auto-closes on
  navigation; locks body scroll while open.
- apps/journal/app/root.tsx — refactor NavBar:
  * Brand + primary nav links hide at md and below (drawer covers
    them).
  * Right cluster: bell on every viewport; avatar dropdown on
    desktop, hamburger on mobile.
  * Loader exposes user.displayName so Avatar can compute initials.
  * Drops the now-unused Form import; Form moved into the
    dropdown/drawer components.

E2E tests updated:
- e2e/auth.test.ts — logout helper opens the avatar dropdown via
  aria-label = displayName||username, then clicks the Log Out
  menuitem. Username assertions in nav switch from getByText to
  getByRole("button", {name: username}) (the avatar button).
- e2e/settings.test.ts — "settings link visible in nav" opens the
  avatar dropdown first, then asserts the Settings menuitem.

i18n: nav.openMenu, nav.closeMenu keys for the hamburger trigger
labels (EN + DE).

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

apps/journal/app/components/AccountDropdown.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useRef, useState } from "react";
+import { Form, Link } from "react-router";
+import { useTranslation } from "react-i18next";
+import { Avatar } from "./Avatar";
+
+interface Props {
+  user: { username: string; displayName: string | null };
+}
+
+export function AccountDropdown({ user }: Props) {
+  const { t } = useTranslation("journal");
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Click-outside + Escape close. Mounted only while open to keep the
+  // listener cost zero in the steady state.
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e: MouseEvent) => {
+      if (!containerRef.current) return;
+      if (!containerRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onClick);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onClick);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label={user.displayName ?? user.username}
+        onClick={() => setOpen((o) => !o)}
+        className="inline-flex items-center rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+      >
+        <Avatar displayName={user.displayName} username={user.username} size="md" />
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          className="absolute right-0 top-full z-20 mt-2 w-56 origin-top-right rounded-md border border-gray-200 bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5"
+        >
+          <div className="border-b border-gray-100 px-3 py-2">
+            <p className="truncate text-sm font-medium text-gray-900">
+              {user.displayName ?? user.username}
+            </p>
+            <p className="truncate text-xs text-gray-500">@{user.username}</p>
+          </div>
+          <Link
+            to={`/users/${user.username}`}
+            role="menuitem"
+            onClick={() => setOpen(false)}
+            className="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+          >
+            {t("nav.profile")}
+          </Link>
+          <Link
+            to="/settings"
+            role="menuitem"
+            onClick={() => setOpen(false)}
+            className="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50"
+          >
+            {t("nav.settings")}
+          </Link>
+          <Form method="post" action="/auth/logout">
+            <button
+              type="submit"
+              role="menuitem"
+              className="block w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50"
+            >
+              {t("nav.logout")}
+            </button>
+          </Form>
+        </div>
+      )}
+    </div>
+  );
+}

apps/journal/app/components/Avatar.tsx

@@ -0,0 +1,42 @@
+// Initials-only avatar. We don't have an image-upload story yet (the
+// `users` table has no avatar URL column), so initials are the
+// implementation. When images land, this component is the single
+// place to add the image fallback.
+
+interface Props {
+  displayName: string | null;
+  username: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+function initialsOf(displayName: string | null, username: string): string {
+  const source = (displayName ?? username).trim();
+  if (source.length === 0) return "?";
+  // Two-letter initials: first letter of the first two whitespace-
+  // separated words, falling back to the first two characters when
+  // the source is a single token.
+  const parts = source.split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) {
+    return (parts[0]![0]! + parts[1]![0]!).toUpperCase();
+  }
+  return source.slice(0, 2).toUpperCase();
+}
+
+const SIZE_CLASS: Record<NonNullable<Props["size"]>, string> = {
+  sm: "h-7 w-7 text-[11px]",
+  md: "h-9 w-9 text-sm",
+  lg: "h-12 w-12 text-base",
+};
+
+export function Avatar({ displayName, username, size = "md", className = "" }: Props) {
+  const initials = initialsOf(displayName, username);
+  return (
+    <span
+      className={`inline-flex shrink-0 items-center justify-center rounded-full bg-gray-200 font-semibold text-gray-700 ${SIZE_CLASS[size]} ${className}`}
+      aria-hidden="true"
+    >
+      {initials}
+    </span>
+  );
+}

apps/journal/app/components/MobileNavMenu.tsx

@@ -0,0 +1,152 @@
+import { useEffect, useState } from "react";
+import { Form, Link, useLocation } from "react-router";
+import { useTranslation } from "react-i18next";
+import { Avatar } from "./Avatar";
+
+interface Props {
+  user: { username: string; displayName: string | null };
+}
+
+// Mobile drawer for the navbar. Replaces the "everything in a row"
+// desktop layout with a hamburger trigger and a slide-out panel that
+// holds all the same destinations. Bell + the dropdown's account
+// section move inside; the bell badge still surfaces on the trigger
+// itself via the parent navbar.
+export function MobileNavMenu({ user }: Props) {
+  const { t } = useTranslation("journal");
+  const [open, setOpen] = useState(false);
+  const location = useLocation();
+
+  // Close the drawer on navigation. React Router pushes a new location
+  // when a Link is followed; this effect picks that up.
+  useEffect(() => {
+    setOpen(false);
+  }, [location.pathname]);
+
+  // Close on Escape; lock body scroll while open.
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", onKey);
+    const prevOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = prevOverflow;
+    };
+  }, [open]);
+
+  const linkClass = (path: string) => {
+    const active = location.pathname === path || location.pathname.startsWith(path + "/");
+    return `block rounded-md px-3 py-2 text-base font-medium ${
+      active ? "bg-blue-50 text-blue-700" : "text-gray-700 hover:bg-gray-50"
+    }`;
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label={t("nav.openMenu")}
+        aria-expanded={open}
+        onClick={() => setOpen(true)}
+        className="inline-flex items-center justify-center rounded-md p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.75}
+          stroke="currentColor"
+          className="h-6 w-6"
+          aria-hidden="true"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
+        </svg>
+      </button>
+
+      {open && (
+        <div className="fixed inset-0 z-40 md:hidden">
+          {/* Backdrop */}
+          <button
+            type="button"
+            aria-label={t("nav.closeMenu")}
+            onClick={() => setOpen(false)}
+            className="absolute inset-0 bg-black/30"
+          />
+          {/* Panel */}
+          <div
+            role="dialog"
+            aria-modal="true"
+            className="absolute right-0 top-0 flex h-full w-72 max-w-[85%] flex-col bg-white shadow-xl"
+          >
+            <div className="flex items-center justify-between border-b border-gray-200 px-4 py-3">
+              <div className="flex items-center gap-3">
+                <Avatar displayName={user.displayName} username={user.username} size="md" />
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-medium text-gray-900">
+                    {user.displayName ?? user.username}
+                  </p>
+                  <p className="truncate text-xs text-gray-500">@{user.username}</p>
+                </div>
+              </div>
+              <button
+                type="button"
+                aria-label={t("nav.closeMenu")}
+                onClick={() => setOpen(false)}
+                className="rounded-md p-2 text-gray-500 hover:bg-gray-100"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={1.75}
+                  stroke="currentColor"
+                  className="h-5 w-5"
+                  aria-hidden="true"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            <nav className="flex-1 space-y-1 overflow-y-auto px-2 py-3">
+              <Link to="/feed" className={linkClass("/feed")}>
+                {t("social.feed.title")}
+              </Link>
+              <Link to="/explore" className={linkClass("/explore")}>
+                {t("nav.explore")}
+              </Link>
+              <Link to="/routes" className={linkClass("/routes")}>
+                {t("nav.routes")}
+              </Link>
+              <Link to="/activities" className={linkClass("/activities")}>
+                {t("nav.activities")}
+              </Link>
+              <Link to="/notifications" className={linkClass("/notifications")}>
+                {t("notifications.title")}
+              </Link>
+              <hr className="my-2 border-gray-200" />
+              <Link to={`/users/${user.username}`} className={linkClass(`/users/${user.username}`)}>
+                {t("nav.profile")}
+              </Link>
+              <Link to="/settings" className={linkClass("/settings")}>
+                {t("nav.settings")}
+              </Link>
+              <Form method="post" action="/auth/logout">
+                <button
+                  type="submit"
+                  className="block w-full rounded-md px-3 py-2 text-left text-base font-medium text-gray-700 hover:bg-gray-50"
+                >
+                  {t("nav.logout")}
+                </button>
+              </Form>
+            </nav>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}

apps/journal/app/root.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse, useLocation, Form, Link, redirect } from "react-router";
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse, useLocation, Link, redirect } from "react-router";
 import type { LinksFunction } from "react-router";
 import type { Route } from "./+types/root";
 import * as Sentry from "@sentry/react";
@@ -10,6 +10,8 @@ import { LocaleProvider } from "~/components/LocaleContext";
 import { AlphaBanner } from "~/components/AlphaBanner";
 import { useUnreadNotifications } from "~/hooks/useUnreadNotifications";
 import { Footer } from "~/components/Footer";
+import { AccountDropdown } from "~/components/AccountDropdown";
+import { MobileNavMenu } from "~/components/MobileNavMenu";
 import { initSentryClient, stopSentryClient } from "~/lib/sentry.client";
 import { TERMS_VERSION } from "~/lib/legal";
 import stylesheet from "@trails-cool/ui/styles.css?url";
@@ -76,17 +78,51 @@ export async function loader({ request }: Route.LoaderArgs) {
   }
 
   return {
-    user: user ? { id: user.id, username: user.username } : null,
+    user: user
+      ? { id: user.id, username: user.username, displayName: user.displayName }
+      : null,
     locale,
     unreadNotifications,
   };
 }
 
+function BellLink({ unread, label }: { unread: number; label: string }) {
+  return (
+    <Link
+      to="/notifications"
+      className="relative inline-flex items-center text-gray-600 hover:text-gray-900"
+      aria-label={label}
+      title={label}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.75}
+        stroke="currentColor"
+        className="h-5 w-5"
+        aria-hidden="true"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
+        />
+      </svg>
+      {unread > 0 && (
+        <span className="absolute -right-1.5 -top-1.5 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-semibold leading-none text-white">
+          {unread}
+        </span>
+      )}
+    </Link>
+  );
+}
+
 function NavBar({
   user,
   unreadNotifications,
 }: {
-  user: { id: string; username: string } | null;
+  user: { id: string; username: string; displayName: string | null } | null;
   unreadNotifications: number;
 }) {
   const { t } = useTranslation("journal");
@@ -100,20 +136,19 @@ function NavBar({
 
   const linkClass = (path: string) =>
     `text-sm font-medium ${
-      isActive(path)
-        ? "text-blue-600"
-        : "text-gray-600 hover:text-gray-900"
+      isActive(path) ? "text-blue-600" : "text-gray-600 hover:text-gray-900"
     }`;
 
   return (
     <nav className="border-b border-gray-200 bg-white px-4 py-2">
-      <div className="mx-auto flex max-w-6xl items-center justify-between">
-        <div className="flex items-center gap-6">
+      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4">
+        {/* Brand + (desktop-only) primary nav */}
+        <div className="flex min-w-0 items-center gap-6">
           <Link to="/" className="text-lg font-semibold text-gray-900">
             {t("title")}
           </Link>
           {user && (
-            <>
+            <div className="hidden items-center gap-6 md:flex">
               <Link to="/feed" className={linkClass("/feed")}>
                 {t("social.feed.title")}
               </Link>
@@ -126,56 +161,30 @@ function NavBar({
               <Link to="/activities" className={linkClass("/activities")}>
                 {t("nav.activities")}
               </Link>
-            </>
+            </div>
           )}
         </div>
-        <div className="flex items-center gap-4">
+
+        {/* Right-side cluster */}
+        <div className="flex items-center gap-3">
           {user ? (
             <>
-              <Link
-                to="/notifications"
-                className={`relative inline-flex items-center ${linkClass("/notifications")}`}
-                aria-label={t("notifications.title")}
-                title={t("notifications.title")}
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth={1.75}
-                  stroke="currentColor"
-                  className="h-5 w-5"
-                  aria-hidden="true"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9A6 6 0 0 0 6 9v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"
-                  />
-                </svg>
-                {liveUnread > 0 && (
-                  <span className="absolute -right-1.5 -top-1.5 inline-flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-red-500 px-1 text-[10px] font-semibold leading-none text-white">
-                    {liveUnread}
-                  </span>
-                )}
-              </Link>
-              <Link
-                to={`/users/${user.username}`}
-                className={linkClass(`/users/${user.username}`)}
-              >
-                {user.username}
-              </Link>
-              <Link to="/settings" className={linkClass("/settings")}>
-                {t("nav.settings")}
-              </Link>
-              <Form method="post" action="/auth/logout">
-                <button
-                  type="submit"
-                  className="text-sm font-medium text-gray-600 hover:text-gray-900"
-                >
-                  {t("nav.logout")}
-                </button>
-              </Form>
+              {/* Bell shows on every viewport size */}
+              <BellLink unread={liveUnread} label={t("notifications.title")} />
+
+              {/* Desktop: avatar dropdown */}
+              <div className="hidden md:block">
+                <AccountDropdown
+                  user={{ username: user.username, displayName: user.displayName }}
+                />
+              </div>
+
+              {/* Mobile: hamburger drawer */}
+              <div className="md:hidden">
+                <MobileNavMenu
+                  user={{ username: user.username, displayName: user.displayName }}
+                />
+              </div>
             </>
           ) : (
             <>