Handlers for UserShort.

View user's profile picture.
Close #25, adds logic to hamburger.

src/pages/channels/Channel.tsx

@@ -16,7 +16,7 @@ import MessageBox from "../../components/common/messaging/MessageBox";
 import JumpToBottom from "../../components/common/messaging/bars/JumpToBottom";
 import TypingIndicator from "../../components/common/messaging/bars/TypingIndicator";
 
-import MemberSidebar from "../../components/navigation/right/MemberSidebar";
+import RightSidebar from "../../components/navigation/RightSidebar";
 import ChannelHeader from "./ChannelHeader";
 import { MessageArea } from "./messaging/MessageArea";
 import VoiceHeader from "./voice/VoiceHeader";
@@ -93,9 +93,7 @@ const TextChannel = observer(({ channel }: { channel: ChannelI }) => {
                     <JumpToBottom channel={channel} />
                     <MessageBox channel={channel} />
                 </ChannelContent>
-                {!isTouchscreenDevice && showMembers && (
-                    <MemberSidebar channel={channel} />
-                )}
+                {!isTouchscreenDevice && showMembers && <RightSidebar />}
             </ChannelMain>
         </AgeGate>
     );

src/pages/channels/ChannelHeader.tsx

@@ -12,7 +12,7 @@ import { getChannelName } from "../../context/revoltjs/util";
 
 import { useStatusColour } from "../../components/common/user/UserIcon";
 import UserStatus from "../../components/common/user/UserStatus";
-import Header from "../../components/ui/Header";
+import Header, { HamburgerAction } from "../../components/ui/Header";
 
 import Markdown from "../../components/markdown/Markdown";
 import HeaderActions from "./actions/HeaderActions";
@@ -87,11 +87,7 @@ export default observer(({ channel, toggleSidebar }: ChannelHeaderProps) => {
 
     return (
         <Header placement="primary">
-            {isTouchscreenDevice && (
-                <div className="menu">
-                    <Menu size={27} />
-                </div>
-            )}
+            <HamburgerAction />
             {icon}
             <Info>
                 <span className="name">{name}</span>

src/pages/channels/actions/HeaderActions.tsx

@@ -8,6 +8,7 @@ import {
 } from "@styled-icons/boxicons-solid";
 import { useHistory } from "react-router-dom";
 
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState";
 
 import { useIntermediate } from "../../../context/intermediate/Intermediate";
@@ -24,6 +25,18 @@ export default function HeaderActions({
     const { openScreen } = useIntermediate();
     const history = useHistory();
 
+    function openSidebar() {
+        if (isTouchscreenDevice) {
+            const panels = document.querySelector("#app > div > div");
+            panels?.scrollTo({
+                behavior: "smooth",
+                left: panels.clientWidth * 3,
+            });
+        } else {
+            toggleSidebar?.();
+        }
+    }
+
     return (
         <>
             <UpdateIndicator style="channel" />
@@ -54,7 +67,7 @@ export default function HeaderActions({
             <VoiceActions channel={channel} />
             {(channel.channel_type === "Group" ||
                 channel.channel_type === "TextChannel") && (
-                <IconButton onClick={toggleSidebar}>
+                <IconButton onClick={openSidebar}>
                     <Group size={25} />
                 </IconButton>
             )}