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>
This commit is contained in:
Ullrich Schäfer
parent
65e6699dc4
commit
4e2bfb0bbe
8 changed files with 372 additions and 66 deletions
|
|
@ -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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue