rework burger menu and general button menu look and behavior

Signed-off-by: Kai Wagner <[email protected]>

Author: ImTheKai

app/assets/stylesheets/components/navigation.css

@@ -47,6 +47,7 @@
   display: flex;
   align-items: center;
   gap: var(--spacing-3);
+  flex: 1 1 auto;
 }
 
 .brand-link {
@@ -156,9 +157,7 @@
 .mobile-nav-dropdown {
   display: none;
   position: relative;
-  margin-left: auto;
-  flex: 1 1 auto;
-  justify-content: flex-end;
+  margin-left: var(--spacing-2);
 }
 
 .mobile-nav-toggle {
@@ -177,6 +176,10 @@
   transition: background-color var(--transition-fast), transform var(--transition-fast);
 }
 
+.mobile-nav-label {
+  display: inline;
+}
+
 .mobile-nav-toggle::marker,
 .mobile-nav-toggle::-webkit-details-marker {
   display: none;
@@ -190,7 +193,7 @@
 .mobile-nav-menu {
   display: none;
   position: absolute;
-  right: 0;
+  left: 0;
   top: calc(100% + var(--spacing-3));
   background: var(--color-bg-card);
   border: var(--border-width) solid var(--color-border);
@@ -202,6 +205,8 @@
   z-index: 200;
   width: min(92vw, 360px);
   min-width: 240px;
+  max-width: calc(100vw - (var(--spacing-4) * 2));
+  box-sizing: border-box;
 }
 
 .mobile-nav-dropdown[open] .mobile-nav-menu {
@@ -230,6 +235,25 @@
     display: inline-flex;
   }
 
+  .nav-brand {
+    gap: var(--spacing-2);
+  }
+
+  .brand-link {
+    font-size: var(--font-size-lg);
+  }
+
+  .mobile-nav-toggle {
+    padding: var(--spacing-1) var(--spacing-2);
+    border: none;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .mobile-nav-label {
+    display: none;
+  }
+
   .mobile-nav-menu .nav-link {
     width: 100%;
     justify-content: space-between;
@@ -239,4 +263,15 @@
     display: block;
     padding: 0 var(--spacing-2);
   }
+
+  .mobile-nav-menu {
+    position: fixed;
+    left: var(--spacing-4);
+    right: var(--spacing-4);
+    top: calc(var(--nav-height) + var(--spacing-3));
+    width: auto;
+    max-width: none;
+    max-height: calc(100vh - var(--nav-height) - var(--spacing-6));
+    overflow-y: auto;
+  }
 }

app/assets/stylesheets/components/sidebar.css

@@ -34,12 +34,6 @@
   transform: scale(1.05);
 }
 
-@media (min-width: 901px) {
-  .sidebar-collapse-button {
-    display: none;
-  }
-}
-
 @media (max-width: 720px) {
   .layout-sidebar-resizer {
     width: 18px;

app/javascript/controllers/sidebar_controller.js

@@ -30,10 +30,6 @@ export default class extends Controller {
   }
 
   toggle() {
-    if (!this.isMobile()) {
-      return
-    }
-
     if (this.isCollapsed()) {
       this.expand()
     } else {
@@ -108,12 +104,6 @@ export default class extends Controller {
   }
 
   applyStoredState() {
-    if (!this.isMobile()) {
-      this.expand(false)
-      this.setSidebarWidth(this.clampWidth(this.readWidth()))
-      return
-    }
-
     const collapsed = window.localStorage.getItem(STORAGE_COLLAPSED_KEY) === "true"
     if (collapsed) {
       this.collapse(false)

app/views/layouts/application.html.slim

@@ -36,37 +36,39 @@ html data-theme="light"
     nav.main-navigation
       .nav-container
         .nav-brand
+          - if content_for?(:sidebar)
+            button.nav-burger type="button" aria-label="Toggle sidebar" data-action="click->sidebar#toggleMobile"
+              i.fa-solid.fa-bars
           = link_to root_path, class: "brand-link" do
             img.brand-icon src="/icon.png" alt="Hackorum" width="24" height="24"
             span.brand-text Hackorum
+          details.mobile-nav-dropdown
+            summary.mobile-nav-toggle aria-label="Open menu"
+              span.mobile-nav-label Menu
+              i.fa-solid.fa-caret-down
+            .mobile-nav-menu data-action="click->sidebar#closeMenuOnNavigate"
+              = link_to "Topics", topics_path, class: "nav-link"
+              = link_to "Search", topics_path(anchor: "search"), class: "nav-link"
+              = link_to "Statistics", stats_path, class: "nav-link"
+              = link_to "Reports", reports_path, class: "nav-link"
+              = link_to "Help", help_index_path, class: "nav-link"
+              button.nav-link.theme-toggle type="button" aria-label="Toggle theme" data-controller="theme" data-action="click->theme#toggle"
+                i.fas.fa-moon data-theme-target="icon"
+                span data-theme-target="label" Theme
+              - if user_signed_in?
+                - if current_user&.person&.default_alias
+                  span.nav-user = current_user.person.default_alias.name
+                - unread = activity_unread_count
+                = link_to activities_path, class: "nav-link nav-link-activity", title: "Activity" do
+                  i.fa-regular.fa-bell
+                  - if unread.positive?
+                    span.nav-badge = unread
+                = link_to "Settings", settings_root_path, class: "nav-link"
+                = button_to "Sign out", session_path, method: :delete, class: "nav-link", form: { style: 'display:inline' }, data: { turbo: false }
+              - else
+                = link_to "Sign in", new_session_path, class: "nav-link"
+                = link_to "Register", new_registration_path, class: "nav-link"
           span.tagline PostgreSQL Hackers Archive
-        - if content_for?(:sidebar)
-          button.nav-burger type="button" aria-label="Toggle sidebar" data-action="click->sidebar#toggleMobile"
-            i.fa-solid.fa-bars
-        details.mobile-nav-dropdown
-          summary.mobile-nav-toggle Menu
-          .mobile-nav-menu data-action="click->sidebar#closeMenuOnNavigate"
-            = link_to "Topics", topics_path, class: "nav-link"
-            = link_to "Search", topics_path(anchor: "search"), class: "nav-link"
-            = link_to "Statistics", stats_path, class: "nav-link"
-            = link_to "Reports", reports_path, class: "nav-link"
-            = link_to "Help", help_index_path, class: "nav-link"
-            button.nav-link.theme-toggle type="button" aria-label="Toggle theme" data-controller="theme" data-action="click->theme#toggle"
-              i.fas.fa-moon data-theme-target="icon"
-              span data-theme-target="label" Theme
-            - if user_signed_in?
-              - if current_user&.person&.default_alias
-                span.nav-user = current_user.person.default_alias.name
-              - unread = activity_unread_count
-              = link_to activities_path, class: "nav-link nav-link-activity", title: "Activity" do
-                i.fa-regular.fa-bell
-                - if unread.positive?
-                  span.nav-badge = unread
-              = link_to "Settings", settings_root_path, class: "nav-link"
-              = button_to "Sign out", session_path, method: :delete, class: "nav-link", form: { style: 'display:inline' }, data: { turbo: false }
-            - else
-              = link_to "Sign in", new_session_path, class: "nav-link"
-              = link_to "Register", new_registration_path, class: "nav-link"
         .nav-links
           = link_to "Topics", topics_path, class: "nav-link"
           - search_link = content_for?(:search_sidebar) ? "#search" : topics_path(anchor: "search")