Toggle-able sidebar

src/app/chat/[id]/page.tsx

@@ -9,9 +9,6 @@ import { StringMap } from "@/types/typeUtils";
 import { useParams } from "next/navigation";
 import { useMessages } from "@/hooks/use-messages";
 
-// In this testing instance we are assuming that the target's node is localhost
-// To make this functional we need to add a settings feature to the api
-
 export default function DMs() {
   const { id } = useParams<{ id: string }>();
   const wsRef = useRef<WebSocket | null>(null);
@@ -19,9 +16,12 @@ export default function DMs() {
   const addMessage = useMessages((s) => s.addMessage);
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
   const [user, setUser] = useState<UserProfile | undefined>();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
     <AppSidebar
+      open={sidebarOpen}
+      setOpen={setSidebarOpen}
       addMessage={addMessage}
       wsRef={wsRef}
       userList={userList}
@@ -31,6 +31,7 @@ export default function DMs() {
       messages={messages}
     >
       <MessageBox
+        toggleSidebar={() => setSidebarOpen(true)}
         channelName={userList[id]?.display_name || id}
         userList={userList}
         setUserList={setUserList}

src/app/chat/page.tsx

@@ -14,9 +14,12 @@ export default function Chat() {
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
   const messages = useMessages((s) => s.messages);
   const addMessage = useMessages((s) => s.addMessage);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   return (
     <AppSidebar
+      open={sidebarOpen}
+      setOpen={setSidebarOpen}
       wsRef={wsRef}
       userList={userList}
       setUserList={setUserList}

src/app/server/[ip]/page.tsx

@@ -18,6 +18,7 @@ export default function Server() {
   const [userList, setUserList] = useState<StringMap<UserProfile>>({});
   const messages = useMessages((s) => s.messages);
   const addMessage = useMessages((s) => s.addMessage);
+  const [sidebarOpen, setSidebarOpen] = useState(false);
 
   useEffect(() => {
     if (!ip) return;
@@ -26,6 +27,8 @@ export default function Server() {
 
   return (
     <AppSidebar
+      open={sidebarOpen}
+      setOpen={setSidebarOpen}
       wsRef={wsNodeRef}
       addMessage={() => {}}
       userList={userList}
@@ -33,6 +36,7 @@ export default function Server() {
       server={server}
     >
       <MessageBox
+        toggleSidebar={() => setSidebarOpen(true)}
         channelName="General"
         userList={userList}
         setUserList={setUserList}

src/components/MessageBox.tsx

@@ -10,7 +10,7 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from "./ui/dropdown-menu";
-import { SmilePlusIcon } from "lucide-react";
+import { ChevronLeft, ChevronLeftIcon, SmilePlusIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { format, isToday, isYesterday } from "date-fns";
 import ReactMarkdown from "react-markdown";
@@ -144,12 +144,14 @@ export default function MessageBox({
   setUserList,
   sendMessage,
   channelName,
+  toggleSidebar,
 }: {
   messages: Message[];
   userList: NumberMap<UserProfile>;
   setUserList: React.Dispatch<React.SetStateAction<NumberMap<UserProfile>>>;
   sendMessage: (m: string) => void;
   channelName?: string;
+  toggleSidebar: () => void;
 }) {
   const [text, setText] = useState("");
 
@@ -157,7 +159,10 @@ export default function MessageBox({
     <div className="h-screen w-full flex flex-col pb-5 pl-5 gap-5">
       {channelName && (
         <header className="h-12 py-4 flex items-center border-b text-sm font-semibold">
+          <span onClick={toggleSidebar} className="cursor-pointer flex">
+            <ChevronLeftIcon className="w-5 h-5" />
             {channelName}
+          </span>
         </header>
       )}
       <div className="w-full flex-1 overflow-y-scroll flex gap-2 flex-col-reverse pr-5">

src/components/Sidebar.tsx

@@ -35,6 +35,7 @@ import SettingsDialog from "./settings/SettingsDialog";
 import Link from "next/link";
 import axios from "axios";
 import { get, Response } from "@/lib/request";
+import { cn } from "@/lib/utils";
 
 export default function AppSidebar({
   children,
@@ -45,6 +46,8 @@ export default function AppSidebar({
   server,
   messages,
   addMessage,
+  open,
+  setOpen,
 }: Readonly<{
   wsRef: React.RefObject<WebSocket | null>;
   addMessage: (msg: Message) => void;
@@ -56,6 +59,8 @@ export default function AppSidebar({
   children?: React.ReactNode;
   setUser?: React.Dispatch<React.SetStateAction<UserProfile | undefined>>;
   server?: Server | undefined;
+  open: boolean;
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }>) {
   const [servers, setServers] = useState<[string, string][]>([]);
   const [newServer, setNewServer] = useState({ name: "", ip: "" });
@@ -123,7 +128,28 @@ export default function AppSidebar({
 
   return (
     <div className="flex h-screen">
-      <div className="h-screen flex border-r">
+      {open && (
+        <div
+          className="absolute h-screen w-screen"
+          onClick={() => setOpen(false)}
+        />
+      )}
+      {/* <div
+        className={cn(
+          "flex h-screen border-r absolute md:static z-50 transform transition-transform duration-300 ease-in-out",
+          open ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0",
+          "md:static md:translate-x-0 md:opacity-100 pointer-events-none"
+        )}
+      > */}
+      <div
+        className={cn(
+          "flex h-screen border-r transform transition-transform duration-300 ease-in-out",
+          open
+            ? "translate-x-0 opacity-100"
+            : "-translate-x-full opacity-0 absolute",
+          "md:static md:translate-x-0 md:opacity-100 pointer-events-none"
+        )}
+      >
         <div className="w-16 flex flex-col items-center gap-4 py-4 bg-muted border-r">
           <Button
             onClick={() => router.push(`/chat`)}
@@ -265,9 +291,16 @@ export default function AppSidebar({
           </footer>
         </div>
       </div>
-
+      {open ? (
+        <div className="w-screen h-full overflow-x-hidden">
+          <div className="overflow-x-hidden w-screen min-w-max flex-shrink-0">
             {children}
           </div>
+        </div>
+      ) : (
+        children
+      )}
+    </div>
   );
 }