fix: Robust click-outside handler for mobile sidebar
This commit is contained in:
@@ -308,9 +308,15 @@ pub fn App() -> impl IntoView {
|
|||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
// MOBILE SIDEBAR
|
// MOBILE SIDEBAR
|
||||||
<div class={move || if show_mobile_sidebar.get() { "fixed inset-0 z-50 flex md:hidden" } else { "hidden" }}>
|
<div
|
||||||
<div class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity" on:click=move |_| set_show_mobile_sidebar.set(false)></div>
|
class={move || if show_mobile_sidebar.get() { "fixed inset-0 z-50 flex md:hidden" } else { "hidden" }}
|
||||||
<aside class={format!("relative w-80 max-w-[85vw] h-full shadow-2xl p-6 flex flex-col animate-in slide-in-from-left duration-300 border-r {}", sidebar_bg)}>
|
on:click=move |_| set_show_mobile_sidebar.set(false)
|
||||||
|
>
|
||||||
|
<div class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity"></div>
|
||||||
|
<aside
|
||||||
|
class={format!("relative w-80 max-w-[85vw] h-full shadow-2xl p-6 flex flex-col animate-in slide-in-from-left duration-300 border-r {}", sidebar_bg)}
|
||||||
|
on:click=move |e: web_sys::MouseEvent| e.stop_propagation()
|
||||||
|
>
|
||||||
<button class={format!("absolute top-4 right-4 p-2 hover:opacity-80 {}", text_sec)} on:click=move |_| set_show_mobile_sidebar.set(false)>
|
<button class={format!("absolute top-4 right-4 p-2 hover:opacity-80 {}", text_sec)} on:click=move |_| set_show_mobile_sidebar.set(false)>
|
||||||
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
|
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user