From e2d680947a7f6d0dd049144c7a657a225047bcea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Javi=20Mart=C3=ADn?= <javim@elretirao.net>
Date: Fri, 27 Aug 2021 23:38:45 +0200
Subject: [PATCH] Add separator in small screen navigation

The "Sign in" or "My account" links and the main navigation are
different elements, and they're in different places on medium and large
screens. Now we're also separating them on small screens.

Since the `.vertical` class in the menu added quite a few styles and it
was difficult to overwrite them, we're simply removing this class from
this element. This way we're also removing the huge space between the
menu button and the first element of the navigation.
---
 app/assets/stylesheets/admin.scss            | 12 ++++++------
 app/assets/stylesheets/layout.scss           | 11 +++++++++++
 app/views/shared/_admin_login_items.html.erb |  2 +-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index edc06f283..8d08bd725 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -81,14 +81,14 @@ $table-header:   #ecf1f6;
 
       .top-bar-right {
 
-        .submenu {
-          border: 0;
-          margin-top: 0;
-          position: initial;
+        > ul {
+          border-bottom: 0;
+          padding-bottom: 0;
+          margin-bottom: 0;
         }
 
-        .is-submenu-item {
-          padding: $line-height / 2 0;
+        .submenu {
+          position: initial;
         }
 
         a {
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 0ae638abb..514181d09 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -610,6 +610,17 @@ body > header,
 
   .menu {
 
+    @include breakpoint(small only) {
+      border-bottom: 1px solid $border;
+      margin-bottom: $line-height;
+      margin-top: $line-height / 2;
+      padding-bottom: $line-height;
+
+      .submenu {
+        margin-top: 0;
+      }
+    }
+
     &.is-dropdown-submenu {
       background: $body-background;
       color: $text;
diff --git a/app/views/shared/_admin_login_items.html.erb b/app/views/shared/_admin_login_items.html.erb
index b79be6cf4..99b03c5cf 100644
--- a/app/views/shared/_admin_login_items.html.erb
+++ b/app/views/shared/_admin_login_items.html.erb
@@ -1,7 +1,7 @@
 <% if show_admin_menu?(current_user) %>
   <li class="has-submenu">
     <%= link_to t("layouts.header.administration_menu"), "#", rel: "nofollow", class: "hide-for-small-only" %>
-    <ul class="submenu menu vertical" data-submenu>
+    <ul class="submenu menu" data-submenu>
       <% if current_user.administrator? %>
         <li>
           <%= link_to t("layouts.header.administration"), admin_root_path %>