initialize

js/libs/sidebar/sidebar.css

@@ -0,0 +1,41 @@
+/* sidebar */
+#sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    transition: 0.4s;
+    overflow: hidden;
+    z-index: 10;
+  }
+  
+  .sidebar-toggle {
+    cursor: pointer;
+    font-size: 2em;
+    padding: 5px;
+  }
+  
+  #sidebar-toggle {
+    position: fixed;
+    top: 0;
+    z-index: 1;
+  }
+  
+  #sidebar-toggle-input {
+    display: none;
+  }
+  
+  #sidebar-toggle-input:not(:checked) ~ #sidebar {
+    width: 0px;
+  }
+  
+  #sidebar-toggle-input:checked ~ #sidebar {
+    width: 250px;
+  }
+  
+  @media screen and (max-width: 767px) {
+    #sidebar-toggle-input:checked ~ #sidebar {
+      width: 100%;
+    }
+  }
+  

js/libs/sidebar/sidebar.js

@@ -0,0 +1,17 @@
+window.Sidebar = function () {
+    let sidebar = document.querySelector("#sidebar");
+    let close = document.querySelector("#sidebar-toggle-close");
+    let toggle = document.querySelector("#sidebar-toggle-input");
+  
+    sidebar.addEventListener("click", function (event) {
+      if (document.body.clientWidth < 1280) {
+        toggle.checked = false;
+      }
+    })
+  
+    close.addEventListener("click", function (event) {
+      if (document.body.clientWidth < 1280) {
+        event.preventDefault();
+      }
+    })
+  }