feat(header): add chevron / unified sidebar collapse

src/components/navigation/LeftSidebar.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react-lite";
 import { Route, Switch } from "react-router";
 
 import { useApplicationState } from "../../mobx/State";
@@ -8,7 +9,7 @@ import HomeSidebar from "./left/HomeSidebar";
 import ServerListSidebar from "./left/ServerListSidebar";
 import ServerSidebar from "./left/ServerSidebar";
 
-export default function LeftSidebar() {
+export default observer(() => {
     const layout = useApplicationState().layout;
     const isOpen = layout.getSectionState(SIDEBAR_CHANNELS, true);
 
@@ -35,4 +36,4 @@ export default function LeftSidebar() {
             </Switch>
         </SidebarBase>
     );
-}
+});

src/components/ui/Header.tsx

@@ -1,15 +1,25 @@
-import { Menu } from "@styled-icons/boxicons-regular";
+import {
+    ChevronLeft,
+    ChevronRight,
+    Menu,
+} from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
 import styled, { css } from "styled-components";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
+import { useApplicationState } from "../../mobx/State";
+import { SIDEBAR_CHANNELS } from "../../mobx/stores/Layout";
+
+import { Children } from "../../types/Preact";
+
 interface Props {
     borders?: boolean;
     background?: boolean;
     placement: "primary" | "secondary";
 }
 
-export default styled.div<Props>`
+const Header = styled.div<Props>`
     gap: 10px;
     height: 48px;
     flex: 0 auto;
@@ -33,10 +43,6 @@ export default styled.div<Props>`
         color: var(--secondary-foreground);
     }
 
-    /*@media only screen and (max-width: 768px) {
-        padding: 0 12px;
-    }*/
-
     ${() =>
         isTouchscreenDevice &&
         css`
@@ -66,6 +72,60 @@ export default styled.div<Props>`
         `}
 `;
 
+export default Header;
+
+const IconContainer = styled.div`
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: var(--secondary-foreground);
+    margin-right: 5px;
+
+    > svg {
+        margin-right: -5px;
+    }
+
+    ${!isTouchscreenDevice &&
+    css`
+        &:hover {
+            color: var(--foreground);
+        }
+    `}
+`;
+
+interface PageHeaderProps {
+    noBurger?: boolean;
+    children: Children;
+    icon: Children;
+}
+
+export const PageHeader = observer(
+    ({ children, icon, noBurger }: PageHeaderProps) => {
+        const layout = useApplicationState().layout;
+
+        return (
+            <Header placement="primary">
+                {!noBurger && <HamburgerAction />}
+                <IconContainer
+                    onClick={() =>
+                        layout.toggleSectionState(SIDEBAR_CHANNELS, true)
+                    }>
+                    {!isTouchscreenDevice &&
+                        layout.getSectionState(SIDEBAR_CHANNELS, true) && (
+                            <ChevronLeft size={18} />
+                        )}
+                    {icon}
+                    {!isTouchscreenDevice &&
+                        !layout.getSectionState(SIDEBAR_CHANNELS, true) && (
+                            <ChevronRight size={18} />
+                        )}
+                </IconContainer>
+                {children}
+            </Header>
+        );
+    },
+);
+
 export function HamburgerAction() {
     if (!isTouchscreenDevice) return null;