Mobile layout

src/backend/views/components/sidebar.twig

@@ -1,35 +1,42 @@
 
 {% set mainClass = 'docs-sidebar' %}
 
-<aside class="{{mainClass}}" data-module="sidebar">
-  {% for firstLevelPage in menu %}
-    <section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
-      <a
-        class="docs-sidebar__section-title {{page is defined and page._id == firstLevelPage._id ? 'docs-sidebar__section-title--active' : ''}}"
-        href="{{firstLevelPage.uri ? '/' ~ firstLevelPage.uri : '/page/' ~ firstLevelPage._id }}"
-      >
-        <span>
-          {{ firstLevelPage.title | striptags }}
-        </span>
-         {% if firstLevelPage.children is not empty %}
-          <button class="docs-sidebar__section-toggler">
-            {{ svg('arrow-up') }}
-          </button>
-         {% endif %}
-      </a>
-      {% if firstLevelPage.children is not empty %}
-        <ul class="docs-sidebar__section-list">
-          {% for child in firstLevelPage.children %}
-            <li class="docs-sidebar__section-list-item-wrapper">
-              <a
-                class="docs-sidebar__section-list-item {{page is defined and page._id == child._id ? 'docs-sidebar__section-list-item--active' : ''}}"
-                href="{{ child.uri ? '/' ~ child.uri : '/page/' ~ child._id }}">
-                  <span> {{ child.title | striptags }} </span>
-              </a>
-            </li>
-          {% endfor %}
-        </ul>
-      {% endif %}
-    </section>
-  {% endfor %}
-</aside>
+<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
+          class="docs-sidebar__section-title {{page is defined and page._id == firstLevelPage._id ? 'docs-sidebar__section-title--active' : ''}}"
+          href="{{firstLevelPage.uri ? '/' ~ firstLevelPage.uri : '/page/' ~ firstLevelPage._id }}"
+        >
+          <span>
+            {{ firstLevelPage.title | striptags }}
+          </span>
+          {% if firstLevelPage.children is not empty %}
+            <button class="docs-sidebar__section-toggler">
+              {{ svg('arrow-up') }}
+            </button>
+          {% endif %}
+        </a>
+        {% if firstLevelPage.children is not empty %}
+          <ul class="docs-sidebar__section-list">
+            {% for child in firstLevelPage.children %}
+              <li class="docs-sidebar__section-list-item-wrapper">
+                <a
+                  class="docs-sidebar__section-list-item {{page is defined and page._id == child._id ? 'docs-sidebar__section-list-item--active' : ''}}"
+                  href="{{ child.uri ? '/' ~ child.uri : '/page/' ~ child._id }}">
+                    <span> {{ child.title | striptags }} </span>
+                </a>
+              </li>
+            {% endfor %}
+          </ul>
+        {% endif %}
+      </section>
+    {% endfor %}
+  </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);
     }
   }
 }