Docs: Sidebar styles

docs/js/commons.js

@@ -7,6 +7,7 @@
 
 // Imports
 import themeSwitcher from './src/theme-switcher.js';
+import toggleNavigation from './src/toggle-navigation';
 
 // Theme switcher
 themeSwitcher.addButton({
@@ -14,4 +15,7 @@ themeSwitcher.addButton({
   class: 'contrast switcher theme-switcher',
   target: 'body',
 });
-themeSwitcher.init();
+themeSwitcher.init();
+
+// Toggle navigation
+toggleNavigation.init();

docs/js/commons.min.js

@@ -1 +1 @@
-"use strict";!function(){var e={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this.buttonsTarget).forEach(function(e){e.addEventListener("click",function(e){"dark"==this.scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(e){var t=document.createElement(e.tag);t.className=e.class,document.querySelector(e.target).appendChild(t)},set scheme(e){"auto"==e?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=e&&"light"!=e||(this._scheme=e),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var t;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(e){t="dark"==this.scheme?this.change.dark:this.change.light,e.innerHTML=t,e.setAttribute("aria-label",t.replace(/<[^>]*>?/gm,""))}.bind(this))}};e.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),e.init()}();
+"use strict";!function(){var t={_scheme:"auto",change:{light:"<i>Turn on dark mode</i>",dark:"<i>Turn off dark mode</i>"},buttonsTarget:".theme-switcher",init:function(){this.scheme=this._scheme,this.initSwitchers()},get preferedColorScheme(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},initSwitchers:function(){document.querySelectorAll(this.buttonsTarget).forEach(function(t){t.addEventListener("click",function(t){"dark"==this.scheme?this.scheme="light":this.scheme="dark"}.bind(this),!1)}.bind(this))},addButton:function(t){var e=document.createElement(t.tag);e.className=t.class,document.querySelector(t.target).appendChild(e)},set scheme(t){"auto"==t?"dark"==this.preferedColorScheme?this._scheme="dark":this._scheme="light":"dark"!=t&&"light"!=t||(this._scheme=t),this.applyScheme()},get scheme(){return this._scheme},applyScheme:function(){var e;document.querySelector("html").setAttribute("data-theme",this.scheme),document.querySelectorAll(this.buttonsTarget).forEach(function(t){e="dark"==this.scheme?this.change.dark:this.change.light,t.innerHTML=e,t.setAttribute("aria-label",e.replace(/<[^>]*>?/gm,""))}.bind(this))}},e={_state:"closed-on-mobile",toggleLink:document.getElementById("toggle-docs-navigation"),nav:document.querySelector("main > aside > nav"),init:function(){this.onToggleClick()},onToggleClick:function(){this.toggleLink.addEventListener("click",function(t){t.preventDefault(),"closed-on-mobile"==this.state?this.state="open":this.state="closed-on-mobile",this.nav.removeAttribute("class"),this.nav.classList.add(this.state)}.bind(this),!1)},applyState:function(){},get state(){return this._state},set state(t){this._state=t}};t.addButton({tag:"BUTTON",class:"contrast switcher theme-switcher",target:"body"}),t.init(),e.init()}();

docs/js/src/color-picker.js

@@ -6,6 +6,7 @@
  */
 
 export const colorPicker = {
+  
   // Config
   colors: null,
   buttonsTarget: '#customization article[data-theme="generated"]',

docs/js/src/grid.js

@@ -6,6 +6,7 @@
  */
 
 export const grid = {
+  
   // Config
   buttons: {
     text: {

docs/js/src/theme-switcher.js

@@ -6,6 +6,7 @@
  */
 
 export const themeSwitcher = {
+  
   // Config
   _scheme: 'auto',
   change: {

docs/js/src/toggle-navigation.js

@@ -0,0 +1,53 @@
+/*
+ * Toggle navigation
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2021 - Licensed under MIT
+ */
+
+export const toggleNavigation = {
+  
+  // Config
+  _state: 'closed-on-mobile',
+  toggleLink: document.getElementById('toggle-docs-navigation'),
+  nav: document.querySelector('main > aside > nav'),
+
+  // Init
+  init() {
+    this.onToggleClick()
+  },
+
+  onToggleClick() {
+    this.toggleLink.addEventListener(
+      'click',
+      function (event) {
+        event.preventDefault();
+        if (this.state == 'closed-on-mobile') {
+          this.state = 'open';
+        } else {
+          this.state = 'closed-on-mobile';
+        }
+        this.nav.removeAttribute('class');
+        this.nav.classList.add(this.state);
+      }.bind(this),
+      false
+    );
+  },
+
+  // Apply navigation state
+  applyState() {
+    
+  },
+
+  // Get state
+  get state() {
+    return this._state;
+  },
+
+  // Set state
+  set state(state) {
+    this._state = state;
+  },
+};
+
+export default toggleNavigation;