trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #324 from trails-cool/navbar-redesign-avatar-dropdown

Browse source 
Redesign navbar: avatar dropdown + mobile drawer
This commit is contained in:
Ullrich Schäfer 2026-04-26 09:59:56 +02:00 • committed by GitHub
commit 218389e9f8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 372 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

87
apps/journal/app/components/AccountDropdown.tsx Normal file
View file

@ -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>
);
}

42
apps/journal/app/components/Avatar.tsx Normal file
View file

@ -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>
);
}

152
apps/journal/app/components/MobileNavMenu.tsx Normal file
View file

@ -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>
)}
</>
);
}

119
apps/journal/app/root.tsx
View file

@ -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>
</>
) : (
<>

24
e2e/auth.test.ts
View file

@ -35,8 +35,12 @@ async function registerUser(page: Page, email: string, username: string) {
await page.getByRole("button", { name: /Register with Passkey/ }).click();
}
async function logout(page: Page) {
await page.getByRole("navigation").getByRole("button", { name: "Log Out" }).click();
async function logout(page: Page, accountLabel: string) {
// The account cluster lives inside an avatar dropdown now. Click the
// avatar (its aria-label is displayName || username), then click the
// Log Out menuitem inside the popup.
await page.getByRole("navigation").getByRole("button", { name: accountLabel }).click();
await page.getByRole("menuitem", { name: "Log Out" }).click();
await expect(page.getByRole("navigation").getByRole("link", { name: "Sign In" })).toBeVisible({ timeout: 5000 });
}
@ -51,16 +55,19 @@ test.describe("Passkey Authentication", () => {
// Register
await registerUser(page, email, username);
await expect(page).toHaveURL("/", { timeout: 10000 });
await expect(page.getByRole("navigation").getByText(username)).toBeVisible({ timeout: 5000 });
// The avatar button's aria-label is the displayName or username;
// for a freshly-registered user with no displayName set, that's
// the username.
await expect(page.getByRole("navigation").getByRole("button", { name: username })).toBeVisible({ timeout: 5000 });
// Log out
await logout(page);
await logout(page, username);
// Sign in with passkey
await page.goto("/auth/login");
await page.getByRole("button", { name: /Sign in with Passkey/ }).click();
await expect(page).toHaveURL("/", { timeout: 10000 });
await expect(page.getByRole("navigation").getByText(username)).toBeVisible({ timeout: 5000 });
await expect(page.getByRole("navigation").getByRole("button", { name: username })).toBeVisible({ timeout: 5000 });
await removeVirtualAuthenticator(cdp, authenticatorId);
});
@ -81,11 +88,12 @@ test.describe("Passkey Authentication", () => {
const authenticatorId = await setupVirtualAuthenticator(cdp);
const email = `dup-${Date.now()}@example.com`;
const firstUsername = `first${Date.now()}`;
// Register first user
await registerUser(page, email, `first${Date.now()}`);
await registerUser(page, email, firstUsername);
await expect(page).toHaveURL("/", { timeout: 10000 });
await logout(page);
await logout(page, firstUsername);
// Try to register with same email
await registerUser(page, email, `second${Date.now()}`);
@ -103,7 +111,7 @@ test.describe("Passkey Authentication", () => {
// Register first user
await registerUser(page, `first-${Date.now()}@example.com`, username);
await expect(page).toHaveURL("/", { timeout: 10000 });
await logout(page);
await logout(page, username);
// Try to register with same username
await registerUser(page, `second-${Date.now()}@example.com`, username);

10
e2e/settings.test.ts
View file

@ -139,18 +139,22 @@ test.describe("Account Settings", () => {
await removeVirtualAuthenticator(cdp, authenticatorId);
});
test("settings link visible in nav when logged in", async ({ page }) => {
test("settings link reachable from nav when logged in", async ({ page }) => {
const cdp = await page.context().newCDPSession(page);
const authenticatorId = await setupVirtualAuthenticator(cdp);
await registerAndLogin(page, cdp);
const { username } = await registerAndLogin(page, cdp);
await expect(page.getByRole("navigation").getByRole("link", { name: "Settings" })).toBeVisible();
// Settings now lives inside the avatar dropdown; opening the
// dropdown reveals the menuitem.
await page.getByRole("navigation").getByRole("button", { name: username }).click();
await expect(page.getByRole("menuitem", { name: "Settings" })).toBeVisible();
await removeVirtualAuthenticator(cdp, authenticatorId);
});
test("settings link not visible when logged out", async ({ page }) => {
await page.goto("/");
// Anonymous navbar has neither the avatar nor the Settings link.
await expect(page.getByRole("navigation").getByRole("link", { name: "Settings" })).not.toBeVisible();
});

2
packages/i18n/src/locales/de.ts
View file

@ -398,6 +398,8 @@ export default {
profile: "Profil",
settings: "Einstellungen",
logout: "Abmelden",
openMenu: "Menü öffnen",
closeMenu: "Menü schließen",
},
explore: {
heading: "Entdecken",

2
packages/i18n/src/locales/en.ts
View file

@ -398,6 +398,8 @@ export default {
profile: "Profile",
settings: "Settings",
logout: "Log Out",
openMenu: "Open menu",
closeMenu: "Close menu",
},
explore: {
heading: "Explore",