responsive footer

assets/scss/colors.scss

@@ -280,3 +280,27 @@ button {
   &:hover {background-color: transparent;}
   background-color: transparent;
 }
+
+#hamburger-bg{
+  background-color: $dark-bg;
+  & .hamburger-nav-item {
+    background-color: transparent;
+    color: $dark-ln;
+    border-color: $dark-ln;
+    &:hover {
+      background-color: $dark-ln;
+      color: $dark-bg;
+    }
+  }
+  &.light{
+    background-color: $light-bg;
+    & .hamburger-nav-item{
+      color: $light-ln;
+      border-color: $light-ln;
+      &:hover {
+        background-color: $light-ln;
+        color: $light-bg;
+      }
+    }
+  }
+}

assets/scss/layout.scss

@@ -136,7 +136,6 @@ header{
 
 #hamburger-bg{
   position: fixed;
-  background-color: red;
   width: 100%;
   height: calc(100% - 42pt);
   left: 0pt;
@@ -148,8 +147,15 @@ header{
   justify-content: center;
   & * {
     display: grid;
-    margin-top: 14pt;
+    margin-top: 2%;
-    margin-bottom: 14pt;
+    margin-bottom: 2%;
     text-align: center;
   }
+  &.hidden{
+    display: none;
+  }
+}
+
+#darkmode-button-small {
+  margin-right: 8pt;
 }

assets/scss/responsive.css

@@ -1,4 +1,6 @@
-#hamburger-button {
+#hamburger-button,
+#hamburger-bg,
+#darkmode-button-small{
     display: none;
 }
 
@@ -9,8 +11,18 @@
     {
             display: none;
     }
-    #hamburger-button {
+    #hamburger-button,
+    #darkmode-button-small,
+    #hamburger-bg,
+    #hamburger-bg #darkmode-toggle-label,
+    #hamburger-bg #darkmode-toggle{
         display: flex;
     }
+    #hamburger-bg #darkmode-toggle,
+    #hamburger-bg #darkmode-toggle-label{
+        position: absolute;
+        bottom: 1em;
+        right: 1em;
+    }
 }
 

assets/scss/style.scss

@@ -101,3 +101,10 @@ ul a{
   border-style: solid;
   padding: 0.12em;
 }
+
+#hamburger-bg {
+  & .hamburger-nav-item {
+    border-style: solid;
+    padding: 0.12em;
+  }
+}

layouts/partials/footer.html

@@ -11,15 +11,15 @@
 <span id="footer-right">
         <input type="checkbox" id="darkmode-toggle" aria-label="darkmode toggle" class="toggleinput">
         <label class="togglelabel colorswitch" for="darkmode-toggle" aria-label="darkmode toggle" role="checkbox" id="darkmode-toggle-label"></label>
-        <button type="button" id="hamburger-button" class="colorswitch hamburger"></button>
+        <button type="button" id="darkmode-button-small" class="colorswitch hamburger"></button>
-        <div class="hamburger colorswitch" id="hamburger-bg">
+        <button type="button" id="hamburger-button" class="colorswitch hamburger" title="hamburger navigation menu button"></button>
-<nav id="footer-nav" aria-label="navigation">
+        <div class="hamburger colorswitch hidden" id="hamburger-bg">
+<nav id="hamburger-nav" aria-label="navigation">
     {{ $currentPage := . }}
     {{ range .Site.Menus.nav }}
     <a class="hamburger-nav-item{{if or ($currentPage.IsMenuCurrent "nav" .) ($currentPage.HasMenuCurrent "nav" .) }} active{{end}} colorswitch" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }} {{ .Title }}</a><br>
     {{ end }}
 </nav>
-
         </div>
 </span>
 </footer>

static/js/hamburger.js

@@ -1 +1,25 @@
-function activateHamburger() {}
+const button = document.getElementById("hamburger-button");
+const bg = document.getElementById("hamburger-bg");
+let hidden = true;
+
+export function activateHamburger() {
+  button.addEventListener("click", function () {
+    hidden = !hidden;
+    console.log(hidden);
+    if (hidden === true) {
+      hide();
+    } else {
+      unhide();
+    }
+  });
+}
+
+function unhide() {
+  bg.classList.remove("hidden");
+  button.innerHTML = "窱";
+}
+
+function hide() {
+  bg.classList.add("hidden");
+  button.innerHTML = "";
+}

static/js/lightmode.js

@@ -1,13 +1,16 @@
 const checkbox = document.getElementById("darkmode-toggle");
 const colorswitchers = document.getElementsByClassName("colorswitch");
+const button = document.getElementById("darkmode-button-small");
 
 function switchToLight() {
+  button.innerHTML = "滛";
   for (let item of colorswitchers) {
     item.classList.add("light");
   }
 }
 
 function switchToDark() {
+  button.innerHTML = "";
   for (let item of colorswitchers) {
     console.log(item);
     item.classList.remove("light");
@@ -21,6 +24,10 @@ export function updateMode() {
     switchToDark();
   }
   checkbox.checked = localStorage.getItem("dark");
+
+  button.addEventListener("click", function () {
+    checkbox.click();
+  });
   checkbox.addEventListener("change", function () {
     localStorage.setItem("light", this.checked);
     if (this.checked) {