fix: mobile top-right menu UX

Author: rsdeus

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

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

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

@@ -404,6 +404,35 @@ header {
         }
       }
 
+      &__top {
+        @apply w-full px-4;
+
+        &-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;
+            }
+          }
+        }
+      }
+
       &__bottom {
         @apply hidden md:flex;
       }