Допилил бургер и off-canvas

.yaspellerrc

@@ -41,6 +41,7 @@
     "com",
     "ru",
     "svg",
+    "SVG",
     "tbody",
     "tfoot",
     "thead",

src/blocks-demo.html

@@ -35,9 +35,7 @@
 <div class="off-canvas" id="off-canvas">
 
   <div class="off-canvas__aside">
-    1111
-    <br>
-    222
+    <ul class="menu" id="off-canvas-menu"></ul>
   </div>
 
   <div class="components-demo  blocks-library  off-canvas__page-content">
@@ -280,7 +278,7 @@
 
     <section class="blocks-library__item" id="sprite-svg" data-name=".sprite-svg">
 
-      <h2 class="blocks-library__item-title">svg-спрайт c <a href="https://github.com/w0rm/gulp-svgstore">gulp-svgstore</a></h2>
+      <h2 class="blocks-library__item-title">SVG-спрайт c <a href="https://github.com/w0rm/gulp-svgstore">gulp-svgstore</a></h2>
 
       <p>Из файлов папки <code>sprite-svg/svg/</code> в папку <code>sprite-svg/img/</code> будет сгенерирован файл спрайта <code>sprite-svg.svg</code>, который далее будет скопирован в папку сборки. Стилевой файл блока не используется. Сам спрайт имеет вид:</p>
 
@@ -1702,7 +1700,7 @@
 
     </section>
 
-    <section class="blocks-library__item" id="off-canvas" data-name=".off-canvas">
+    <section class="blocks-library__item" id="off-canvas-demo" data-name=".off-canvas">
 
       <h2 class="blocks-library__item-title">Боковое меню</h2>
 
@@ -1727,6 +1725,8 @@
 
     </section>
 
+    <div class="burger  blocks-library__menu-toggler" data-toggle="off-canvas"><span data-toggle="off-canvas"></span></div>
+
   </div>
 
   <div class="off-canvas__overlay" data-toggle="off-canvas"></div>
@@ -1785,6 +1785,14 @@
         demoNoUiSlider.noUiSlider.set([this.value, null]);
       });
 
+      var demoBlocks = document.querySelectorAll('.blocks-library__item');
+      var offCanvasMenu = '';
+      demoBlocks.forEach(function(block) {
+        offCanvasMenu += '<li class="menu__item"><a class="menu__link" data-toggle-native="off-canvas" href="#'+block.getAttribute('id')+'">'+block.querySelector('.blocks-library__item-title').textContent+'</a></li>';
+      });
+      var offCanvasMenuContent = document.getElementById('off-canvas-menu');
+      offCanvasMenuContent.innerHTML = offCanvasMenu;
+
     });
   </script>
 </body>

src/blocks/burger/burger.scss

@@ -5,8 +5,6 @@
 .burger {
   position: relative;
   z-index: 1;
-  top: 0;
-  right: 0;
   display: flex;
   align-items: center;
   width: 30px;

src/blocks/menu/menu.scss

@@ -2,8 +2,6 @@
 // модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
 // Не пишите здесь другие селекторы.
 
-$gray-lightest:               hsl(0, 0%, 90%) !default;
-
 $text-color:                  hsl(0, 0%, 10%) !default;
 
 $border-color:                hsl(0, 0%, 60%) !default;
@@ -37,8 +35,6 @@ $border-color:                hsl(0, 0%, 60%) !default;
     text-decoration: none;
 
     &:hover,
-    &:focus {
-      background-color: $gray-lightest;
-    }
+    &:focus {}
   }
 }

src/blocks/off-canvas/off-canvas.js

 document.addEventListener('click', function(event) {
   if(event.target.dataset.toggle === 'off-canvas') {
     event.preventDefault();
+    offCanvasToggle();
+  }
+  if(event.target.dataset.toggleNative === 'off-canvas') {
+    offCanvasToggle();
+  }
+  function offCanvasToggle() {
     document.getElementById('off-canvas').classList.toggle('off-canvas--open');
   }
 });

src/blocks/off-canvas/off-canvas.scss

@@ -9,6 +9,10 @@ $transition-time:             0.3s !default;
 
 $toggler-part-height:         3px !default;
 
+// Переменная ширины этого блока
+//
+$off-canvas-width:            250px !default;
+
 .off-canvas {
 
   $block-name:                &;
@@ -17,16 +21,22 @@ $toggler-part-height:         3px !default;
   overflow: hidden;
 
   &__aside {
-    position: fixed;
-    z-index: 2;
-    width: 250px;
-    height: 100%;
+    max-height: 30vh;
+    overflow-y: auto;
     backface-visibility: hidden;
     background-color: $gray-darkest;
     color: #fff;
-    transform: translateX(-250px);
     transition: transform $transition-time ease;
 
+    .js & {
+      position: fixed;
+      z-index: 2;
+      width: $off-canvas-width;
+      height: 100%;
+      max-height: none;
+      transform: translateX(($off-canvas-width * -1));
+    }
+
     a {
       color: #fff;
 
@@ -37,57 +47,6 @@ $toggler-part-height:         3px !default;
     }
   }
 
-  &__aside-inner {
-    overflow-y: auto;
-  }
-
-  &__close {
-    position: absolute;
-    top: 0;
-    left: 100%;
-    background-color: $gray-darkest;
-    opacity: 0;
-    visibility: hidden;
-    z-index: -1;
-    display: flex;
-    align-items: center;
-    width: 30px;
-    height: 30px;
-    user-select: none;
-    cursor: pointer;
-    transition: opacity $transition-time ease;
-
-    .no-js & {
-      display: none;
-    }
-
-    > span {
-      width: 100%;
-      height: 100%;
-      position: relative;
-
-      &:before,
-      &:after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 0;
-        width: 100%;
-        height: $toggler-part-height;
-        background: #fff;
-        transform-origin: 50% 50%;
-      }
-
-      &:before {
-        transform: translateY(-50%) rotate3d(0, 0, 1, 45deg);
-      }
-
-      &:after {
-        transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
-      }
-    }
-  }
-
   &__page-content {
     backface-visibility: hidden;
     transition: transform $transition-time ease;
@@ -100,7 +59,6 @@ $toggler-part-height:         3px !default;
     left: 0;
     width: 100%;
     height: 100%;
-    // transition: opacity $transition-time ease;
     background: rgba(0, 0, 0, 0.2);
     opacity: 0;
     visibility: hidden;
@@ -108,7 +66,7 @@ $toggler-part-height:         3px !default;
 
 
 
-  &--open {
+  .js &--open {
 
     #{$block-name}__overlay {
       position: fixed;
@@ -129,7 +87,7 @@ $toggler-part-height:         3px !default;
     }
 
     #{$block-name}__page-content {
-      transform: translateX(250px);
+      transform: translateX($off-canvas-width);
     }
   }
 }

src/scss/blocks-library.scss

@@ -111,36 +111,24 @@
     }
   }
 
-  .js-font-resizer {
-    position: relative;
-
-    @media (min-width: $screen-md) {
-
-      &:hover {
-
-        .js-font-resizer__btns {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  .js-font-resizer__btns {
-    margin-bottom: 1em;
-    font-size: 2rem;
-    transition: opacity 0.3s;
-
-    @media (min-width: $screen-md) {
-      opacity: 0.2;
-      position: absolute;
-      top: 0;
-      left: -4rem;
-      width: 4rem;
+  &__menu-toggler {
+    position: fixed;
+    backface-visibility: hidden;
+    bottom: 0;
+    left: 0;
+    background-color: #000;
+    width: 40px;
+    height: 40px;
+    padding: 5px;
+
+    .off-canvas--open & {
+      display: none;
     }
 
-    .btn {
-      width: 3rem;
-      text-align: center;
+    & > span,
+    & > span:before,
+    & > span:after {
+      background-color: #fff;
     }
   }
 }