Improve mobile layout with hamburger menus

web/src/components/Navbar.tsx

@@ -5,6 +5,7 @@ import { FiLogOut, FiUser } from 'react-icons/fi';
 import { SiEthereum } from 'react-icons/si';
 
 import { useAuth, useLogout } from '../api/auth';
+import { SidebarHamburger } from './layout/SidebarHamburger';
 import { LoginButton } from './LoginButton';
 
 export const Navbar: FC = () => {
@@ -29,6 +30,7 @@ export const Navbar: FC = () => {
         <>
             <div className="w-full bg-secondary fixed top-0 grid grid-cols-[1fr_auto_1fr] h-8 z-10">
                 <div className="flex items-stretch gap-2 h-full px-3">
+                    <SidebarHamburger />
                     <Link
                         to="/"
                         className="text-primary font-bold text-base hover:underline py-1 flex items-center gap-1"

web/src/components/Sidebar.tsx

@@ -1,4 +1,5 @@
 import { Link, useRouterState } from '@tanstack/react-router';
+import classNames from 'classnames';
 import { FiLock } from 'react-icons/fi';
 import { GrWorkshop } from 'react-icons/gr';
 import { SiOpenai } from 'react-icons/si';
@@ -8,12 +9,12 @@ import { ProseWidthSwitcher } from './preferences/ProseWidthSwitcher';
 import { ThemeSwitcher } from './preferences/ThemeSwitcher';
 import { WorkshopChatsNav } from './workshop/WorkshopChatsNav';
 
-export const Sidebar = () => {
+export const Sidebar = ({ className = '' }: { className?: string } = {}) => {
     const { pathname } = useRouterState({ select: (s) => s.location });
     const { isAuthenticated } = useAuth();
 
     return (
-        <div className="left-bar space-y-2">
+        <div className={classNames('left-bar space-y-2', className)}>
             <div className="flex flex-col justify-between h-full">
                 <nav className="w-full space-y-1.5 p-4">
                     <div className="px-1.5">

web/src/components/layout/RightbarHamburger.tsx

@@ -0,0 +1,37 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import classNames from 'classnames';
+import { ReactNode } from 'react';
+import { FiMenu } from 'react-icons/fi';
+import { LuX } from 'react-icons/lu';
+
+export const RightbarHamburger = ({
+    children,
+    triggerClassName = '',
+}: {
+    children: ReactNode;
+    triggerClassName?: string;
+}) => {
+    return (
+        <Dialog.Root>
+            <Dialog.Trigger asChild>
+                <button
+                    className={classNames(
+                        'md:hidden button aspect-square size-8 flex items-center justify-center',
+                        triggerClassName
+                    )}
+                >
+                    <FiMenu />
+                </button>
+            </Dialog.Trigger>
+            <Dialog.Portal>
+                <Dialog.Overlay className="fixed inset-0 bg-black/50 z-40 data-[state=open]:animate-overlayShow" />
+                <Dialog.Content className="fixed inset-y-0 right-0 w-64 max-w-full bg-primary p-4 overflow-y-auto z-50 data-[state=open]:animate-contentShow">
+                    {children}
+                    <Dialog.Close className="absolute top-2 right-2 rounded-md p-1 hover:bg-secondary">
+                        <LuX className="size-5" />
+                    </Dialog.Close>
+                </Dialog.Content>
+            </Dialog.Portal>
+        </Dialog.Root>
+    );
+};

web/src/components/layout/SidebarHamburger.tsx

@@ -0,0 +1,26 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { FiMenu } from 'react-icons/fi';
+import { LuX } from 'react-icons/lu';
+
+import { Sidebar } from '../Sidebar';
+
+export const SidebarHamburger = () => {
+    return (
+        <Dialog.Root>
+            <Dialog.Trigger asChild>
+                <button className="md:hidden button aspect-square size-8 flex items-center justify-center">
+                    <FiMenu />
+                </button>
+            </Dialog.Trigger>
+            <Dialog.Portal>
+                <Dialog.Overlay className="fixed inset-0 bg-black/50 z-40" />
+                <Dialog.Content className="fixed inset-y-0 left-0 w-full max-w-xl bg-primary overflow-y-auto z-50">
+                    <Sidebar />
+                    <Dialog.Close className="absolute top-2 right-2 rounded-md p-1 hover:bg-secondary">
+                        <LuX className="size-5" />
+                    </Dialog.Close>
+                </Dialog.Content>
+            </Dialog.Portal>
+        </Dialog.Root>
+    );
+};

web/src/routes/__root.tsx

@@ -16,7 +16,7 @@ function RootComponent() {
             <CommandMenu />
             <Navbar />
             <div className="flex flex-col gap-1 pb-16 max-w-screen">
-                <Sidebar />
+                <Sidebar className="hidden md:block" />
                 <Outlet />
             </div>
             <Toaster

web/src/routes/chat/$chatId.tsx

@@ -10,6 +10,7 @@ import {
     WorkshopMessage,
 } from '@/api/workshop';
 import { WorkshopAuthGuard } from '@/components/AuthGuard';
+import { RightbarHamburger } from '@/components/layout/RightbarHamburger';
 import { UpDownScroller } from '@/components/UpDown';
 import { ChatMessage } from '@/components/workshop/ChatMessage';
 import { ConversationGraph } from '@/components/workshop/ConversationGraph';
@@ -76,6 +77,14 @@ const ChatWithSidebar = ({ chatId }: { chatId: string }) => {
         return buildMessageTree(chat?.messages || []);
     }, [chat?.messages]);
 
+    useEffect(() => {
+        document.documentElement.classList.add('prose-page');
+
+        return () => {
+            document.documentElement.classList.remove('prose-page');
+        };
+    }, []);
+
     // Initialize path based on last_message_id when chat data changes
     useEffect(() => {
         if (chat?.chat?.last_message_id && messageMap.size > 0) {
@@ -127,13 +136,22 @@ const ChatWithSidebar = ({ chatId }: { chatId: string }) => {
         <>
             {/* Right Sidebar */}
             {chat?.messages && chat.messages.length > 0 && useTreeView && (
-                <div className="right-bar p-4">
-                    <ConversationGraph
-                        rootNodes={rootNodes}
-                        visibleMessages={visibleMessages}
-                        messageMap={messageMap}
-                    />
-                </div>
+                <>
+                    <div className="right-bar p-4 hidden md:block">
+                        <ConversationGraph
+                            rootNodes={rootNodes}
+                            visibleMessages={visibleMessages}
+                            messageMap={messageMap}
+                        />
+                    </div>
+                    <RightbarHamburger triggerClassName="fixed top-10 right-2 z-10 md:hidden">
+                        <ConversationGraph
+                            rootNodes={rootNodes}
+                            visibleMessages={visibleMessages}
+                            messageMap={messageMap}
+                        />
+                    </RightbarHamburger>
+                </>
             )}
 
             {/* Main Chat */}
@@ -288,7 +306,7 @@ const Chat = ({
                                               />
                                           ))}
                                 </div>
-                                <div className="w-full fixed max-w-screen-lg bottom-0 inset-x-0 mx-auto">
+                                <div className="w-full fixed prose-width bottom-0 inset-x-0 mx-auto">
                                     <InputBox
                                         input={input}
                                         setInput={setInput}
@@ -297,7 +315,7 @@ const Chat = ({
                                         editingMessage={editingMessage}
                                         onCancelEdit={cancelEdit}
                                     />
-                                    <div className="text-center text-sm py-1">
+                                    <div className="text-center text-sm py-1 hidden sm:block">
                                         This is a demo. Check important info.
                                     </div>
                                 </div>
@@ -322,7 +340,7 @@ const Chat = ({
                                             ))}
                                         </div>
                                     )}
-                                    <div className="w-full max-w-screen-md mx-auto">
+                                    <div className="prose-width mx-auto">
                                         <InputBox
                                             input={input}
                                             setInput={setInput}

web/src/routes/index.tsx

@@ -2,6 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { LuBook, LuGithub, LuWandSparkles } from 'react-icons/lu';
 
 import { ProtocolAgendaUpcoming } from '@/components/agenda/Upcoming';
+import { RightbarHamburger } from '@/components/layout/RightbarHamburger';
 import { TopicList } from '@/components/topic/TopicList';
 import { TopicsTrending } from '@/components/topic/TopicsTrending';
 
@@ -12,9 +13,12 @@ export const Route = createFileRoute('/')({
 function RouteComponent() {
     return (
         <>
-            <div className="right-bar p-4">
+            <div className="right-bar p-4 hidden md:block">
                 <ProtocolAgendaUpcoming />
             </div>
+            <RightbarHamburger triggerClassName="fixed top-10 right-2 z-10 md:hidden">
+                <ProtocolAgendaUpcoming />
+            </RightbarHamburger>
             <div className="mx-auto w-full max-w-screen-lg pt-8 px-2 space-y-4">
                 <div className="space-y-4 mx-auto">
                     <div className="card flex-1 flex flex-col gap-1 h-fit col-span-full w-full">