Mobile layout

src/backend/views/components/sidebar.twig

@@ -1,7 +1,13 @@
 
 {% set mainClass = 'docs-sidebar' %}
 
-<aside class="{{mainClass}}" data-module="sidebar">
+<div data-module="sidebar" class="{{mainClass}}__wrapper">
+
+  <div class="docs-sidebar__toggler">
+    {{ svg('menu') }} Table of contents
+  </div>
+
+  <aside class="{{mainClass}}">
     {% for firstLevelPage in menu %}
       <section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
         <a
@@ -32,4 +38,5 @@
         {% endif %}
       </section>
     {% endfor %}
-</aside>
+  </aside>
+</div>

src/frontend/js/modules/sidebar.js

@@ -23,6 +23,9 @@ export default class Sidebar {
       sectionList: 'docs-sidebar__section-list',
       sectionListCollapsed: 'docs-sidebar__section-list--collapsed',
       sectionListItemActive: 'docs-sidebar__section-list-item--active',
+      sidebarToggler: 'docs-sidebar__toggler',
+      sidebar: 'docs-sidebar',
+      sidebarHidden: 'docs-sidebar--hidden',
     };
   }
 
@@ -30,9 +33,7 @@ export default class Sidebar {
    * Creates base properties
    */
   constructor() {
-    this.nodes = {
-      section: null,
-    };
+    this.nodes = {};
     const storedState = window.localStorage.getItem(LOCAL_STORAGE_KEY);
 
     this.collapsed = storedState ? JSON.parse(storedState) : {};
@@ -50,7 +51,11 @@ export default class Sidebar {
       const id = section.getAttribute('data-id');
       const togglerEl = section.querySelector('.' + Sidebar.CSS.toggler);
 
-      togglerEl.addEventListener('click', e => this.handleTogglerClick(id, section, togglerEl, e));
+      if (!togglerEl) {
+        return;
+      }
+
+      togglerEl.addEventListener('click', e => this.handleSectionTogglerClick(id, section, togglerEl, e));
 
       if (typeof this.collapsed[id] === 'undefined') {
         this.collapsed[id] = false;
@@ -59,6 +64,9 @@ export default class Sidebar {
         this.setSectionCollapsed(section, togglerEl, true, false);
       }
     });
+    this.nodes.sidebar = moduleEl.querySelector('.' + Sidebar.CSS.sidebar);
+    this.nodes.toggler = moduleEl.querySelector('.' + Sidebar.CSS.sidebarToggler);
+    this.nodes.toggler.addEventListener('click', () => this.toggleSidebar());
   }
 
   /**
@@ -70,7 +78,7 @@ export default class Sidebar {
    * @param {MouseEvent} event - click event
    * @returns {void}
    */
-  handleTogglerClick(sectionId, sectionEl, togglerEl, event) {
+  handleSectionTogglerClick(sectionId, sectionEl, togglerEl, event) {
     event.preventDefault();
     this.collapsed[sectionId] = !this.collapsed[sectionId];
     window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(this.collapsed));
@@ -112,4 +120,13 @@ export default class Sidebar {
       sectionTitle.classList.toggle(Sidebar.CSS.sectionTitleActive, collapsed);
     }
   }
+
+  /**
+   * Toggles sidebar visibility
+   *
+   * @returns {void}
+   */
+  toggleSidebar() {
+    this.nodes.sidebar.classList.toggle(Sidebar.CSS.sidebarHidden);
+  }
 }

src/frontend/styles/components/sidebar.pcss

@@ -1,12 +1,24 @@
 .docs-sidebar {
-  width: 344px;
-  border-right: 1px solid var(--color-line-gray);
+  border-bottom: 1px solid var(--color-line-gray);
   box-sizing: border-box;
   padding: 30px 22px;
-  height: calc(100vh - var(--layout-height-header));
   position: sticky;
   top: var(--layout-height-header);
 
+  @media (--desktop) {
+    height: calc(100vh - var(--layout-height-header));
+    border-right: 1px solid var(--color-line-gray);
+    border-bottom: 0;
+  }
+
+  &__wrapper {
+    width: 100vw;
+    
+    @media (--desktop) {
+      width: 344px;
+    }
+  }
+
   &__section {
     overflow: hidden;
 
@@ -105,4 +117,24 @@
       transform: rotate(180deg);
     }
   }
+
+  &--hidden {
+    display: none;
+  }
+
+  &__toggler {
+    font-size: 13px;
+    cursor: pointer;
+    color: var(--color-text-second);
+    padding: 20px 15px;
+    border-bottom: 1px solid var(--color-line-gray);
+    
+    @media (--desktop) {
+      display: none;
+    }
+
+    svg {
+      margin-right: 10px;
+    }
+  }
 }

src/frontend/styles/layout.pcss

@@ -1,21 +1,8 @@
 .docs {
-  display: flex;
   min-height: calc(100vh - var(--layout-height-header));
 
-  @media (--mobile) {
-    flex-wrap: wrap;
-  }
-
-  &__aside {
-    width: var(--layout-width-aside);
-
-    @media (--mobile) {
-      width: 100%;
-      flex-basis: 100%;
-      padding: 20px var(--layout-padding-horizontal) !important;
-      margin: 0 calc(-1 * var(--layout-padding-horizontal));
-      border-bottom: 1px solid var(--color-line-gray);
-    }
+  @media (--desktop) {
+    display: flex;
   }
 
   &__content {
@@ -34,12 +21,11 @@
     }
   }
 
-  &__aside,
   &__content {
     padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
 
     @media (--mobile) {
-      padding: 20px 0;
+      padding: 20px var(--layout-padding-horizontal);
     }
   }
 }