Create flow: session UI + sign out

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}