.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,16 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="CssUnknownProperty" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myCustomPropertiesEnabled" value="true" />
+      <option name="myIgnoreVendorSpecificProperties" value="false" />
+      <option name="myCustomPropertiesList">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="interpolate-size" />
+          </list>
+        </value>
+      </option>
+    </inspection_tool>
+  </profile>
+</component>

.idea/sqldialects.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="SqlDialectMappings">
-    <file url="file://$PROJECT_DIR$/sql/delete_db.sql" dialect="GenericSQL" />
-    <file url="PROJECT" dialect="MySQL" />
-  </component>
-</project>

public/example/index.html

@@ -20,8 +20,7 @@
                 <p>header</p>
             </div>
             <div class="left">
-                <button class="openbtn" onclick="openNav()">&#9776;</button>
-                <h2>Collapsed Sidebar</h2>
+                <button class="openbtn" onclick="toggleNav()">&#9776;</button>
             </div>
             <div class="main">
                 <p>main</p>

scripts/example.js

@@ -1,11 +1,23 @@
+let sidebarEl = document.getElementById("mySidebar")
+let mainEl = document.getElementById("main")
+
 /* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
 function openNav() {
-    document.getElementById("mySidebar").style.width = "250px";
-    document.getElementById("main").style.marginLeft = "250px";
+    sidebarEl.style.width = "250px";
+    mainEl.style.marginLeft = "250px";
 }
 
 /* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
 function closeNav() {
-    document.getElementById("mySidebar").style.width = "0";
-    document.getElementById("main").style.marginLeft = "0";
+    sidebarEl.style.width = "0";
+    mainEl.style.marginLeft = "0";
+}
+
+/* Toggle the sidebar */
+function toggleNav() {
+    if (sidebarEl.offsetWidth > 0) {
+        closeNav()
+    } else {
+        openNav()
+    }
 }

static/Styles/example.css

@@ -10,6 +10,7 @@
     overflow-x: hidden; /* Disable horizontal scroll */
     padding-top: 60px; /* Place content 60px from the top */
     transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
+    font-family: "Agency FB";
 }
 
 /* The sidebar links */