From d7e28e79fe39b99d07be65c28e3a78bcb1b797e4 Mon Sep 17 00:00:00 2001
From: Daniel O'Connor <daniel.oconnor@gmail.com>
Date: Fri, 29 Aug 2025 16:22:55 +0000
Subject: [PATCH] Improve menu again

---
 app/assets/stylesheets/mobile.scss    | 20 ++++++++++++++++++--
 app/assets/stylesheets/overrides.scss |  1 +
 app/views/layouts/_header.html.haml   |  4 ++--
 app/views/layouts/_menu.haml          | 12 +++++++++---
 4 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/mobile.scss b/app/assets/stylesheets/mobile.scss
index ded5b4ab3..eb607a873 100644
--- a/app/assets/stylesheets/mobile.scss
+++ b/app/assets/stylesheets/mobile.scss
@@ -10,9 +10,25 @@
     width: 100%;
   }
 
-  .navbar .nav > li {
-    display: block;
+#navbarSupportedContent {
+  ul {
+    flex-direction: column-reverse;
+    flex-wrap: nowrap;
+
+    li.nav-item {
+      display: block;
+      a { 
+        display: grid;
+        grid-template-columns: 2em 1fr 2em;
+      }
+      a.dropdown-toggle::after {
+        width: 100%;
+        text-align: right;
+      }
+    }
   }
+}
+
 
   .navbar .navbar-form {
     padding-left: 0;
diff --git a/app/assets/stylesheets/overrides.scss b/app/assets/stylesheets/overrides.scss
index 116db6012..d18d3bc80 100755
--- a/app/assets/stylesheets/overrides.scss
+++ b/app/assets/stylesheets/overrides.scss
@@ -10,6 +10,7 @@ body {
 
 .navbar {
   flex-wrap: nowrap;
+  align-items: flex-start
 }
 .navbar-brand {
   .site-name {
diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml
index d4ad1e684..2af08e840 100644
--- a/app/views/layouts/_header.html.haml
+++ b/app/views/layouts/_header.html.haml
@@ -6,6 +6,6 @@
         %span.site-name Growstuff
   .nav= render 'crops/search_bar'
   .nav
-    %button.navbar-toggler{ "aria-controls" => "navbarSupportedContent", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-bs-target" => "#navbarSupportedContent", "data-bs-toggle" => "collapse", type: "button" }
-      %i.fas.fa-ellipsis-v.navbar-toggler-icon
+    %button.navbar-toggler.ml-auto{ "aria-controls" => "navbarSupportedContent", "aria-expanded" => "false", "aria-label" => "Toggle navigation", "data-bs-target" => "#navbarSupportedContent", "data-bs-toggle" => "collapse", type: "button" }
+      %span.navbar-toggler-icon
     = render 'layouts/menu'
diff --git a/app/views/layouts/_menu.haml b/app/views/layouts/_menu.haml
index 5908a8aa4..749db0261 100644
--- a/app/views/layouts/_menu.haml
+++ b/app/views/layouts/_menu.haml
@@ -30,7 +30,9 @@
 
     - cache("everyone-menu", expires_in: 1.week) do
       %li.nav-item.dropdown
-        %a.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-bs-toggle" => "dropdown", href: "#", role: "button"}= t('.crops')
+        %a.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-bs-toggle" => "dropdown", href: "#", role: "button"}
+          %span
+          = t('.crops')
         .dropdown-menu
           = link_to crops_path, class: 'dropdown-item' do
             = t('.browse_crops')
@@ -44,7 +46,9 @@
             = harvest_icon
             = t('.harvests')
       %li.nav-item.dropdown
-        %a.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-bs-toggle" => "dropdown", href: "#", role: "button"}= t('.community')
+        %a.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-bs-toggle" => "dropdown", href: "#", role: "button"}
+          %span
+          = t('.community')
         .dropdown-menu{"aria-labelledby" => "navbarDropdown"}
           = link_to t('.community_map'), places_path, class: 'dropdown-item'
           = link_to t('.browse_members'), members_path, class: 'dropdown-item'
@@ -54,7 +58,9 @@
     - if member_signed_in?
       - if current_member.role?(:crop_wrangler) || current_member.role?(:admin)
         %li.nav-item.dropdown
-          %a.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-bs-toggle" => "dropdown", href: "#", role: "button"}= t('.admin')
+          %a.nav-link.dropdown-toggle{"aria-expanded" => "false", "aria-haspopup" => "true", "data-bs-toggle" => "dropdown", href: "#", role: "button"}
+            %span
+            = t('.admin')
           .dropdown-menu{"aria-labelledby" => "navbarDropdown"}
             - if current_member.role?(:crop_wrangler)
               = link_to t('.crop_wrangling'), wrangle_crops_path, class: 'dropdown-item'