feat: properly animate tab groups

src/components/tabs/sidebar.rs

@@ -1,6 +1,4 @@
 use leptos::prelude::*;
-use leptos_animate::animate;
-use leptos_animate::animations::classes::{In, Out};
 use leptos_router::components::{Outlet, A};
 use leptos_router::hooks::use_location;
 use crate::common::{SubTabInfo, TabInfo};
@@ -89,33 +87,33 @@ fn SidebarTab(
     });
     
     view! {
-        <A href=move || path.get()>
         <div 
-                class="p-3 transition-all font-bold"
+            class="transition-all duration-300"
             class=(["bg-transparent", "text-white"], move || !selected.get())
             class=(["bg-white", "text-black"], move || selected.get())
+        >
+            <A href=move || path.get()>
+                <div
+                    class="p-3 transition-bg font-bold"
                 >
                     {text}
                 </div>
             </A>
+            <div
+                class="grid transition-all ease-in-out"
+                style:grid-template-rows=move || if selected.get() { "1fr" } else { "0fr" }
+            >
+                <div class="overflow-hidden min-h-0">
                     <For
                         each=move || sub_paths.get()
                         key=|info| info.text.clone()
                         let(SubTabInfo { text, path })
                     >
-            <SidebarSubTab
+                        <SidebarSubTab text=text path=path visible=selected />
-                use:animate=(
-                    In::default()
-                    .source("h-0")
-                        .target("h-auto")
-                        .active("transition-all"),
-                    Out::default()
-                        .source("h-auto")
-                        .target("h-0")
-                        .active("transition-all")
-                )
-                text=text path=path visible=selected />
                     </For>
+                </div>
+            </div>
+        </div>
     }
 }
 
@@ -130,16 +128,13 @@ fn SidebarSubTab(
     });
     
     view! {
-        <div class="grid transition-all ease-in-out"
+        <A href=move || path.get()>
-            style:grid-template-rows=move || if visible.get() { "1fr" } else { "0fr" }
-            style:opacity=move || if visible.get() { "1" } else { "0" }
-        >
             <div
-                class="overflow-hidden p-3 pl-10 transition-all bg-white"
+                class="p-3 pl-10 transition-all"
                 class=(["font-bold"], move || selected.get())
             >
                 {text}
             </div>
-        </div>
+        </A>
     }
 }