From 9397424aae7e16cd4c1e726018007734d6b6fbde Mon Sep 17 00:00:00 2001
From: suroh <mx@suroh.tk>
Date: Sat, 22 Mar 2025 09:05:37 +0100
Subject: [PATCH] Add hover state on tucked menus
---
src/layouts/components/alx-nav.webc | 40 +++++++++++++++++++++++++++--
1 file changed, 38 insertions(+), 2 deletions(-)
diff --git a/src/layouts/components/alx-nav.webc b/src/layouts/components/alx-nav.webc
index 7d8804b..e34088f 100644
--- a/src/layouts/components/alx-nav.webc
+++ b/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>