Improve the menu on mobile (#10386)

* Improve the menu on mobile

* Use a grid to render two rows with three columns.

* Update snapshot

themes-default/slim/src/components/app-header.vue

@@ -12,7 +12,7 @@
                 <app-link class="navbar-brand" href="home/" title="Medusa"><img alt="Medusa" src="images/medusa.png" style="height: 50px;" class="img-responsive pull-left"></app-link>
             </div>
             <div v-if="isAuthenticated" class="collapse navbar-collapse" id="main_nav">
-                <ul class="nav navbar-nav navbar-right">
+                <ul class="nav navbar-nav navbar-right navbar-mobile">
                     <li id="NAVhome" class="navbar-split dropdown" :class="{ active: topMenu === 'home' }">
                         <app-link class="dropdown-toggle" aria-haspopup="true" data-toggle="dropdown" data-hover="dropdown"><span>Shows</span>
                             <b class="caret" />
@@ -320,4 +320,27 @@ export default {
     text-decoration: none;
     color: white;
 }
+
+@media (max-width: 767px) {
+    .navbar-fixed-top .navbar-collapse {
+        max-height: 100%;
+    }
+
+    .navbar-mobile > li {
+        text-align: center;
+    }
+
+    .navbar-mobile::before {
+        position: absolute;
+    }
+
+    .navbar-mobile {
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    .navbar-mobile #NAVsystem > ul {
+        transform: translateX(-6rem);
+    }
+}
 </style>

themes-default/slim/test/specs/__snapshots__/app-header.spec.js.snap

@@ -62,7 +62,7 @@ exports[`AppHeader.test.js renders 1`] = `
       id="main_nav"
     >
       <ul
-        class="nav navbar-nav navbar-right"
+        class="nav navbar-nav navbar-right navbar-mobile"
       >
         <li
           class="navbar-split dropdown active"