fix: Robust click-outside handler for mobile sidebar
This commit is contained in:
@@ -308,9 +308,15 @@ pub fn App() -> impl IntoView {
|
||||
</aside>
|
||||
|
||||
// MOBILE SIDEBAR
|
||||
<div class={move || if show_mobile_sidebar.get() { "fixed inset-0 z-50 flex md:hidden" } else { "hidden" }}>
|
||||
<div class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity" on:click=move |_| set_show_mobile_sidebar.set(false)></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)}>
|
||||
<div
|
||||
class={move || if show_mobile_sidebar.get() { "fixed inset-0 z-50 flex md:hidden" } else { "hidden" }}
|
||||
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)>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user