Handlers for UserShort.

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

src/components/common/user/UserShort.tsx

@@ -4,6 +4,7 @@ import { User } from "revolt.js/dist/maps/Users";
 
 import { Text } from "preact-i18n";
 
+import { useIntermediate } from "../../../context/intermediate/Intermediate";
 import { useClient } from "../../../context/revoltjs/RevoltClient";
 
 import UserIcon from "./UserIcon";
@@ -67,14 +68,23 @@ export default function UserShort({
     size?: number;
     showServerIdentity?: boolean;
 }) {
+    const { openScreen } = useIntermediate();
+    const openProfile = () =>
+        user && openScreen({ id: "profile", user_id: user._id });
+
     return (
         <>
             <UserIcon
                 size={size ?? 24}
                 target={user}
+                onClick={openProfile}
                 showServerIdentity={showServerIdentity}
             />
-            <Username user={user} showServerIdentity={showServerIdentity} />
+            <Username
+                user={user}
+                showServerIdentity={showServerIdentity}
+                onClick={openProfile}
+            />
         </>
     );
 }

src/components/navigation/right/Search.tsx

@@ -0,0 +1,12 @@
+/*export const SearchSidebar = observer(
+    ({ channel }: { channel: Channel }) => {
+        const keys = [...channel.recipient_ids!];
+        const entries = useEntries(channel, keys);
+
+        return (
+            <GenericSidebarBase>
+                <MemberList entries={entries} context={channel} />
+            </GenericSidebarBase>
+        );
+    },
+);*/

src/components/ui/Header.tsx

@@ -1,5 +1,8 @@
+import { Menu } from "@styled-icons/boxicons-regular";
 import styled, { css } from "styled-components";
 
+import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
+
 interface Props {
     borders?: boolean;
     background?: boolean;
@@ -60,3 +63,19 @@ export default styled.div<Props>`
             border-start-start-radius: 8px;
         `}
 `;
+
+export function HamburgerAction() {
+    if (!isTouchscreenDevice) return null;
+
+    function openSidebar() {
+        document
+            .querySelector("#app > div > div")
+            ?.scrollTo({ behavior: "smooth", left: 0 });
+    }
+
+    return (
+        <div className="menu" onClick={openSidebar}>
+            <Menu size={27} />
+        </div>
+    );
+}