diff options
| -rw-r--r-- | assets/style.scss | 11 | ||||
| -rw-r--r-- | src/components/sidebar.rs | 20 |
2 files changed, 31 insertions, 0 deletions
diff --git a/assets/style.scss b/assets/style.scss index f6e1d55..016c568 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -650,6 +650,17 @@ background: #00000060; } } +.sidebar .behind-hovering { + width: 402px; + transition: width 0.2s ease-out allow-discrete; +} + +@starting-style { + .sidebar .behind-hovering { + width: 0; + } +} + .overlay { position: relative; z-index: 100; diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs index 0be31fd..5248a55 100644 --- a/src/components/sidebar.rs +++ b/src/components/sidebar.rs @@ -166,6 +166,16 @@ pub fn Sidebar() -> impl IntoView { {move || match page { SidebarOpen::Roster => { view! { + {move || { + if *open.read() == None + && *hovered.read() == Some(SidebarOpen::Roster) + { + view! { <div class="sidebar-drawer behind-hovering"></div> } + .into_any() + } else { + view! {}.into_any() + } + }} <div class:sidebar-drawer=true class:sidebar-hovering-drawer=move || { @@ -180,6 +190,16 @@ pub fn Sidebar() -> impl IntoView { } SidebarOpen::Chats => { view! { + {move || { + if *open.read() == None + && *hovered.read() == Some(SidebarOpen::Chats) + { + view! { <div class="sidebar-drawer behind-hovering"></div> } + .into_any() + } else { + view! {}.into_any() + } + }} <div class:sidebar-drawer=true class:sidebar-hovering-drawer=move || { |