Update menu styles fix singleton menu item issue

src/layouts/base.webc

@@ -46,7 +46,7 @@
           </li>
           <li webc:for="singleton of collections.pages[lang]" >
             <span class="active" webc:if="singleton.url === page.url" @text="singleton.data.title"></span>
-            <a :href="singleton.url" @text="singleton.data.title"></a>
+            <a webc:else :href="singleton.url" @text="singleton.data.title"></a>
           </li>
         </ul>
       </alx-nav>

src/layouts/components/alx-nav.webc

@@ -45,9 +45,7 @@ ul {
 }
 
 .toggle {
-  &:not(:has(input:checked)) {
-    cursor: pointer;
-  }
+  cursor: pointer !important;
 
   &:hover input:not(:checked) + .indicator:after {
     opacity: 0.2;
@@ -65,13 +63,15 @@ ul {
       position: absolute;
       right: calc(.5 * var(--menu-padding));
       top: calc(.5 * var(--menu-padding));
-      content: '■';
+      content: '';
+      outline: 2.5px solid currentColor;
       display: block;
-      width: min-content;
+      width: 1ch;
+      height: 1ch;
       font-size: 1.5em;
       font-weight: 200;
       opacity: 0.1;
-      transition: opacity 0.25s ease;
+      transition: opacity 0.25s ease, background 0.25s ease;
     }
 
     display: block;
@@ -79,12 +79,16 @@ ul {
     height: 100%;
   }
 
-  input:checked:hover + .indicator:after {
-    opacity: 0.9;
+  input:checked + .indicator:after {
+    opacity: .5;
   }
 
-  input:checked + .indicator:after {
-    opacity: 0.5;
+  input:checked:hover + .indicator:after {
+    opacity: .7;
+  }
+
+  input.locked + .indicator:after {
+    background-color: currentColor;
   }
 
   input.locked:checked + .indicator:after {
@@ -102,13 +106,11 @@ customElements.define('alx-nav', class AlxNav extends HTMLElement {
 
   constructor() {
     super()
-
-    this.#navToggle =  this.querySelector('input[type="radio"]')
-
     AlxNav.allNavs.push(this)
 
-    this.#navToggle.addEventListener('click', () => {
+    this.#navToggle = this.querySelector('input[type="radio"]')
 
+    this.#navToggle.addEventListener('click', () => {
       if (!this.#prechecked) {
         AlxNav.allNavs.forEach(n => n.unPrecheck())
         this.#prechecked = true
@@ -150,7 +152,6 @@ customElements.define('alx-nav', class AlxNav extends HTMLElement {
 
   unPrecheck() {
     this.#prechecked = false
-    console.log('prechecked toggled', this.#prechecked)
   }
 })
 </script>