Update nav toggle functionality to pin when not default

src/layouts/components/alx-nav.webc

@@ -1,5 +1,5 @@
 <label class="toggle">
-  <input type="radio" name="alxNav" :checked="activeNav"/>
+  <input type="radio" name="alxNav" :checked="activeNav" :class="activeNav ? 'locked' : ''"/>
   <div class="indicator"></div>
 </label>
 
@@ -79,7 +79,15 @@ ul {
     height: 100%;
   }
 
+  input:checked:hover + .indicator:after {
+    opacity: 0.9;
+  }
+
   input:checked + .indicator:after {
+    opacity: 0.5;
+  }
+
+  input.locked:checked + .indicator:after {
     opacity: 1;
   }
 }
@@ -89,19 +97,27 @@ ul {
 customElements.define('alx-nav', class AlxNav extends HTMLElement {
   static hoveredNavs = new Set()
   static allNavs = []
-  #prechecked
+
+  #navToggle
 
   constructor() {
     super()
 
-    const navToggle =  this.querySelector('input[type="radio"]')
-    this.#prechecked = navToggle.checked
+    this.#navToggle =  this.querySelector('input[type="radio"]')
 
     AlxNav.allNavs.push(this)
 
+    this.#navToggle.addEventListener('click', () => {
+
+      if (!this.#prechecked) {
+        AlxNav.allNavs.forEach(n => n.unPrecheck())
+        this.#prechecked = true
+      }
+    })
+
     this.addEventListener('mouseenter', () => {
       if (!this.classList.contains('hidden')) {
-        navToggle.checked = true
+        this.#navToggle.checked = true
         AlxNav.hoveredNavs.add(this)
       }
     })
@@ -111,14 +127,30 @@ customElements.define('alx-nav', class AlxNav extends HTMLElement {
       if (!AlxNav.hoveredNavs.size) {
         AlxNav.allNavs.forEach(n => n.setDefaultState())
       } else {
-        navToggle.checked = false
+        this.#navToggle.checked = false
       }
     })
   }
 
+  set #prechecked(val) {
+    if (val) {
+      this.#navToggle.classList.add('locked')
+    } else {
+      this.#navToggle.classList.remove('locked')
+    }
+  }
+
+  get #prechecked() {
+    return this.#navToggle.classList.contains('locked')
+  }
+
   setDefaultState() {
-    const navToggle =  this.querySelector('input[type="radio"]')
-    navToggle.checked = this.#prechecked
+    this.#navToggle.checked = this.#prechecked
+  }
+
+  unPrecheck() {
+    this.#prechecked = false
+    console.log('prechecked toggled', this.#prechecked)
   }
 })
 </script>