From a46fbcf4093354c008f8d11cb397200588f7b193 Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Fri, 24 Dec 2021 13:06:52 +0000
Subject: [PATCH] feat(sidebar): change swoosh colour depending on sidebar
 collapse

---
 .../navigation/left/ServerListSidebar.tsx         | 15 ++++++++++++---
 src/pages/channels/Channel.tsx                    |  7 +++----
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/navigation/left/ServerListSidebar.tsx b/src/components/navigation/left/ServerListSidebar.tsx
index 40689779..f710de12 100644
--- a/src/components/navigation/left/ServerListSidebar.tsx
+++ b/src/components/navigation/left/ServerListSidebar.tsx
@@ -13,6 +13,7 @@ import PaintCounter from "../../../lib/PaintCounter";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 
 import { useApplicationState } from "../../../mobx/State";
+import { SIDEBAR_CHANNELS } from "../../../mobx/stores/Layout";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
@@ -168,6 +169,14 @@ const SettingsButton = styled.div`
 `;
 
 function Swoosh() {
+    const sidebarOpen = useApplicationState().layout.getSectionState(
+        SIDEBAR_CHANNELS,
+        true,
+    );
+    const fill = sidebarOpen
+        ? "var(--sidebar-active)"
+        : "var(--primary-background)";
+
     return (
         <span>
             <svg
@@ -177,15 +186,15 @@ function Swoosh() {
                 xmlns="http://www.w3.org/2000/svg">
                 <path
                     d="M54 53C54 67.9117 41.9117 80 27 80C12.0883 80 0 67.9117 0 53C0 38.0883 12.0883 26 27 26C41.9117 26 54 38.0883 54 53Z"
-                    fill="var(--sidebar-active)"
+                    fill={fill}
                 />
                 <path
                     d="M27 80C4.5 80 54 53 54 53L54.0001 106C54.0001 106 49.5 80 27 80Z"
-                    fill="var(--sidebar-active)"
+                    fill={fill}
                 />
                 <path
                     d="M27 26C4.5 26 54 53 54 53L53.9999 0C53.9999 0 49.5 26 27 26Z"
-                    fill="var(--sidebar-active)"
+                    fill={fill}
                 />
             </svg>
         </span>
diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx
index 8695f5c3..4364c206 100644
--- a/src/pages/channels/Channel.tsx
+++ b/src/pages/channels/Channel.tsx
@@ -20,7 +20,7 @@ import AgeGate from "../../components/common/AgeGate";
 import MessageBox from "../../components/common/messaging/MessageBox";
 import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
 import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
-import Header from "../../components/ui/Header";
+import Header, { PageHeader } from "../../components/ui/Header";
 
 import RightSidebar from "../../components/navigation/RightSidebar";
 import ChannelHeader from "./ChannelHeader";
@@ -145,12 +145,11 @@ function VoiceChannel({ channel }: { channel: ChannelI }) {
 function ChannelPlaceholder() {
     return (
         <PlaceholderBase>
-            <Header placement="primary">
-                <Hash size={24} />
+            <PageHeader icon={<Hash size={24} />}>
                 <span className="name">
                     <Text id="app.main.channel.errors.nochannel" />
                 </span>
-            </Header>
+            </PageHeader>
 
             <div className="placeholder">
                 <Ghost width={80} />