Move secondary menu items to "more" dropdown dynamically

openstreetmap · May 29, 2024 · 2c8b474 · 2c8b474
1 parent adc05e4
commit 2c8b474
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 22 deletions.
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
@@ -71,26 +71,49 @@ $(document).ready(function () {
   // See https://turbo.hotwired.dev/reference/drive#turbo.session.drive
   Turbo.session.drive = false;
 
-  var headerWidth = 0,
+  var $expandedSecondaryMenu = $("header nav.secondary > ul"),
+      $collapsedSecondaryMenu = $("#compact-secondary-nav > ul"),
+      secondaryMenuItems = [],
+      moreItemWidth = 0,
       breakpointWidth = 768;
 
   function updateHeader() {
     var windowWidth = $(window).width();
 
     if (windowWidth < breakpointWidth) {
       $("body").addClass("small-nav");
-      expandSecondaryMenu();
-    } else if (windowWidth < headerWidth) {
-      $("body").removeClass("small-nav");
-      collapseSecondaryMenu();
+      expandAllSecondaryMenuItems();
     } else {
       $("body").removeClass("small-nav");
-      expandSecondaryMenu();
+      var availableWidth = $expandedSecondaryMenu.width();
+      secondaryMenuItems.forEach(function (item) {
+        $(item[0]).remove();
+      });
+      var runningWidth = 0;
+      var i = 0;
+      for (; i < secondaryMenuItems.length; i++) {
+        runningWidth += secondaryMenuItems[i][1];
+        if (i < secondaryMenuItems.length - 1) {
+          if (runningWidth + moreItemWidth > availableWidth) break;
+        } else {
+          if (runningWidth > availableWidth) break;
+        }
+        expandSecondaryMenuItem($(secondaryMenuItems[i][0]));
+      }
+      for (; i < secondaryMenuItems.length; i++) {
+        collapseSecondaryMenuItem($(secondaryMenuItems[i][0]));
+      }
     }
   }
 
-  function expandSecondaryMenu() {
-    $("#compact-secondary-nav > ul").find("li")
+  function expandAllSecondaryMenuItems() {
+    secondaryMenuItems.forEach(function (item) {
+      expandSecondaryMenuItem($(item[0]));
+    });
+  }
+
+  function expandSecondaryMenuItem($item) {
+    $item
       .addClass("nav-item")
       .children("a")
         .removeClass("dropdown-item")
@@ -99,19 +122,25 @@ $(document).ready(function () {
           return $(this).hasClass("active") ? "text-secondary-emphasis" : "text-secondary"
         })
       .end()
-      .prependTo("header nav.secondary > ul");
-    $("#compact-secondary-nav").hide();
+      .insertBefore("#compact-secondary-nav");
+    toggleCompactSecondaryNav();
   }
 
-  function collapseSecondaryMenu() {
-    $("header nav.secondary > ul").find("li:not(#compact-secondary-nav)")
+  function collapseSecondaryMenuItem($item) {
+    $item
       .removeClass("nav-item")
       .children("a")
         .addClass("dropdown-item")
         .removeClass("nav-link text-secondary text-secondary-emphasis")
       .end()
-      .prependTo("#compact-secondary-nav > ul");
-    $("#compact-secondary-nav").show();
+      .appendTo($collapsedSecondaryMenu);
+    toggleCompactSecondaryNav();
+  }
+
+  function toggleCompactSecondaryNav() {
+    $("#compact-secondary-nav").toggle(
+      $collapsedSecondaryMenu.find("li").length > 0
+    );
   }
 
   /*
@@ -121,9 +150,10 @@ $(document).ready(function () {
    * to defer the measurement slightly as a workaround.
    */
   setTimeout(function () {
-    $("header").children(":visible").each(function (i, e) {
-      headerWidth = headerWidth + $(e).outerWidth();
+    $expandedSecondaryMenu.find("li:not(#compact-secondary-nav)").each(function () {
+      secondaryMenuItems.push([this, $(this).width()]);
     });
+    moreItemWidth = $("#compact-secondary-nav").width();
 
     $("header").removeClass("text-nowrap");
     $("header nav.secondary > ul").removeClass("flex-nowrap");

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
@@ -109,10 +109,6 @@ header {
     font-size: 14px;
   }
 
-  nav.primary {
-    margin-right: auto;
-  }
-
   .username {
     max-width: 12em;
   }
@@ -207,6 +203,10 @@ body.small-nav {
   nav.secondary {
     flex-direction: column;
 
+    > ul {
+      justify-content: unset !important;
+    }
+
     .user-menu, .login-menu {
       width: 100%;
     }

diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
@@ -31,8 +31,8 @@
       <%= link_to t("layouts.export"), export_path, :class => "btn btn-outline-primary geolink", :id => "export_tab" %>
     </div>
   </nav>
-  <nav class='secondary d-flex gap-2 align-items-center'>
-    <ul class='nav flex-nowrap'>
+  <nav class='secondary d-flex gap-2 flex-grow-1 align-items-center'>
+    <ul class='nav flex-grow-1 justify-content-end flex-nowrap'>
       <% if Settings.status != "database_offline" && can?(:index, Issue) %>
         <li class="nav-item">
           <%= link_to issues_path(:status => "open"), :class => header_nav_link_class(issues_path) do %>