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

@@ -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 {

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;

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 %>