From cebffc6870e410dd9874bc7d3219545ccc523fa3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lucas=20Gon=C3=A7alves=20Marchi?= <lucasgmarchi@gmail.com>
Date: Tue, 10 Dec 2024 19:08:48 -0300
Subject: [PATCH] feat(App): Improve sidebar animation (#925)

---
 src/lib/components/ui/Modal.svelte |  2 +-
 src/lib/globals/animations.ts      |  1 +
 src/lib/layouts/Sidebar.svelte     | 24 +++++++++++++++++++-----
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ui/Modal.svelte b/src/lib/components/ui/Modal.svelte
index daa376379..fd6fa903f 100644
--- a/src/lib/components/ui/Modal.svelte
+++ b/src/lib/components/ui/Modal.svelte
@@ -62,7 +62,7 @@
         align-items: center;
         gap: var(--gap);
         position: fixed;
-        z-index: 4;
+        z-index: 10;
         top: 0;
         left: 0;
         bottom: 0;
diff --git a/src/lib/globals/animations.ts b/src/lib/globals/animations.ts
index 9f6f8615d..c6340f5d9 100644
--- a/src/lib/globals/animations.ts
+++ b/src/lib/globals/animations.ts
@@ -1,2 +1,3 @@
 export let animationDuration: number = 100
 export let animationDelay: number = 75
+export let sidebarSlideDuration: number = 250
diff --git a/src/lib/layouts/Sidebar.svelte b/src/lib/layouts/Sidebar.svelte
index 6b781a2c1..5b986441f 100644
--- a/src/lib/layouts/Sidebar.svelte
+++ b/src/lib/layouts/Sidebar.svelte
@@ -6,7 +6,6 @@
     import { Appearance, Route, Shape } from "$lib/enums"
     import { createEventDispatcher } from "svelte"
     import { goto } from "$app/navigation"
-
     import { _ } from "svelte-i18n"
     import { get } from "svelte/store"
     import { Store } from "$lib/state/Store"
@@ -15,6 +14,8 @@
     import WidgetBar from "$lib/components/widgets/WidgetBar.svelte"
     import { SettingsStore, type ISettingsState } from "$lib/state"
     import { isAndroidOriOS } from "$lib/utils/Mobile"
+    import { slide } from "svelte/transition"
+    import { sidebarSlideDuration } from "$lib/globals/animations"
 
     export let activeRoute: Route = Route.Chat
     export let open: boolean = true
@@ -47,7 +48,7 @@
     <Slimbar sidebarOpen={open} on:toggle={handleToggle} activeRoute={activeRoute}></Slimbar>
 
     {#if open}
-        <div class="sidebar">
+        <div class="sidebar" in:slide={{ duration: sidebarSlideDuration, axis: "x" }} out:slide={{ duration: sidebarSlideDuration, axis: "x" }}>
             <div class="sidebar-pre">
                 <Input hook="input-sidebar-search" alt autoFocus={false} placeholder={$_("generic.search_placeholder")} bind:value={search} on:enter={handleEnter} on:input={handleSearch}>
                     <Icon icon={Shape.Search} />
@@ -91,6 +92,12 @@
 
 <style lang="scss">
     .sidebar-layout {
+        top: 0;
+        left: 0;
+        z-index: 5;
+        height: 100%;
+        background-color: var(--background);
+        opacity: 1;
         width: fit-content;
         display: inline-flex;
         flex-direction: row;
@@ -128,18 +135,25 @@
 
     @media (max-width: 800px) {
         .sidebar-layout {
+            position: absolute;
             width: 100vw;
             overflow: hidden;
+            opacity: 1;
+            transition:
+                transform 0.3s ease,
+                opacity 0.3s ease;
 
             .sidebar {
                 min-width: 0;
             }
         }
+
         .sidebar-layout.closed {
-            min-width: 0;
-            width: 0;
+            transform: translateX(-100%);
+            pointer-events: none;
             :global(.slimbar) {
-                display: none;
+                opacity: 0;
+                pointer-events: none;
             }
         }
     }