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)}