Create flow: session UI + sign out

app/components/navigation/ConditionalFooter.tsx

@@ -14,7 +14,7 @@ const Footer = dynamic(() => import("./Footer"), {
 
 /**
  * Conditionally renders Footer based on pathname.
- * Hides footer for /create/* and /login (full-screen flows; login uses a body portal).
+ * Hides footer for /create/* and /login (full-screen flows; no site chrome).
  */
 const ConditionalFooter = memo(() => {
   const pathname = usePathname();

app/components/navigation/MenuBarItem/MenuBarItem.container.tsx

@@ -12,6 +12,7 @@ import {
 const MenuBarItemContainer = memo<MenuBarItemProps>(
   ({
     href = "#",
+    buttonOnClick,
     children,
     state: stateProp,
     mode: modeProp,
@@ -112,6 +113,7 @@ const MenuBarItemContainer = memo<MenuBarItemProps>(
     return (
       <MenuBarItemView
         href={href}
+        buttonOnClick={buttonOnClick}
         disabled={disabled}
         className={className}
         combinedStyles={combinedStyles}

app/components/navigation/MenuBarItem/MenuBarItem.types.ts

@@ -11,6 +11,8 @@ export type MenuBarItemModeValue = "default" | "inverse";
 
 export interface MenuBarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   href?: string;
+  /** When set, renders a `<button type="button">` instead of a link (e.g. open login modal). */
+  buttonOnClick?: () => void;
   children?: React.ReactNode;
   /**
    * Menu bar item state: "default", "hover", or "selected".
@@ -45,9 +47,12 @@ export interface MenuBarItemProps extends React.AnchorHTMLAttributes<HTMLAnchorE
 
 export interface MenuBarItemViewProps {
   href: string;
+  buttonOnClick?: () => void;
   children?: React.ReactNode;
   disabled: boolean;
   className: string;
   combinedStyles: string;
-  accessibilityProps: React.HTMLAttributes<HTMLAnchorElement | HTMLSpanElement>;
+  accessibilityProps: React.HTMLAttributes<
+    HTMLAnchorElement | HTMLSpanElement | HTMLButtonElement
+  >;
 }

app/components/navigation/MenuBarItem/MenuBarItem.view.tsx

@@ -3,6 +3,7 @@ import type { MenuBarItemViewProps } from "./MenuBarItem.types";
 
 function MenuBarItemView({
   href,
+  buttonOnClick,
   children,
   disabled,
   combinedStyles,
@@ -16,6 +17,19 @@ function MenuBarItemView({
     );
   }
 
+  if (buttonOnClick) {
+    return (
+      <button
+        type="button"
+        className={combinedStyles}
+        onClick={buttonOnClick}
+        {...accessibilityProps}
+      >
+        {children}
+      </button>
+    );
+  }
+
   return (
     <a href={href} className={combinedStyles} {...accessibilityProps}>
       {children}

app/components/navigation/TopNav/TopNav.container.tsx

@@ -2,6 +2,7 @@
 
 import { memo } from "react";
 import { usePathname, useRouter } from "next/navigation";
+import { useAuthModal } from "../../../contexts/AuthModalContext";
 import { useTranslation } from "../../../contexts/MessagesContext";
 import MenuBarItem from "../MenuBarItem";
 import Button from "../../buttons/Button";
@@ -21,6 +22,7 @@ const TopNavContainer = memo<TopNavProps>(
   ({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
     const pathname = usePathname();
     const router = useRouter();
+    const { openLogin } = useAuthModal();
     const t = useTranslation("header");
 
     // Schema markup for site navigation
@@ -139,7 +141,6 @@ const TopNavContainer = memo<TopNavProps>(
       const isSmallBreakpoint = size === "xsmall" || size === "home";
       const mode = folderTop && isSmallBreakpoint ? "inverse" : "default";
 
-      const href = loggedIn ? "/profile" : "/login";
       const label = loggedIn ? t("buttons.profile") : t("buttons.logIn");
       const ariaLabel = loggedIn
         ? t("ariaLabels.goToProfile")
@@ -148,9 +149,30 @@ const TopNavContainer = memo<TopNavProps>(
         (loggedIn && pathname === "/profile") ||
         (!loggedIn && pathname === "/login");
 
+      if (loggedIn) {
+        return (
+          <MenuBarItem
+            href="/profile"
+            size={sizeMap[size] || "Small"}
+            mode={mode}
+            state={navSelected ? "selected" : "default"}
+            ariaLabel={ariaLabel}
+          >
+            {label}
+          </MenuBarItem>
+        );
+      }
+
       return (
         <MenuBarItem
-          href={href}
+          buttonOnClick={() =>
+            openLogin({
+              variant: "default",
+              backdropVariant: "blurredYellow",
+              nextPath: pathname || "/",
+            })
+          }
+          href="/login"
           size={sizeMap[size] || "Small"}
           mode={mode}
           state={navSelected ? "selected" : "default"}