oof

src/TerribleDev.Blog.Web/Views/Shared/Nav.cshtml

@@ -1,8 +1,5 @@
-<input type="checkbox" id="menu-toggle"/>
-<label for="menu-toggle" id="menuLabel"  role="button">
-        <svg aria-label="Open Menu" id="menuBtn" width="16" hight="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 88C0 74.75 10.75 64 24 64H424C437.3 64 448 74.75 448 88C448 101.3 437.3 112 424 112H24C10.75 112 0 101.3 0 88zM0 248C0 234.7 10.75 224 24 224H424C437.3 224 448 234.7 448 248C448 261.3 437.3 272 424 272H24C10.75 272 0 261.3 0 248zM424 432H24C10.75 432 0 421.3 0 408C0 394.7 10.75 384 24 384H424C437.3 384 448 394.7 448 408C448 421.3 437.3 432 424 432z"/></svg>
-</label>
-<nav class="navBar" id="navBar">
+
+<nav class="navBar hide" id="navBar">
   <div class="navContent">
     <picture class="navHero">
           <source srcset="/content/tommyAvatar4.jpg.webp" loading="lazy" type="image/webp" alt="An image of TerribleDev" class="round" />
@@ -17,6 +14,7 @@
           <li><a href="https://github.com/terribledev" rel="noopener" target="_blank" class="link-unstyled">Github</a></li>
           <li><a href="https://twitter.com/terribledev" rel="noopener" target="_blank" class="link-unstyled">Twitter</a></li>
           <li><a href="mailto:tommy@terribledev.io" class="link-unstyled">Email</a></li>
+          <li><span class="link-unstyled" id="closeNav">Close Navbar</span></li>
       </ul>
     </div>
 </nav>

src/TerribleDev.Blog.Web/Views/Shared/_Layout.cshtml

@@ -42,7 +42,7 @@
   <a class="skip-main" href="#main">Skip to main content</a>
   <div class="rootbox">
       <header class="header">
-          <svg aria-label="Open Menu" aria-label="Open Menu" id="menuBtn" role="button" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M4 10h24c1.104 0 2-.896 2-2s-.896-2-2-2H4c-1.104 0-2 .896-2 2s.896 2 2 2zm24 4H4c-1.104 0-2 .896-2 2s.896 2 2 2h24c1.104 0 2-.896 2-2s-.896-2-2-2zm0 8H4c-1.104 0-2 .896-2 2s.896 2 2 2h24c1.104 0 2-.896 2-2s-.896-2-2-2z"/></svg>
+          <svg aria-label="Open Menu" id="menuBtn" role="button" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M4 10h24c1.104 0 2-.896 2-2s-.896-2-2-2H4c-1.104 0-2 .896-2 2s.896 2 2 2zm24 4H4c-1.104 0-2 .896-2 2s.896 2 2 2h24c1.104 0 2-.896 2-2s-.896-2-2-2zm0 8H4c-1.104 0-2 .896-2 2s.896 2 2 2h24c1.104 0 2-.896 2-2s-.896-2-2-2z" /></svg>
           <div class="headerCallout"><a href="/" class="link-unstyled ">@config.Title</a></div>
       </header>
       <partial name="Nav" />

src/TerribleDev.Blog.Web/wwwroot/css/site.css

@@ -140,6 +140,12 @@ a:visited {
   margin: auto;
 }
 
+#menuBtn {
+  cursor: pointer;
+  margin-left: 1rem;
+  fill: var(--headline);
+}
+
 .sidebarBtns {
   padding: 0;
   list-style: none;
@@ -226,7 +232,4 @@ a.skip-main:focus, a.skip-main:active {
   margin: 0 auto;
   font-size: 1.2em;
   display: inline-block;
-}
-#menu-toggle {
-  display: none;
 }

src/TerribleDev.Blog.Web/wwwroot/css/site.mobile.css

@@ -31,36 +31,4 @@
   .main-content-wrap {
     max-width: calc(100vw - 4rem);
   }
-  #navBar {
-    display: none;
-  }
-
-  #menuLabel {
-    background: var(--nb-bkgd);
-    position: fixed;
-    bottom: 6rem;
-    right: 4rem;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    box-shadow: 1px 1px 4px #000;
-    z-index: 1000;
-    line-height: 0;
-  }
-  #menuBtn {
-    cursor: pointer;
-    fill: var(--pmry-bknd);
-  }
-  #menu-toggle:checked + #menuLabel {
-    background: var(--pmry-bknd);
-  }
-  #menu-toggle:checked + #menuLabel > #menuBtn {
-    fill: var(--bdy-txt-clr);
-  }
-  #menu-toggle:checked ~ #navBar {
-    display: flex;
-  }
 }

src/TerribleDev.Blog.Web/wwwroot/js/swi.js

@@ -9,4 +9,29 @@ if (navigator && navigator.serviceWorker && navigator.serviceWorker.controller)
     }).then(function (reg) {
         console.log('Service worker has been registered for scope:' + reg.scope);
     });
-}
+}
+
+var toggleNav = function () {
+    var nav = document.getElementById('navBar');
+    if (!nav) {
+        return;
+    }
+    var hidden = nav.classList.contains('hide');
+    if (hidden) {
+        nav.classList.remove('hide');
+    }
+    else {
+        nav.classList.add('hide');
+    }
+}
+function attachNavToggle(elementId) {
+    var menuButton = document.getElementById(elementId);
+    if (menuButton) {
+        menuButton.addEventListener('click', function () {
+            toggleNav();
+        });
+    }
+}
+attachNavToggle('menuBtn');
+attachNavToggle('closeNav');
+