From 537036e8bb8bbd78e23ca7ca6bdc8ffba5a1bd8f Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sun, 28 Aug 2022 16:02:51 +0300
Subject: [PATCH] apply transitions to sidebars on large viewports

---
 frontend/src/components/PresenceSidebar.svelte | 4 ++--
 frontend/src/components/Sidebar.svelte         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/PresenceSidebar.svelte b/frontend/src/components/PresenceSidebar.svelte
index c17d3ea..b4fbb46 100644
--- a/frontend/src/components/PresenceSidebar.svelte
+++ b/frontend/src/components/PresenceSidebar.svelte
@@ -1,7 +1,7 @@
 <script>
     import { ArrowLeftIcon, AtSignIcon } from "svelte-feather-icons";
     import { quadInOut } from "svelte/easing";
-    import { maybeFly } from "../animations";
+    import { maybeFly, maybeFlyIf } from "../animations";
     import { presenceStore, showChannelView, showPresenceSidebar, smallViewport } from "../stores";
 
     let pendingExit = false;
@@ -11,7 +11,7 @@
     };
 </script>
 
-<div class="sidebar-container" in:maybeFly="{{ duration: 175, easing: quadInOut, x: 10 }}">
+<div class="sidebar-container" in:maybeFly="{{ duration: 175, easing: quadInOut, x: 10 }}" out:maybeFlyIf="{{ _condition: !smallViewport.value, duration: 175, easing: quadInOut, x: -10 }}">
     <div class="top-bar">
         <span class="input-label">User List</span>
     </div>
diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
index be1f845..9b6836a 100644
--- a/frontend/src/components/Sidebar.svelte
+++ b/frontend/src/components/Sidebar.svelte
@@ -1,7 +1,7 @@
 <script>
     import { HashIcon, PlusIcon, MoreVerticalIcon, SettingsIcon, CloudIcon } from "svelte-feather-icons";
     import { quadInOut } from "svelte/easing";
-    import { maybeFly } from "../animations";
+    import { maybeFly, maybeFlyIf } from "../animations";
     import { channels, gatewayStatus, overlayStore, selectedChannel, showChannelView, showSidebar, smallViewport, userInfoStore } from "../stores";
     import UserTopBar from "./UserTopBar.svelte";
 
@@ -14,7 +14,7 @@
     }
 </script>
 
-<div class="sidebar-container" in:maybeFly="{{ duration: 175, easing: quadInOut, x: -10 }}">
+<div class="sidebar-container" in:maybeFly="{{ duration: 175, easing: quadInOut, x: -10 }}" out:maybeFlyIf="{{ _condition: !smallViewport.value, duration: 175, easing: quadInOut, x: -10 }}">
     <UserTopBar />
     <div class="sidebar">
         {#each $channels as channel (channel.id)}