Add hover state on tucked menus

src/layouts/components/alx-nav.webc

@@ -80,10 +80,46 @@ ul {
   }
 
   input:checked + .indicator:after {
-    transform: rotateY(0deg);
     opacity: 1;
   }
 }
 </style>
 
-<script type="module" webc:scoped></script>
+<script type="module" webc:scoped>
+customElements.define('alx-nav', class AlxNav extends HTMLElement {
+  static hoveredNavs = new Set()
+  static allNavs = []
+  #prechecked
+
+  constructor() {
+    super()
+
+    const navToggle =  this.querySelector('input[type="radio"]')
+    this.#prechecked = navToggle.checked
+
+    AlxNav.allNavs.push(this)
+
+    this.addEventListener('mouseenter', () => {
+      if (!this.classList.contains('hidden')) {
+        navToggle.checked = true
+        AlxNav.hoveredNavs.add(this)
+      }
+    })
+
+    this.addEventListener('mouseleave', () => {
+      console.log('leave')
+      AlxNav.hoveredNavs.delete(this)
+      if (!AlxNav.hoveredNavs.size) {
+        AlxNav.allNavs.forEach(n => n.setDefaultState())
+      } else {
+        navToggle.checked = false
+      }
+    })
+  }
+
+  setDefaultState() {
+    const navToggle =  this.querySelector('input[type="radio"]')
+    navToggle.checked = this.#prechecked
+  }
+})
+</script>