Left menu is responsive

src/header.pug

@@ -24,6 +24,9 @@ details#user-controls
   #user-controls__panel
     include page-user-panel.pug
 
+.mobile-menu-icon
+  button.icon-menu
+
 button(role='log in' onclick="document.querySelector('sib-auth').login();") Login
 
 sib-auth

src/styles/abstracts/_mixins.scss

@@ -1,4 +1,58 @@
 @mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) {
   box-shadow: 0 0 8px 0 $shadow;
   background-color: $background;
-}
+}
+
+@mixin breakpoint($min: 0, $max: 0) {
+  $type: type-of($min);
+
+  @if $type==string {
+    @if $min==xs {
+      @media (max-width: 768px) {
+        @content;
+      }
+    }
+
+    @else if $min==sm {
+      @media (max-width: 1024px) {
+        @content;
+      }
+    }
+
+    @else if $min==md {
+      @media (max-width: 1200px) {
+        @content;
+      }
+    }
+
+    @else if $min==lg {
+      @media (min-width: 1201px) {
+        @content;
+      }
+    }
+
+    @else {
+      @warn "Beware ! Breakpoints mixin supports xs, sm, md, lg";
+    }
+  }
+
+  @else if $type==number {
+    $query: "all" !default;
+
+    @if $min !=0 and $max !=0 {
+      $query: "(min-width: #{$min}) and (max-width: #{$max})";
+    }
+
+    @else if $min !=0 and $max==0 {
+      $query: "(min-width: #{$min})";
+    }
+
+    @else if $min==0 and $max !=0 {
+      $query: "(max-width: #{$max});"
+    }
+
+    @media #{$query} {
+      @content;
+    }
+  }
+}

src/styles/base/header.scss

@@ -168,6 +168,10 @@
           &::before {
             margin-left: 1.5rem;
           }
+
+          @include breakpoint(sm) {
+            display: none;
+          }
         }
       }
     }
@@ -236,5 +240,13 @@
       }
     }
   }
+
+  .mobile-menu-icon {
+    display: none;
+
+    @include breakpoint(sm) {
+      display: block;
+    }
+  }
 }
 

src/styles/base/menu-left.scss

@@ -188,4 +188,21 @@
       background-color: $color-213-13-86;
     }
   }
+
+  &.mobile-opened {
+    @include breakpoint(sm) {
+      bottom: 0;
+      min-width: 80%;
+      position: fixed;
+      right: 0;
+      top: 0;
+      z-index: 1;
+    }
+  }
+
+  &.mobile-closed {
+    @include breakpoint(sm) {
+      display: none;
+    }
+  }
 }