Merge pull request #202 from brecert/hide-channels

src/components/navigation/LeftSidebar.tsx

@@ -4,27 +4,31 @@ import SidebarBase from "./SidebarBase";
 import HomeSidebar from "./left/HomeSidebar";
 import ServerListSidebar from "./left/ServerListSidebar";
 import ServerSidebar from "./left/ServerSidebar";
+import { useSelector } from "react-redux";
+import { State } from "../../redux";
 
 export default function LeftSidebar() {
+    const isOpen = useSelector((state: State) => state.sectionToggle['sidebar_channels'] ?? true)
+
     return (
         <SidebarBase>
             <Switch>
                 <Route path="/settings" />
                 <Route path="/server/:server/channel/:channel">
                     <ServerListSidebar />
-                    <ServerSidebar />
+                    {isOpen && <ServerSidebar />}
                 </Route>
                 <Route path="/server/:server">
                     <ServerListSidebar />
-                    <ServerSidebar />
+                    {isOpen && <ServerSidebar />}
                 </Route>
                 <Route path="/channel/:channel">
                     <ServerListSidebar />
-                    <HomeSidebar />
+                    {isOpen && <HomeSidebar />}
                 </Route>
                 <Route path="/">
                     <ServerListSidebar />
-                    <HomeSidebar />
+                    {isOpen && <HomeSidebar />}
                 </Route>
             </Switch>
         </SidebarBase>

src/pages/channels/Channel.tsx

@@ -49,10 +49,14 @@ export function Channel({ id }: { id: string }) {
 }
 
 const MEMBERS_SIDEBAR_KEY = "sidebar_members";
+const CHANNELS_SIDEBAR_KEY = "sidebar_channels";
 const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
     const [showMembers, setMembers] = useState(
         getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true,
     );
+    const [showChannels, setChannels] = useState(
+        getState().sectionToggle[CHANNELS_SIDEBAR_KEY] ?? true,
+    );
 
     const id = channel._id;
     return (
@@ -84,6 +88,26 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
                         });
                     }
                 }}
+                toggleChannelSidebar={() => {
+                    if (isTouchscreenDevice) {
+                        return
+                    }
+
+                    setChannels(!showChannels);
+
+                    if (showChannels) {
+                        dispatch({
+                            type: "SECTION_TOGGLE_SET",
+                            id: CHANNELS_SIDEBAR_KEY,
+                            state: false,
+                        });
+                    } else {
+                        dispatch({
+                            type: "SECTION_TOGGLE_UNSET",
+                            id: CHANNELS_SIDEBAR_KEY,
+                        });
+                    }
+                }}
             />
             <ChannelMain>
                 <ChannelContent>

src/pages/channels/ChannelHeader.tsx

@@ -3,7 +3,7 @@ import { Notepad, Group } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { Channel } from "revolt.js/dist/maps/Channels";
 import { User } from "revolt.js/dist/maps/Users";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
@@ -20,6 +20,7 @@ import HeaderActions from "./actions/HeaderActions";
 export interface ChannelHeaderProps {
     channel: Channel;
     toggleSidebar?: () => void;
+    toggleChannelSidebar?: () => void;
 }
 
 const Info = styled.div`
@@ -64,7 +65,18 @@ const Info = styled.div`
     }
 `;
 
-export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => {
+const IconConainer = styled.div`
+    cursor: pointer;
+    color: var(--secondary-foreground);
+
+    ${!isTouchscreenDevice && css`
+        &:hover {
+            color: var(--foreground);
+        }
+    `}
+`
+
+export default observer(({ channel, toggleSidebar, toggleChannelSidebar }: ChannelHeaderProps) => {
     const { openScreen } = useIntermediate();
 
     const name = getChannelName(channel);
@@ -88,7 +100,7 @@ export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => {
     return (
         <Header placement="primary">
             <HamburgerAction />
-            {icon}
+            <IconConainer onClick={toggleChannelSidebar}>{icon}</IconConainer>
             <Info>
                 <span className="name">{name}</span>
                 {isTouchscreenDevice &&

src/pages/home/Home.tsx

@@ -9,12 +9,54 @@ import Emoji from "../../components/common/Emoji";
 import Tooltip from "../../components/common/Tooltip";
 import Header from "../../components/ui/Header";
 import CategoryButton from "../../components/ui/fluent/CategoryButton";
+import { dispatch, getState } from "../../redux";
+import { useState } from "preact/hooks";
+import styled, { css } from "styled-components";
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+
+const CHANNELS_SIDEBAR_KEY = "sidebar_channels";
+
+const IconConainer = styled.div`
+    cursor: pointer;
+    color: var(--secondary-foreground);
+
+    ${!isTouchscreenDevice && css`
+        &:hover {
+            color: var(--foreground);
+        }
+    `}
+`
 
 export default function Home() {
+    const [showChannels, setChannels] = useState(
+        getState().sectionToggle[CHANNELS_SIDEBAR_KEY] ?? true,
+    );
+
+    const toggleChannelSidebar = () => {
+        if (isTouchscreenDevice) {
+            return
+        }
+
+        setChannels(!showChannels);
+
+        if (showChannels) {
+            dispatch({
+                type: "SECTION_TOGGLE_SET",
+                id: CHANNELS_SIDEBAR_KEY,
+                state: false,
+            });
+        } else {
+            dispatch({
+                type: "SECTION_TOGGLE_UNSET",
+                id: CHANNELS_SIDEBAR_KEY,
+            });
+        }
+    }
+
     return (
         <div className={styles.home}>
             <Header placement="primary">
-                <HomeIcon size={24} />
+                <IconConainer onClick={toggleChannelSidebar} ><HomeIcon size={24} /></IconConainer>
                 <Text id="app.navigation.tabs.home" />
             </Header>
             <h3>