From 0f72f1246188a56228c7d923e96ca5d8c6c35360 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Tue, 29 Jul 2025 18:03:00 +0200
Subject: [PATCH] ui/sidebar: fix close animation

Animation needs static layout as a starting point
---
 .../clan-app/ui/src/components/Sidebar/SidebarPane.css |  4 ++++
 .../clan-app/ui/src/components/Sidebar/SidebarPane.tsx | 10 ++++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css
index bfdb7ef39..d1a62ed42 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css
@@ -3,6 +3,10 @@ div.sidebar-pane {
 
   animation: sidebarPaneShow 250ms ease-in forwards;
 
+  &.open {
+    @apply w-60;
+  }
+
   &.closing {
     animation: sidebarPaneHide 250ms ease-out 300ms forwards;
 
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.tsx
index f80863c3b..f43b3c433 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.tsx
@@ -1,4 +1,4 @@
-import { createSignal, JSX } from "solid-js";
+import { createSignal, JSX, onMount } from "solid-js";
 import "./SidebarPane.css";
 import { Typography } from "@/src/components/Typography/Typography";
 import Icon from "../Icon/Icon";
@@ -13,14 +13,20 @@ export interface SidebarPaneProps {
 
 export const SidebarPane = (props: SidebarPaneProps) => {
   const [closing, setClosing] = createSignal(false);
+  const [open, setOpened] = createSignal(true);
 
   const onClose = () => {
     setClosing(true);
     setTimeout(() => props.onClose(), 550);
   };
+  onMount(() => {
+    setTimeout(() => {
+      setOpened(true);
+    }, 250);
+  });
 
   return (
-    <div class={cx("sidebar-pane", { closing: closing() })}>
+    <div class={cx("sidebar-pane", { closing: closing(), open: open() })}>
       <div class="header">
         <Typography hierarchy="body" size="s" weight="bold" inverted={true}>
           {props.title}