Merge pull request #1776 from basecamp/fizzy-menu-ui-updates

Add dividers and move icon to left

app/assets/stylesheets/nav.css

@@ -102,6 +102,19 @@
     }
   }
 
+  .nav__section {
+    border-block-end: 1px solid var(--color-ink-lighter);
+    font-size: var(--text-small);
+
+    &:first-of-type {
+      border-block-start: 1px solid var(--color-ink-lighter);
+    }
+
+    &[open] {
+      padding-block-end: 0.4rem;
+    }
+  }
+
   .nav__header {
     --actions-width: 2rem;
 
@@ -207,7 +220,6 @@
 
   .nav__footer {
     background-color: var(--color-canvas);
-    border-block-start: 1px solid var(--color-ink-lighter);
     font-size: var(--text-small);
     line-height: 1.6;
     margin-block-start: calc(-1 * var(--nav-section-gap));

app/assets/stylesheets/popup.css

@@ -5,7 +5,7 @@
     --panel-padding: var(--block-space);
     --panel-size: auto;
     --popup-icon-size: 24px;
-    --popup-item-padding-inline: 0.5rem;
+    --popup-item-padding-inline: 0.4rem;
     --popup-display: flex;
 
     inset: 0 auto auto 50%;
@@ -53,10 +53,10 @@
   .popup__section-title {
     background: var(--color-canvas);
     font-size: var(--text-small);
-    font-weight: bold;
+    font-weight: 600;
     inset-block-start: 0;
     list-style: none;
-    padding: var(--block-space-half) var(--inline-space-half);
+    padding: 0.75ch var(--inline-space-half);
     position: sticky;
     text-transform: uppercase;
     z-index: 1;
@@ -65,8 +65,6 @@
       align-items: center;
       cursor: pointer;
       display: flex;
-      gap: 2ch;
-      justify-content: space-between;
     }
 
     &::-webkit-details-marker {
@@ -74,8 +72,11 @@
     }
 
     .icon--caret-down {
-      opacity: 0.66;
+      font-size: 1ch;
+      inset: 50% auto auto 0;
+      position: absolute;
       transition: rotate 150ms ease-out;
+      translate: -100% -50%;
     }
 
     .popup__section:not([open]) & {

app/helpers/filters_helper.rb

@@ -41,10 +41,10 @@ module FiltersHelper
   end
 
   def collapsible_nav_section(title, **properties, &block)
-    tag.details class: "popup__section", data: { action: "toggle->nav-section-expander#toggle", nav_section_expander_target: "section", nav_section_expander_key_value: title.parameterize }, open: true, **properties do
+    tag.details class: "nav__section popup__section", data: { action: "toggle->nav-section-expander#toggle", nav_section_expander_target: "section", nav_section_expander_key_value: title.parameterize }, open: true, **properties do
       concat(tag.summary(class: "popup__section-title") do
-        concat title
         concat icon_tag "caret-down"
+        concat title
       end)
       concat(tag.ul(class: "popup__list") do
         capture(&block)