Sidebar redesign (#200)

* New sidebar

* Save state to local storage

* Make sidebar sticky

* Text overflow

* Fix add page button on mobile

* Mobile layout

* Display sidebar when ready

* Add logo

* Remove files

* Fix margin

* Update logo padding-bottom

* Hovers

* Decrease logo's font size

* Make logo not sticky

* Cleanup classnames

* Simplify css

* Update sidebar module

* Fix animation

* Fix cursor issue

* Fix vars and logo paddings

src/backend/views/components/aside.twig

@@ -1,49 +0,0 @@
-<div class="docs-aside-toggler" onclick="document.querySelector('.docs-aside').classList.toggle('docs-aside--toggled')">
-  {{ svg('menu') }} Table of contents
-</div>
-<div class="docs-aside">
-  {% for firstLevelPage in menu %}
-    <section class="docs-aside__section">
-      <a
-        {% if page is defined and page._id == firstLevelPage._id%}
-          class="docs-aside__section-title docs-aside__current"
-        {% else %}
-          class="docs-aside__section-title"
-        {% endif %}
-        {% if firstLevelPage.uri %}
-        href="/{{ firstLevelPage.uri }}"
-      {% else %}
-        href="/page/{{ firstLevelPage._id }}"
-        {% endif %}>
-        {{ firstLevelPage.title | striptags }}
-      </a>
-      {% if firstLevelPage.children is not empty %}
-        <ul class="docs-aside__section-list">
-          {% for child in firstLevelPage.children %}
-            <li>
-              <a
-                {% if page is defined and page._id == child._id %}
-                  class="docs-aside__current"
-                {% endif %}
-                {% if child.uri %}
-                href="/{{ child.uri }}"
-              {% else %}
-                href="/page/{{ child._id }}"
-                {% endif %}>
-                {{ child.title | striptags }}
-              </a>
-            </li>
-          {% endfor %}
-        </ul>
-      {% endif %}
-    </section>
-  {% endfor %}
-  <a class="docs-aside__logo-wrapper" href="https://github.com/codex-team/codex.docs">
-    <div class="logo">
-      {{ svg('aside-logo') }}
-    </div>
-    <div class="caption">
-      <span>Powered by CodeX Docs</span>
-    </div>
-  </a>
-</div>

src/backend/views/components/header.twig

@@ -4,9 +4,12 @@
   </a>
   <ul class="docs-header__menu">
     {% if isAuthorized == true %}
-      <li class="docs-header__menu-add">
+      <li class="docs-header__menu-add docs-header__menu-add--desktop">
         {% include 'components/button.twig' with {label: 'Add page', icon: 'plus', size: 'small', url: '/page/new'} %}
       </li>
+      <li class="docs-header__menu-add docs-header__menu-add--mobile">
+        {% include 'components/button.twig' with {icon: 'plus', size: 'small', url: '/page/new'} %}
+      </li>
     {% endif %}
     {% for option in config.menu %}
       <li>

src/backend/views/components/sidebar.twig

@@ -0,0 +1,55 @@
+
+<div data-module="sidebar" class="docs-sidebar">
+
+  <div class="docs-sidebar__toggler">
+    {{ svg('menu') }} Table of contents
+  </div>
+
+  <aside class="docs-sidebar__content docs-sidebar__content--hidden">
+    {% for firstLevelPage in menu %}
+      <section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
+        <a class="docs-sidebar__section-title-wrapper"
+          href="{{firstLevelPage.uri ? '/' ~ firstLevelPage.uri : '/page/' ~ firstLevelPage._id }}"
+        >
+        <div class="docs-sidebar__section-title {{page is defined and page._id == firstLevelPage._id ? 'docs-sidebar__section-title--active' : ''}}">
+          <span>
+            {{ firstLevelPage.title | striptags }}
+          </span>
+          {% if firstLevelPage.children is not empty %}
+            <button class="docs-sidebar__section-toggler">
+              {{ svg('arrow-up') }}
+            </button>
+          {% endif %}
+        </div>
+        </a>
+        {% if firstLevelPage.children is not empty %}
+          <ul class="docs-sidebar__section-list">
+            {% for child in firstLevelPage.children %}
+              <li>
+                <a
+                  class="docs-sidebar__section-list-item-wrapper"
+                  href="{{ child.uri ? '/' ~ child.uri : '/page/' ~ child._id }}">
+                    <div class="docs-sidebar__section-list-item {{page is defined and page._id == child._id ? 'docs-sidebar__section-list-item--active' : ''}}">
+                      <span>{{ child.title | striptags }}</span>
+                    </div>
+                </a>
+              </li>
+            {% endfor %}
+          </ul>
+        {% endif %}
+      </section>
+    {% endfor %}
+
+    <div class="docs-sidebar__logo">
+        <a class="docs-sidebar__logo-wrapper" href="https://github.com/codex-team/codex.docs">
+          <div class="docs-sidebar__logo-image">
+            {{ svg('aside-logo') }}
+          </div>
+          <p class="docs-sidebar__logo-caption">
+            Powered by CodeX Docs
+          </p>
+        </a>
+    </div>
+
+  </aside>
+</div>

src/backend/views/layout.twig

@@ -17,9 +17,9 @@
   <body>
     {% include "components/header.twig" with res.locals.isAuthorized %}
     <div class="docs">
-      <aside class="docs__aside">
-        {% include "components/aside.twig" %}
-      </aside>
+      
+      {% include "components/sidebar.twig" %}
+      
       <div class="docs__content">
         <div class="docs__content-inner">
           {% block body %}{% endblock %}