Implement responsive navigation design

Author: rosslovas

src/assets/icons/bars.svg

@@ -33,6 +33,8 @@ type Props = HTMLAttributes<'details'> & {
   align?: 'start' | 'end';
   density?: 'default' | 'compact';
   width?: string;
+  // Render inline rather than as a popup
+  inline?: boolean;
 };
 
 const {
@@ -41,6 +43,7 @@ const {
   align = 'start',
   density = 'default',
   width,
+  inline = false,
   class: className,
   ...rest
 } = Astro.props satisfies Props;
@@ -73,10 +76,11 @@ const iconDetails = (name: string | undefined) => {
     'menu',
     `menu--${align}`,
     density === 'compact' && 'menu--compact',
+    inline && 'menu--inline',
     className,
   ]}
-  style={width ? `--menu-width: ${width}` : undefined}
-  data-menu
+  style={width && !inline ? `--menu-width: ${width}` : undefined}
+  data-menu={inline ? undefined : ''}
   {...rest}
 >
   <slot name="trigger" />
@@ -351,4 +355,24 @@ const iconDetails = (name: string | undefined) => {
   img.menu__icon {
     object-fit: contain;
   }
+
+  .menu--inline .menu__list {
+    position: static;
+    position-area: none;
+    width: auto;
+    min-width: 0;
+    max-width: none;
+    margin: 0;
+    padding: 0;
+    background: none;
+    border-radius: 0;
+    box-shadow: none;
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
+
+  .menu--inline:not([open])::details-content {
+    transition: none;
+  }
 </style>

src/assets/icons/close.svg

@@ -8,6 +8,7 @@ type Props = HTMLAttributes<'div'> & {
   controlCenterHref?: string;
   profileHref?: string;
   signOutHref?: string;
+  inline?: boolean;
 };
 
 const {
@@ -18,6 +19,8 @@ const {
   // Arbitrary subpaths of /docs are blocked on the server side, returning to /docs is the best we can do
   signOutHref = 'https://octopus.com/signout?ReturnUrl=/docs',
 
+  inline = false,
+
   class: className,
   ...rest
 } = Astro.props satisfies Props;
@@ -30,32 +33,63 @@ const leaving = {
 };
 
 const items: MenuItem[] = [
-  {
-    // Details start out empty, signed-in-user.ts fills things in through Menu's hooks
-    kind: 'detail',
-    label: '',
-    description: '',
-    data: { 'data-user-details': '' },
-  },
+  // Omit name/email when inline, as they're used as the row you press to expand the menu
+  ...(inline
+    ? []
+    : [
+        {
+          // Details start out empty, signed-in-user.ts fills things in through Menu's hooks
+          kind: 'detail' as const,
+          label: '',
+          description: '',
+          data: { 'data-user-details': '' },
+        },
+      ]),
   { label: 'Control Center', href: controlCenterHref, ...leaving },
   { label: 'Profile', href: profileHref, ...leaving },
-  { kind: 'divider' },
+  ...(inline ? [] : [{ kind: 'divider' as const }]),
   { label: 'Sign out', href: signOutHref },
 ];
 ---
 
-<div class:list={['profile-menu', className]} {...rest}>
-  <Menu label={label} items={items} align="end" width="16rem">
-    <summary
-      slot="trigger"
-      class="profile-menu__trigger"
-      aria-label={label}
-      aria-haspopup="menu"
-    >
-      <Avatar size="medium" shape="circle" alt="" data-user-avatar>
-        <span data-user-initials></span>
-      </Avatar>
-    </summary>
+<div
+  class:list={['profile-menu', inline && 'profile-menu--inline', className]}
+  {...rest}
+>
+  <Menu
+    label={label}
+    items={items}
+    align="end"
+    width="16rem"
+    inline={inline}
+    density={inline ? 'compact' : 'default'}
+  >
+    {
+      inline ? (
+        <summary
+          slot="trigger"
+          class="profile-menu__row"
+          aria-haspopup="menu"
+          data-user-details
+        >
+          <span class="profile-menu__labels">
+            <span class="profile-menu__name" data-menu-label />
+            <span class="profile-menu__email" data-menu-description />
+          </span>
+        </summary>
+      ) : (
+        <summary
+          slot="trigger"
+          class="profile-menu__trigger"
+          aria-label={label}
+          aria-haspopup="menu"
+        >
+          <Avatar size="medium" shape="circle" alt="" data-user-avatar>
+            <span data-user-initials />
+          </Avatar>
+        </summary>
+      )
+    }
   </Menu>
 </div>
 
@@ -93,4 +127,67 @@ const items: MenuItem[] = [
     background-color: currentColor;
     mask: url('../assets/icons/external-link.svg') center / 80% no-repeat;
   }
+
+  .profile-menu--inline {
+    display: block;
+  }
+
+  .profile-menu__row {
+    display: flex;
+    align-items: center;
+    gap: var(--space8);
+    padding-block: var(--space6);
+    list-style: none;
+    color: var(--colorTextPrimary);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .profile-menu__row::-webkit-details-marker {
+    display: none;
+  }
+
+  .profile-menu__row:focus-visible {
+    outline: var(--borderWidth2) solid var(--colorBorderSelected);
+    outline-offset: var(--borderWidth2);
+  }
+
+  .profile-menu__labels {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+    color: var(--colorTextPrimary);
+    text-decoration: none;
+  }
+
+  .profile-menu__name {
+    font: var(--textBodyRegularLarge);
+    overflow-wrap: anywhere;
+  }
+
+  .profile-menu__email {
+    color: var(--colorTextSecondary);
+    font: var(--textBodyRegularSmall);
+    overflow-wrap: anywhere;
+  }
+
+  .profile-menu__row::after {
+    content: '';
+    flex: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    background-color: var(--colorIconTertiary);
+    mask: url('../assets/icons/chevron-right.svg') center / contain no-repeat;
+  }
+
+  :global([open]) > .profile-menu__row::after {
+    mask-image: url('../assets/icons/chevron-down.svg');
+  }
+
+  .profile-menu--inline :global(.menu__item) {
+    padding-inline: 0;
+    padding-block: var(--space6);
+    font: var(--textBodyRegularLarge);
+  }
 </style>