From ae79bba769ab2a5152c89b30184c6a9f26ea9527 Mon Sep 17 00:00:00 2001
From: tommy <mzt.live@live.com>
Date: Mon, 3 Nov 2025 17:33:46 +0800
Subject: [PATCH] fix style

---
 assets/styling/shadcn.css            |  6 ++++++
 src/components/ui/navigation_menu.rs | 15 +++++++++------
 src/components/ui/popover.rs         | 17 +++++++++--------
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/assets/styling/shadcn.css b/assets/styling/shadcn.css
index 24a9168..e75910f 100644
--- a/assets/styling/shadcn.css
+++ b/assets/styling/shadcn.css
@@ -1038,6 +1038,12 @@
     z-index: 45;
 }
 
+.ui-popover-trigger {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+}
+
 .ui-popover[data-placement="top"] {
     transform: translate(-50%, -0.75rem);
 }
diff --git a/src/components/ui/navigation_menu.rs b/src/components/ui/navigation_menu.rs
index 316185c..aa81d15 100644
--- a/src/components/ui/navigation_menu.rs
+++ b/src/components/ui/navigation_menu.rs
@@ -23,29 +23,29 @@ impl NavigationItem {
 
 #[component]
 pub fn NavigationMenu(#[props(into)] items: Vec<NavigationItem>) -> Element {
-    let active = use_signal(|| 0usize);
+    let active = use_signal(|| None::<usize>);
 
     let trigger_nodes: Vec<_> = items
         .iter()
         .enumerate()
         .map(|(index, item)| {
             let mut active_signal = active.clone();
-            let is_active = active() == index;
+            let is_active = active().is_some_and(|current| current == index);
 
             rsx! {
                 button {
                     class: "ui-navmenu-trigger",
                     "data-open": if is_active { "true" } else { "false" },
-                    onmouseenter: move |_| active_signal.set(index),
-                    onclick: move |_| active_signal.set(index),
+                    onmouseenter: move |_| active_signal.set(Some(index)),
+                    onclick: move |_| active_signal.set(Some(index)),
                     "{item.label}"
                 }
             }
         })
         .collect();
 
-    let selected_content = items
-        .get(active().min(items.len().saturating_sub(1)))
+    let selected_content = active()
+        .and_then(|index| items.get(index))
         .map(|item| {
             let description = item.description.clone();
             rsx! {
@@ -63,9 +63,12 @@ pub fn NavigationMenu(#[props(into)] items: Vec<NavigationItem>) -> Element {
             }
         });
 
+    let mut reset_active = active.clone();
+
     rsx! {
         div {
             class: "ui-navmenu",
+            onmouseleave: move |_| reset_active.set(None),
             {trigger_nodes.into_iter()}
             if let Some(content) = selected_content {
                 {content}
diff --git a/src/components/ui/popover.rs b/src/components/ui/popover.rs
index 9788963..56b89d8 100644
--- a/src/components/ui/popover.rs
+++ b/src/components/ui/popover.rs
@@ -9,9 +9,10 @@ pub fn Popover(
     let mut open = use_signal(|| false);
 
     rsx! {
-        span {
-            style: "position: relative; display: inline-flex;",
-            onclick: move |_| open.set(!open()),
+        div {
+            class: "ui-popover-trigger",
+            style: "position: relative; display: inline-flex; align-items: center;",
+            onmousedown: move |_| open.set(!open()),
             tabindex: 0,
             onfocusout: move |_| open.set(false),
             {trigger}
@@ -20,11 +21,11 @@ pub fn Popover(
                     class: "ui-popover",
                     "data-placement": placement.clone(),
                     style: match placement.as_str() {
-                        "top" => "left: 50%; bottom: 100%;",
-                        "bottom" => "left: 50%; top: 100%;",
-                        "left" => "right: 100%; top: 50%; transform: translate(-0.75rem, -50%);",
-                        "right" => "left: 100%; top: 50%; transform: translate(0.75rem, -50%);",
-                        _ => "left: 50%; top: 100%;"
+                        "top" => "position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -0.75rem);",
+                        "bottom" => "position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0.75rem);",
+                        "left" => "position: absolute; right: 100%; top: 50%; transform: translate(-0.75rem, -50%);",
+                        "right" => "position: absolute; left: 100%; top: 50%; transform: translate(0.75rem, -50%);",
+                        _ => "position: absolute; left: 50%; top: 100%; transform: translate(-50%, 0.75rem);"
                     },
                     onclick: move |event| event.stop_propagation(),
                     {content}