fix: standardize home layout menu UX

Author: rsdeus

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

@@ -3,7 +3,7 @@
     <%= render :metadata %>
     <%= cell "decidim/content_blocks/menu_breadcrumb_last_activity", model, hide_participatory_space: true %>
   </div>
-  <ul class="menu-bar__secondary-dropdown__menu">
+  <ul class="menu-bar__dropdown-menu">
     <%= render :links %>
   </ul>
 </div>

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__dropdown-menu" }
       )
     end
 

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

@@ -371,15 +371,34 @@ header {
       @apply absolute top-full left-0 bg-white rounded w-full bg-gray-5;
     }
 
+    &__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;
+
+      > * {
+        @apply py-3 md:py-3.5;
+      }
+
+      a {
+        @apply flex items-center justify-start gap-1 font-semibold text-lg text-white;
+
+        span {
+          @apply min-w-0 truncate;
+        }
+
+        svg {
+          @apply flex-none fill-current;
+        }
+      }
+    }
+
     &__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;
+      @apply bg-white flex flex-row rounded-b shadow-lg text-black w-full lg:w-[1280px] h-screen md:h-auto;
 
-      &__bottom,
-      &__top {
-        @apply flex flex-col md:flex-row justify-between p-4 md:p-8 gap-x-8;
+      &__left {
+        @apply flex flex-col justify-between p-4 md:p-8 space-y-5 hidden md:block md:w-3/4;
 
-        &-right {
-          @apply hidden md:block md:w-1/2;
+        &-top {
+          @apply border-b-4 border-gray-3 pb-3;
         }
       }
 
@@ -394,31 +413,6 @@ header {
       &__subtitle {
         @apply hidden text-md md:flex md:text-lg text-gray-2 mt-5;
       }
-
-      &__menu {
-        @apply w-full md:w-1/2 mt-0 grid md:grid-cols-2 gap-x-6 text-secondary;
-
-        > * {
-          @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;
-
-          span {
-            @apply min-w-0 truncate;
-          }
-
-          svg {
-            @apply flex-none fill-current;
-          }
-        }
-      }
     }
 
     &__secondary-dropdown {
@@ -432,26 +426,6 @@ header {
         @apply h4 md:h3;
       }
 
-      &__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;
-
-        > * {
-          @apply py-3 md:py-3.5;
-        }
-
-        a {
-          @apply flex items-center justify-start gap-1 font-semibold text-lg text-white;
-
-          span {
-            @apply min-w-0 truncate;
-          }
-
-          svg {
-            @apply flex-none fill-current;
-          }
-        }
-      }
-
       &__metadata {
         @apply flex items-center text-sm space-x-6 py-8;
 

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>