From bdca7f4ace5fa39b1e7f99b97c4b16c57f621802 Mon Sep 17 00:00:00 2001
From: ro <iam@roiskinda.cool>
Date: Tue, 28 May 2024 11:38:32 -0600
Subject: [PATCH] fixed mobile menu

some script got removed during the restruction that included the js
handler for the mobile menu, so that was replaced with a css toggle to
keep it simple
---
 public/assets/css/dash/frame.css       | 24 ++++++++++++++++++++----
 resources/views/includes/nav.blade.php | 13 ++++++++-----
 2 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/public/assets/css/dash/frame.css b/public/assets/css/dash/frame.css
index 5671613..1b29843 100644
--- a/public/assets/css/dash/frame.css
+++ b/public/assets/css/dash/frame.css
@@ -122,7 +122,7 @@ header > nav > div > div.mobile-menu {
   display: none;
   position: fixed;
   z-index: 1000;
-  left: 0;
+  left: 5px;
   transition: all 0.2s linear;
   background: var(--white);
 }
@@ -135,8 +135,24 @@ header > nav > div.nav-right button {
   color: var(--white);
 }
 
-header > nav > div.nav-right > button.menu-toggle {
+header > nav > div.nav-right > label#menu-toggle-label {
   display: none;
+  border-radius: 3px;
+  padding: 6px 5px 0px;
+  background: var(--secondary-highlight);
+  cursor: pointer;
+}
+
+#mobile-toggle {
+  display: none;
+}
+
+#mobile-toggle:not(:checked) ~ #main-nav {
+  display: none;
+}
+
+#mobile-toggle:checked ~ .mobile-menu {
+  display: inline;
 }
 
 header > nav > div.nav-right div.submenu {
@@ -158,8 +174,8 @@ header > nav > div.nav-right div.submenu button {
 }
 
 @media only screen and (max-width: 530px) {
-  header > nav > div.nav-right > button.menu-toggle {
-    display: inline;
+  header > nav > div.nav-right > label#menu-toggle-label {
+    display: inline-block;
   }
 
   header > nav > div > div.menu {
diff --git a/resources/views/includes/nav.blade.php b/resources/views/includes/nav.blade.php
index fc292af..a844618 100644
--- a/resources/views/includes/nav.blade.php
+++ b/resources/views/includes/nav.blade.php
@@ -11,7 +11,7 @@
     </a>
     <a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/navigation" title="edit navigation">
         <svg id="nav-menu-icon" class="icon">
-            <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/>
+            <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-link"/>
         </svg>
     </a>
     <a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/logout" title="log out">
@@ -21,9 +21,12 @@
     </a>
 </div>
 
-<button class="menu-toggle">
-    <i class="ti ti-menu-2"></i>
-</button>
+<label id='menu-toggle-label' for="mobile-toggle">
+  <svg id="nav-menu-icon" class="icon">
+      <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/>
+  </svg>
+</label>
+<input id="mobile-toggle" type="checkbox" />
 
 <div class="mobile-menu">
     @if($title == "Settings" )
@@ -38,7 +41,7 @@
     </a>
     <a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/navigation" title="edit navigation">
         <svg id="nav-menu-icon" class="icon">
-            <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-menu"/>
+            <use id="nav-menu-icon" xlink:href="/assets/images/global/sprite.svg#entypo-link"/>
         </svg>
     </a>
     <a id="navigation" class="main-nav-secondary-highlight" href="/dashboard/logout" title="log out">