Fix standardize home layout menu UX

.erb_lint.yml

@@ -1859,7 +1859,6 @@ linters:
           - tech-info
           - tech-info--text-left
           - text-compact
-          - text-ellipsis
           - text-highlight
           - text-info
           - text-justify

decidim-core/app/cells/decidim/participatory_space_dropdown_metadata/metadata.erb

@@ -1,9 +1,9 @@
 <h4 class="menu-bar__secondary-dropdown__title"><%= title %></h4>
-<div class="menu-bar__secondary-dropdown__metadata">
-  <% if hashtag.present? %>
+<% if hashtag.present? %>
+  <div class="menu-bar__secondary-dropdown__metadata">
     <span>
       <%= icon "twitter-x-line", class: "text-gray fill-current" %>
       <%= link_to "##{hashtag}", twitter_hashtag_url(hashtag), target: "_blank", class: "text-secondary underline" %>
     </span>
-  <% end %>
-</div>
+  </div>
+<% end %>

decidim-core/app/helpers/decidim/menu_helper.rb

@@ -39,15 +39,15 @@ def breadcrumb_root_menu
       @breadcrumb_root_menu ||= ::Decidim::BreadcrumbRootMenuPresenter.new(
         :menu,
         self,
-        container_options: { class: "menu-bar__main-dropdown__menu" }
+        container_options: { class: "menu-bar__dropdown-menu" }
       )
     end
 
     def mobile_breadcrumb_root_menu
       @mobile_breadcrumb_root_menu ||= ::Decidim::BreadcrumbRootMenuPresenter.new(
         :mobile_menu,
         self,
-        container_options: { class: "menu-bar__main-dropdown__menu" }
+        container_options: { class: "menu-bar__main-dropdown__top-menu" }
       )
     end
 

decidim-core/app/packs/stylesheets/decidim/_header.scss

@@ -346,10 +346,6 @@ header {
       &__dropdown-trigger {
         @apply flex items-center justify-between text-white;
 
-        span {
-          @apply flex flex-wrap md:flex-nowrap gap-x-2.5 overflow-hidden text-white;
-        }
-
         svg {
           @apply w-6 h-6 fill-current;
         }
@@ -385,54 +381,77 @@ header {
       @apply absolute top-full left-0 bg-white rounded w-full bg-gray-5;
     }
 
-    &__main-dropdown {
-      @apply bg-white divide-y divide-gray-3 rounded-b shadow-lg text-black w-full lg:w-[1280px] h-screen md:h-auto;
+    &__dropdown-menu {
+      @apply w-full md:w-1/4 bg-primary px-4 md:px-8 pt-0 pb-3 md:py-3 divide-y divide-gray-3 text-white;
 
-      &__bottom,
-      &__top {
-        @apply flex flex-col md:flex-row justify-between p-4 md:p-8 gap-x-8;
+      > * {
+        @apply py-3 md:py-3.5;
+      }
 
-        &-right {
-          @apply hidden md:block md:w-1/2;
+      a {
+        @apply flex items-center justify-start gap-1 font-semibold text-lg text-white;
+
+        span {
+          @apply min-w-0 truncate;
         }
-      }
 
-      &__bottom {
-        @apply hidden md:flex;
+        svg {
+          @apply flex-none fill-current;
+        }
       }
+    }
 
-      &__title {
-        @apply hidden h4 md:flex md:h3;
-      }
+    &__main-dropdown {
+      @apply bg-white flex flex-row rounded-b shadow-lg text-black w-full lg:w-[1280px] h-screen md:h-auto;
 
-      &__subtitle {
-        @apply hidden text-md md:flex md:text-lg text-gray-2 mt-5;
+      &__left {
+        @apply flex flex-col justify-between p-4 md:p-8 space-y-5 hidden md:block md:w-3/4;
+
+        &-top {
+          @apply border-b-4 border-gray-3 pb-3;
+        }
       }
 
-      &__menu {
-        @apply w-full md:w-1/2 mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;
+      &__top {
+        @apply w-full px-4;
 
-        > * {
-          @apply py-3 md:py-3.5 border-b last:border-0 border-gray-3;
+        &-menu {
+          @apply w-full md:w-1/2 mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;
 
-          /* since the grid has 2 columns, remove the border for these last 2 columns */
-          &:nth-last-child(-n + 2) {
-            @apply md:border-0;
+          > * {
+            @apply py-3 md:py-3.5 border-b last:border-0 border-gray-3;
+
+            /* since the grid has 2 columns, remove the border for these last 2 columns */
+            &:nth-last-child(-n + 2) {
+              @apply md:border-0;
+            }
           }
-        }
 
-        a {
-          @apply flex items-center justify-start gap-1 font-semibold text-lg text-secondary;
+          a {
+            @apply flex items-center justify-start gap-1 font-semibold text-lg text-secondary;
 
-          span {
-            @apply min-w-0 truncate;
-          }
+            span {
+              @apply min-w-0 truncate;
+            }
 
-          svg {
-            @apply flex-none fill-current;
+            svg {
+              @apply flex-none fill-current;
+            }
           }
         }
       }
+
+      &__bottom {
+        @apply hidden md:flex;
+      }
+
+      &__title {
+        @apply hidden h4 md:flex md:h3;
+      }
+
+      &__subtitle {
+        @apply hidden text-md md:flex md:text-lg text-gray-2 mt-5;
+      }
     }
 
     &__secondary-dropdown {
@@ -471,7 +490,7 @@ header {
       }
 
       &__metadata {
-        @apply flex items-center text-sm space-x-6 py-8;
+        @apply flex items-center text-sm space-x-6 pb-6;
 
         > span {
           @apply flex items-center space-x-2;

decidim-core/app/views/layouts/decidim/header/_menu_breadcrumb_main_dropdown_desktop.html.erb

@@ -1,16 +1,10 @@
 <div id="<%= id %>" class="menu-bar__main-dropdown">
-  <div class="menu-bar__main-dropdown__top">
-    <div class="menu-bar__main-dropdown__top-left">
+  <div class="menu-bar__main-dropdown__left">
+    <div class="menu-bar__main-dropdown__left-top">
       <%= render partial: "layouts/decidim/header/menu_breadcrumb_main_dropdown_top_left" %>
     </div>
-    <%= breadcrumb_root_menu.render %>
-  </div>
-  <div class="menu-bar__main-dropdown__bottom">
-    <div class="menu-bar__main-dropdown__bottom-left">
-      <%= cell("decidim/highlighted_participatory_process", menu_highlighted_participatory_process) %>
-    </div>
-    <div class="menu-bar__main-dropdown__bottom-right">
-      <%= cell "decidim/content_blocks/menu_breadcrumb_last_activity", current_organization %>
-    </div>
+    <%= cell("decidim/highlighted_participatory_process", menu_highlighted_participatory_process) %>
+    <%= cell "decidim/content_blocks/menu_breadcrumb_last_activity", current_organization %>
   </div>
+  <%= breadcrumb_root_menu.render %>
 </div>

decidim-core/app/views/layouts/decidim/header/_menu_breadcrumb_mobile_tablet.html.erb

@@ -1,12 +1,12 @@
 <% dropdown_item = breadcrumb_items.select { |item| item[:dropdown_cell].present? }.last %>
 <div class="menu-bar__breadcrumb-mobile__dropdown-trigger">
-  <span>
-    <% breadcrumb_items.last(2).each_with_index do |item, i| %>
-      <% item_label = decidim_escape_translated(item[:label]).html_safe %>
-      <% if i.positive? %>
+  <span class="inline-block w-full overflow-hidden text-ellipsis align-middle">
+    <% breadcrumb_items.last(2).each_with_index do |item, idx| %>
+      <% item_label = decidim_escape_translated(item[:label]) %>
+      <% if idx.positive? %>
         <span>/</span>
       <% end %>
-      <span class="cursor-pointer <%= "truncate" if i.positive? %>" <%== 'aria-current="page"' if item[:active] %>>
+      <span class="cursor-pointer truncate" <%== 'aria-current="page"' if item[:active] %>>
         <% if item[:url].present? && !is_active_link?(item[:url], :exclusive) %>
           <%= link_to(item_label, item[:url]) %>
         <% else %>

decidim-initiatives/spec/system/initiative_types_spec.rb

@@ -76,7 +76,7 @@
             visit decidim_initiatives.initiatives_path
 
             find_by_id("main-dropdown-summary").hover
-            within ".menu-bar__main-dropdown__menu" do
+            within ".menu-bar__dropdown-menu" do
               expect(page).to have_content("Initiatives")
               click_on "Initiatives"
             end