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};
@@ -87,35 +85,35 @@ fn SidebarTab(
         // There's extra logic here as well, but for now this works.
         current_path.starts_with(&path.get())
     });
-
+    
     view! {
-        <A href=move || path.get()>
+        <div 
-            <div
+            class="transition-all duration-300"
-                class="p-3 transition-all font-bold"
+            class=(["bg-transparent", "text-white"], move || !selected.get())
-                class=(["bg-transparent", "text-white"], move || !selected.get())
+            class=(["bg-white", "text-black"], move || selected.get())
-                class=(["bg-white", "text-black"], move || selected.get())
-            >
-                {text}
-            </div>
-        </A>
-        <For
-            each=move || sub_paths.get()
-            key=|info| info.text.clone()
-            let(SubTabInfo { text, path })
         >
-            <SidebarSubTab
+            <A href=move || path.get()>
-                use:animate=(
+                <div
-                    In::default()
+                    class="p-3 transition-bg font-bold"
-                    .source("h-0")
+                >
-                        .target("h-auto")
+                    {text}
-                        .active("transition-all"),
+                </div>
-                    Out::default()
+            </A>
-                        .source("h-auto")
+            <div
-                        .target("h-0")
+                class="grid transition-all ease-in-out"
-                        .active("transition-all")
+                style:grid-template-rows=move || if selected.get() { "1fr" } else { "0fr" }
-                )
+            >
-                text=text path=path visible=selected />
+                <div class="overflow-hidden min-h-0">
-        </For>
+                    <For
+                        each=move || sub_paths.get()
+                        key=|info| info.text.clone()
+                        let(SubTabInfo { text, path })
+                    >
+                        <SidebarSubTab 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>
     }
 }