Merge pull request 'feat(ui): animate sidebar pane entry/exit' (#4482) from ui/sidebar-pane-animation into main

Reviewed-on: https://git.clan.lol/clan/clan-core/pulls/4482

pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.css

@@ -1,5 +1,16 @@
 div.sidebar-pane {
-  @apply w-full max-w-60 border-none z-10;
+  @apply border-none z-10;
+
+  animation: sidebarPaneShow 250ms ease-in forwards;
+
+  &.closing {
+    animation: sidebarPaneHide 250ms ease-out 300ms forwards;
+
+    & > div.header > *,
+    & > div.body > * {
+      animation: sidebarFadeOut 250ms ease-out forwards;
+    }
+  }
 
   & > div.header {
     @apply flex items-center justify-between px-3 py-2 rounded-t-[0.5rem];
@@ -7,11 +18,17 @@ div.sidebar-pane {
         border-r-[1px] border-r-bg-inv-3
         border-b-2 border-b-bg-inv-4
         border-l-[1px] border-l-bg-inv-3;
+
     background: linear-gradient(
       90deg,
       theme(colors.bg.inv.3) 0%,
       theme(colors.bg.inv.4) 100%
     );
+
+    & > * {
+      @apply opacity-0;
+      animation: sidebarFadeIn 250ms ease-in 250ms forwards;
+    }
   }
 
   & > div.body {
@@ -29,5 +46,54 @@ div.sidebar-pane {
         theme(colors.bg.inv.2) 0%,
         theme(colors.bg.inv.3) 100%
       );
+
+    & > * {
+      @apply opacity-0;
+      animation: sidebarFadeIn 250ms ease-in 350ms forwards;
+    }
+  }
+}
+
+@keyframes sidebarPaneShow {
+  0% {
+    @apply w-0;
+    @apply opacity-0;
+  }
+  10% {
+    @apply w-8;
+  }
+  30% {
+    @apply opacity-100;
+  }
+  100% {
+    @apply w-60;
+  }
+}
+
+@keyframes sidebarPaneHide {
+  90% {
+    @apply w-8;
+  }
+  100% {
+    @apply w-0;
+    @apply opacity-0;
+  }
+}
+
+@keyframes sidebarFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes sidebarFadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
   }
 }

pkgs/clan-app/ui/src/components/Sidebar/SidebarPane.tsx

@@ -1,8 +1,9 @@
-import { JSX } from "solid-js";
+import { createSignal, JSX } from "solid-js";
 import "./SidebarPane.css";
 import { Typography } from "@/src/components/Typography/Typography";
 import Icon from "../Icon/Icon";
 import { Button as KButton } from "@kobalte/core/button";
+import cx from "classnames";
 
 export interface SidebarPaneProps {
   title: string;
@@ -11,13 +12,20 @@ export interface SidebarPaneProps {
 }
 
 export const SidebarPane = (props: SidebarPaneProps) => {
+  const [closing, setClosing] = createSignal(false);
+
+  const onClose = () => {
+    setClosing(true);
+    setTimeout(() => props.onClose(), 550);
+  };
+
   return (
-    <div class="sidebar-pane">
+    <div class={cx("sidebar-pane", { closing: closing() })}>
       <div class="header">
         <Typography hierarchy="body" size="s" weight="bold" inverted={true}>
           {props.title}
         </Typography>
-        <KButton onClick={props.onClose}>
+        <KButton onClick={onClose}>
           <Icon icon="Close" color="primary" size="0.75rem" inverted={true} />
         </KButton>
       </div>