Sticky Fizzy nav

app/assets/stylesheets/header.css

@@ -13,7 +13,8 @@
       "menu menu menu"
       "actions-start title actions-end";
     max-inline-size: 100dvw;
-    padding: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--main-padding);
+    padding-block: calc(var(--block-space-half) + env(safe-area-inset-top) + 44px) var(--block-space-half);
+    padding-inline: var(--main-padding);
 
     /* Change the grid size depending on how many buttons are present */
     &:has(.header__actions > *:nth-child(1)) { --header-button-count: 1; }
@@ -78,4 +79,16 @@
       --left-offset: var(--inline-space);
     }
   }
+
+  .header__logo {
+    color: var(--color-ink);
+    inline-size: auto;
+    margin-block-start: 0.1em;
+
+    img {
+      block-size: auto;
+      inline-size: 1.15em;
+      margin-inline-end: 0.8ch;
+    }
+  }
 }

app/assets/stylesheets/nav.css

@@ -1,21 +1,17 @@
 @layer components {
-  .boxcar-header-logo {
-    color: var(--color-ink);
-    inline-size: auto;
-    margin-block-start: 0.1em;
-
-    img {
-      block-size: auto;
-      inline-size: 1.15em;
-      margin-inline-end: 0.8ch;
-    }
+  .nav {
+    inset-block-start: calc(var(--block-space-half) + env(safe-area-inset-top));
+    inset-inline-start: 50%;
+    position: fixed;
+    translate: -50%;
   }
 
-  .input:is(.boxcar-menu-trigger) {
-    --input-background: var(--color-canvas);
+  .nav__trigger {
+    --input-background: color-mix(in srgb, var(--color-canvas) 30%, transparent);
     --input-border-color: transparent;
     --input-padding: 0.3em 2em 0.3em 0.75em;
 
+    backdrop-filter: blur(20px);
     font-weight: 600;
     inline-size: auto;
     margin-block-start: 0.1em;
@@ -58,9 +54,10 @@
     }
   }
 
-  .boxcar-menu:is(.panel) {
+  .nav__menu.popup {
     --panel-border-color: var(--color-selected-dark);
     --panel-border-radius: 1.4em;
+    --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space);
     --panel-size: 45ch;
 
     align-items: stretch;
@@ -71,24 +68,15 @@
     flex-direction: column;
     gap: 2px;
     scrollbar-gutter: stable both-edges;
-
-    /* Safari doesn't position the sticky footer properly during the
-     * transition, so we need to delay the footer entrance. */
-    .popup__footer {
-      animation: safari-sticky-footer-hack 0s;
-      animation-delay: var(--dialog-duration);
-      animation-fill-mode: both;
-      inset-inline: var(--block-space);
-    }
   }
 
-  .boxcar-menu__close {
+  .nav__close {
     @media (any-hover: hover) {
       display: none;
     }
   }
 
-  .boxcar-menu__hotkeys {
+  .nav__hotkeys {
     --gap: 8px;
 
     align-items: center;
@@ -152,4 +140,28 @@
       }
     }
   }
+
+  /* Safari doesn't position the sticky footer properly during the
+   * transition, so we need to delay the footer entrance. */
+  .nav__footer {
+    animation: safari-sticky-footer-hack 0s;
+    animation-delay: var(--dialog-duration);
+    animation-fill-mode: both;
+    background-color: var(--color-canvas);
+    border-block-start: 1px solid var(--color-ink-lighter);
+    font-size: var(--text-small);
+    inset: auto 0 0;
+    inset-inline: var(--block-space);
+    line-height: 1.6;
+    margin-block-start: var(--block-space-half);
+    padding: 1.5ch;
+    position: sticky;
+    text-align: center;
+    z-index: 1;
+  }
+
+  @keyframes safari-sticky-footer-hack {
+    0% { position: absolute; }
+    100% { position: sticky; }
+  }
 }

app/assets/stylesheets/popup.css

@@ -59,10 +59,6 @@
       transform: translateX(0);
     }
 
-    &:has(.popup__footer) {
-      --panel-padding: var(--block-space) var(--block-space) 0 var(--block-space);
-    }
-
     form {
       display: contents;
     }
@@ -195,22 +191,4 @@
       --btn-border-color: var(--color-ink);
     }
   }
-
-  .popup__footer {
-    background-color: var(--color-canvas);
-    border-block-start: 1px solid var(--color-ink-lighter);
-    font-size: var(--text-small);
-    inset: auto 0 0;
-    line-height: 1.6;
-    margin-block-start: var(--block-space-half);
-    padding: 1.5ch;
-    position: sticky;
-    text-align: center;
-    z-index: 1;
-  }
-
-  @keyframes safari-sticky-footer-hack {
-    0% { position: absolute; }
-    100% { position: sticky; }
-  }
 }

app/assets/stylesheets/print.css

@@ -35,8 +35,8 @@
     print-color-adjust: exact;
   }
 
-  .boxcar-menu,
-  .boxcar-menu-trigger,
+  .nav__menu,
+  .nav__trigger,
   .header__actions {
     display: none;
   }

app/views/layouts/application.html.erb

@@ -5,7 +5,7 @@
   <body data-controller="local-time timezone-cookie turbo-navigation" data-action="turbo:morph@window->local-time#refreshAll turbo:before-visit@document->turbo-navigation#rememberLocation">
     <header class="header <%= @header_class %>" id="header">
       <a href="#main" class="header__skip-navigation btn" data-turbo="false">Skip to main content</a>
-      <%= render "my/menus/menu" if Current.user %>
+      <%= render "my/menus/nav" if Current.user %>
       <%= yield :header %>
     </header>
 

app/views/layouts/public.html.erb

@@ -6,7 +6,7 @@
     <header class="header" id="header">
       <a href="#main" class="header__skip-navigation btn" data-turbo="false">Skip to main content</a>
       <nav>
-        <%= link_to "https://fizzy.do", class: "boxcar-header-logo center flex-inline align-center txt-large" do %>
+        <%= link_to "https://fizzy.do", class: "header__logo center flex-inline align-center txt-large" do %>
           <%= image_tag "logo.png" %>
           <strong class="txt-large overflow-ellipsis margin-none">Fizzy</strong>
         <% end %>

app/views/my/menus/_button.html.erb

@@ -1,4 +1,4 @@
-<%= tag.button class:"boxcar-menu-trigger input input--select center flex-inline align-center txt-normal",
+<%= tag.button class:"nav__trigger input input--select center flex-inline align-center txt-normal",
       data: {
         action: "click->dialog#open:stop keydown.j@document->hotkey#click keydown.meta+j@document->hotkey#click keydown.ctrl+j@document->hotkey#click",
         controller: "hotkey" } do %>

app/views/my/menus/_footer.html.erb

@@ -1,3 +1,3 @@
-<footer class="popup__footer">
+<footer class="nav__footer">
   Fizzy&trade; is designed, built, and backed by <strong class="txt-nowrap"><%= icon_tag "37signals", class: "v-align-middle" %> <a href="https://37signals.com" target="_blank" class="txt-ink">37signals&trade;</a></strong>
 </footer>

app/views/my/menus/_hotkeys.html.erb

@@ -1,4 +1,4 @@
-<div class="boxcar-menu__hotkeys margin-block-end-half" role="list">
+<div class="nav__hotkeys margin-block-end-half" role="list">
   <%= filter_hotkey_link "Home", root_path, 1, "home" %>
   <%= filter_hotkey_link "New board", new_board_path, 2, "board-add" %>
   <%= filter_hotkey_link "Assigned to me", cards_path(assignee_ids: [Current.user.id]), 3, "clipboard" %>

app/views/my/menus/_nav.html.erb

@@ -1,7 +1,7 @@
-<nav data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" data-turbo-permanent>
+<nav class="nav" data-controller="dialog" data-action="keydown.esc->dialog#close click@document->dialog#closeOnClickOutside" data-turbo-permanent>
   <%= render "my/menus/button" %>
 
-  <%= tag.dialog class: "boxcar-menu filter popup panel margin-block-start-half", data: {
+  <%= tag.dialog class: "nav__menu filter popup panel margin-block-start-half", data: {
         action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset filter:changed->nav-section-expander#showWhileFiltering toggle->filter#filter",
         controller: "filter navigable-list nav-section-expander",
         dialog_target: "dialog",

app/views/my/menus/show.html.erb

@@ -2,7 +2,7 @@
   <div class="flex gap">
     <%= jump_field_tag %>
 
-    <button class="boxcar-menu__close btn borderless txt-small" data-action="dialog#close">
+    <button class="nav__close btn borderless txt-small" data-action="dialog#close">
       <%= icon_tag "close" %>
       <span class="for-screen-reader">Close menu</span>
     </button>