merge main routes in dropdown for smartphones

src/assets/scss/abstracts/_variables.scss

@@ -52,6 +52,7 @@ $yiq-contrasted-threshold: 120;
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
+  tb: 768px,
   md: 1024px,
   lg: 1200px,
   xl: 1440px,

src/assets/scss/base/_bootstrap-overrides.scss

@@ -6,14 +6,14 @@ legend {
   border: 0;
   padding: 0;
   margin-left: -#{$header-spacer-sm};
-  margin-top: 5px;
+  margin-top: 10px;
 
   .dropdown-item {
     font-size: $font-size-sm;
     padding: .25rem $header-spacer-sm;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(tb) {
     margin-left: -#{$header-spacer};
 
     .dropdown-item {

src/pages/_partials/MainHeader.vue

@@ -10,6 +10,13 @@
             <span class="sr-only">Menu</span>
           </template>
 
+          <b-dropdown-item
+            v-for="link in mainRoutes" :key="link.to"
+            :to="link.to" class="d-tb-none" :class="'dropdown-item-' + link.variant"
+          >
+            {{ $t('sections.' + link.to) }}
+          </b-dropdown-item>
+
           <b-dropdown-item v-for="name in subRoutes" :key="name" :to="{ name }">
             {{ $t('sections.' + name) }}
           </b-dropdown-item>
@@ -20,7 +27,7 @@
         </b-navbar-brand>
       </div>
 
-      <nav class="nav-list">
+      <nav class="nav-list d-none d-tb-block">
         <ul>
           <li v-for="link in mainRoutes" :key="link.to">
             <b-button :to="link.to" :active="$route.name === link.to" :variant="link.variant">
@@ -68,21 +75,38 @@ export default {
     justify-content: stretch;
   }
 
-  @include media-breakpoint-up(sm) {
+  @include media-breakpoint-up(tb) {
     height: $header-height;
     padding: 0 $header-spacer;
   }
 
-  ::v-deep .dropdown-toggle {
-    padding: 0;
-    border: 0;
-    line-height: 1;
-    padding: 0 .5rem;
-    margin-left: -.5rem;
+  ::v-deep {
+    .dropdown-toggle {
+      padding: 0;
+      border: 0;
+      line-height: 1;
+      padding: 0 .5rem;
+      margin-left: -.5rem;
 
-    @include media-breakpoint-up(sm) {
-      padding: 0 .75rem;
-      margin-left: -.75rem;
+      @include media-breakpoint-up(tb) {
+        padding: 0 .75rem;
+        margin-left: -.75rem;
+      }
+    }
+
+    .dropdown-menu {
+      @include media-breakpoint-down(sm) {
+        width: 100vw;
+      }
+
+      @each $variant in 'dark', 'kit', 'creation' {
+        .dropdown-item-#{$variant} {
+          background-color: theme-color($variant);
+          a:not(:hover):not(:focus) {
+            color: if($variant == 'dark', $white, $black);
+          }
+        }
+      }
     }
   }
 
@@ -97,7 +121,7 @@ export default {
       stroke-linecap: round;
     }
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(tb) {
       width: 16px;
       height: 16px;
 
@@ -110,10 +134,6 @@ export default {
   &-brand {
     display: flex;
 
-    @include media-breakpoint-down(xs) {
-      padding-bottom: $header-spacer-sm;
-    }
-
     .navbar-brand {
       font-size: inherit;
       font-weight: $font-weight-bold;
@@ -121,7 +141,7 @@ export default {
       line-height: 1;
       padding: 0;
 
-      @include media-breakpoint-up(sm) {
+      @include media-breakpoint-up(tb) {
         font-size: 1.3125rem;
       }
     }
@@ -177,7 +197,7 @@ export default {
   .btn {
     font-size: inherit;
 
-    @include media-breakpoint-up(sm) {
+    @include media-breakpoint-up(tb) {
       font-size: 1rem;
     }
   }