apply transitions to sidebars on large viewports

frontend/public/global.css

@@ -12,7 +12,7 @@
 /* top-level */
 
 :root {
-	--background-color-0: hsl(180, 11%, 6%);
+	--background-color-0: hsl(180, 11%, 5%);
 	--background-color-1: hsl(180, 11%, 7%);
 	--background-color-2: hsl(180, 11%, 10%);
 	--background-color-3: hsl(180, 11%, 13%);

frontend/src/animations.js

@@ -13,9 +13,27 @@ export function maybeModalFly(node) {
 export function maybeFly(...e) {
     if (getItem("ui:doAnimations"))
         return fly(...e);
+    else
+        return fly(e[0], { duration: 0 });
 }
 
 export function maybeFade(...e) {
     if (getItem("ui:doAnimations"))
         return fade(...e);
+    else
+        return fade(e[0], { duration: 0 });
+}
+
+export function maybeFlyIf(...e) {
+    if (getItem("ui:doAnimations") && e[1] && e[1]._condition)
+        return fly(...e);
+    else
+        return fly(e[0], { duration: 0 });
+}
+
+export function maybeFadeIf(...e) {
+    if (getItem("ui:doAnimations") && e[1] && e[1]._condition)
+        return fade(...e);
+    else
+        return fade(e[0], { duration: 0 });
 }

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>

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