From ed2f8be81045c0c5fef118b097bb8515215a2693 Mon Sep 17 00:00:00 2001
From: Luc van Kampen <luc@lucemans.nl>
Date: Sun, 8 Jun 2025 01:05:46 +0200
Subject: [PATCH 1/4] Add mobile hamburger menus

---
 web/src/components/Navbar.tsx                 |  2 ++
 web/src/components/Sidebar.tsx                |  6 +++--
 .../components/layout/RightbarHamburger.tsx   | 25 ++++++++++++++++++
 .../components/layout/SidebarHamburger.tsx    | 25 ++++++++++++++++++
 web/src/routes/__root.tsx                     |  2 +-
 web/src/routes/chat/$chatId.tsx               | 26 +++++++++++++------
 web/src/routes/index.tsx                      |  8 +++---
 7 files changed, 80 insertions(+), 14 deletions(-)
 create mode 100644 web/src/components/layout/RightbarHamburger.tsx
 create mode 100644 web/src/components/layout/SidebarHamburger.tsx

diff --git a/web/src/components/Navbar.tsx b/web/src/components/Navbar.tsx
index 34efedf..061e794 100644
--- a/web/src/components/Navbar.tsx
+++ b/web/src/components/Navbar.tsx
@@ -6,6 +6,7 @@ import { SiEthereum } from 'react-icons/si';
 
 import { useAuth, useLogout } from '../api/auth';
 import { LoginButton } from './LoginButton';
+import { SidebarHamburger } from './layout/SidebarHamburger';
 
 export const Navbar: FC = () => {
     const data = useMatches();
@@ -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"
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index 4465724..6897cd4 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -8,12 +8,14 @@ import { ProseWidthSwitcher } from './preferences/ProseWidthSwitcher';
 import { ThemeSwitcher } from './preferences/ThemeSwitcher';
 import { WorkshopChatsNav } from './workshop/WorkshopChatsNav';
 
-export const Sidebar = () => {
+import classNames from 'classnames';
+
+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">
diff --git a/web/src/components/layout/RightbarHamburger.tsx b/web/src/components/layout/RightbarHamburger.tsx
new file mode 100644
index 0000000..06b993b
--- /dev/null
+++ b/web/src/components/layout/RightbarHamburger.tsx
@@ -0,0 +1,25 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { FiMenu } from 'react-icons/fi';
+import { LuX } from 'react-icons/lu';
+import { ReactNode } from 'react';
+
+export const RightbarHamburger = ({ children }: { children: ReactNode }) => {
+    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 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>
+    );
+};
diff --git a/web/src/components/layout/SidebarHamburger.tsx b/web/src/components/layout/SidebarHamburger.tsx
new file mode 100644
index 0000000..46d992f
--- /dev/null
+++ b/web/src/components/layout/SidebarHamburger.tsx
@@ -0,0 +1,25 @@
+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 data-[state=open]:animate-overlayShow" />
+                <Dialog.Content className="fixed inset-y-0 left-0 w-64 max-w-full bg-primary p-4 overflow-y-auto z-50 data-[state=open]:animate-contentShow">
+                    <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>
+    );
+};
diff --git a/web/src/routes/__root.tsx b/web/src/routes/__root.tsx
index e1e1144..8d73e80 100644
--- a/web/src/routes/__root.tsx
+++ b/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
diff --git a/web/src/routes/chat/$chatId.tsx b/web/src/routes/chat/$chatId.tsx
index c4453e6..0e25488 100644
--- a/web/src/routes/chat/$chatId.tsx
+++ b/web/src/routes/chat/$chatId.tsx
@@ -13,6 +13,7 @@ import { WorkshopAuthGuard } from '@/components/AuthGuard';
 import { UpDownScroller } from '@/components/UpDown';
 import { ChatMessage } from '@/components/workshop/ChatMessage';
 import { ConversationGraph } from '@/components/workshop/ConversationGraph';
+import { RightbarHamburger } from '@/components/layout/RightbarHamburger';
 import { queryClient } from '@/util/query';
 import {
     buildMessageTree,
@@ -127,13 +128,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>
+                <>
+                    <RightbarHamburger>
+                        <ConversationGraph
+                            rootNodes={rootNodes}
+                            visibleMessages={visibleMessages}
+                            messageMap={messageMap}
+                        />
+                    </RightbarHamburger>
+                    <div className="right-bar p-4 hidden md:block">
+                        <ConversationGraph
+                            rootNodes={rootNodes}
+                            visibleMessages={visibleMessages}
+                            messageMap={messageMap}
+                        />
+                    </div>
+                </>
             )}
 
             {/* Main Chat */}
@@ -297,7 +307,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>
diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx
index ae05588..0b5b158 100644
--- a/web/src/routes/index.tsx
+++ b/web/src/routes/index.tsx
@@ -4,17 +4,19 @@ import { LuBook, LuGithub, LuWandSparkles } from 'react-icons/lu';
 import { ProtocolAgendaUpcoming } from '@/components/agenda/Upcoming';
 import { TopicList } from '@/components/topic/TopicList';
 import { TopicsTrending } from '@/components/topic/TopicsTrending';
+import { RightbarHamburger } from '@/components/layout/RightbarHamburger';
 
 export const Route = createFileRoute('/')({
     component: RouteComponent,
 });
 
 function RouteComponent() {
+    const rightContent = <ProtocolAgendaUpcoming />;
+
     return (
         <>
-            <div className="right-bar p-4">
-                <ProtocolAgendaUpcoming />
-            </div>
+            <RightbarHamburger>{rightContent}</RightbarHamburger>
+            <div className="right-bar p-4 hidden md:block">{rightContent}</div>
             <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">

From f7ded6dc453ff37fd411de05d9eb6c2acdb7cc0f Mon Sep 17 00:00:00 2001
From: Luc van Kampen <luc@lucemans.nl>
Date: Sun, 8 Jun 2025 02:02:10 +0200
Subject: [PATCH 2/4] Refactor rightbar to avoid duplicate DOM

---
 web/src/components/Navbar.tsx                 |  2 +-
 web/src/components/Sidebar.tsx                |  3 +--
 .../components/layout/ResponsiveRightbar.tsx  | 15 +++++++++++
 .../components/layout/RightbarHamburger.tsx   |  2 +-
 .../components/layout/SidebarHamburger.tsx    |  1 +
 web/src/hooks/useMediaQuery.ts                | 21 ++++++++++++++++
 web/src/routes/chat/$chatId.tsx               | 25 ++++++-------------
 web/src/routes/index.tsx                      |  9 +++----
 8 files changed, 52 insertions(+), 26 deletions(-)
 create mode 100644 web/src/components/layout/ResponsiveRightbar.tsx
 create mode 100644 web/src/hooks/useMediaQuery.ts

diff --git a/web/src/components/Navbar.tsx b/web/src/components/Navbar.tsx
index 061e794..cb4cf6e 100644
--- a/web/src/components/Navbar.tsx
+++ b/web/src/components/Navbar.tsx
@@ -5,8 +5,8 @@ import { FiLogOut, FiUser } from 'react-icons/fi';
 import { SiEthereum } from 'react-icons/si';
 
 import { useAuth, useLogout } from '../api/auth';
-import { LoginButton } from './LoginButton';
 import { SidebarHamburger } from './layout/SidebarHamburger';
+import { LoginButton } from './LoginButton';
 
 export const Navbar: FC = () => {
     const data = useMatches();
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index 6897cd4..ec06cdc 100644
--- a/web/src/components/Sidebar.tsx
+++ b/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,8 +9,6 @@ import { ProseWidthSwitcher } from './preferences/ProseWidthSwitcher';
 import { ThemeSwitcher } from './preferences/ThemeSwitcher';
 import { WorkshopChatsNav } from './workshop/WorkshopChatsNav';
 
-import classNames from 'classnames';
-
 export const Sidebar = ({ className = '' }: { className?: string } = {}) => {
     const { pathname } = useRouterState({ select: (s) => s.location });
     const { isAuthenticated } = useAuth();
diff --git a/web/src/components/layout/ResponsiveRightbar.tsx b/web/src/components/layout/ResponsiveRightbar.tsx
new file mode 100644
index 0000000..8a9ec58
--- /dev/null
+++ b/web/src/components/layout/ResponsiveRightbar.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+
+import { RightbarHamburger } from './RightbarHamburger';
+
+export const ResponsiveRightbar = ({ children }: { children: ReactNode }) => {
+    const isDesktop = useMediaQuery('(min-width: 768px)');
+
+    return isDesktop ? (
+        <div className="right-bar p-4">{children}</div>
+    ) : (
+        <RightbarHamburger>{children}</RightbarHamburger>
+    );
+};
diff --git a/web/src/components/layout/RightbarHamburger.tsx b/web/src/components/layout/RightbarHamburger.tsx
index 06b993b..1cf0dec 100644
--- a/web/src/components/layout/RightbarHamburger.tsx
+++ b/web/src/components/layout/RightbarHamburger.tsx
@@ -1,7 +1,7 @@
 import * as Dialog from '@radix-ui/react-dialog';
+import { ReactNode } from 'react';
 import { FiMenu } from 'react-icons/fi';
 import { LuX } from 'react-icons/lu';
-import { ReactNode } from 'react';
 
 export const RightbarHamburger = ({ children }: { children: ReactNode }) => {
     return (
diff --git a/web/src/components/layout/SidebarHamburger.tsx b/web/src/components/layout/SidebarHamburger.tsx
index 46d992f..7126bbf 100644
--- a/web/src/components/layout/SidebarHamburger.tsx
+++ b/web/src/components/layout/SidebarHamburger.tsx
@@ -1,6 +1,7 @@
 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 = () => {
diff --git a/web/src/hooks/useMediaQuery.ts b/web/src/hooks/useMediaQuery.ts
new file mode 100644
index 0000000..d9b495c
--- /dev/null
+++ b/web/src/hooks/useMediaQuery.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+export const useMediaQuery = (query: string) => {
+    const [matches, setMatches] = useState(
+        typeof window !== 'undefined' ? window.matchMedia(query).matches : false
+    );
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        const media = window.matchMedia(query);
+        const handler = () => setMatches(media.matches);
+
+        handler();
+        media.addEventListener('change', handler);
+
+        return () => media.removeEventListener('change', handler);
+    }, [query]);
+
+    return matches;
+};
diff --git a/web/src/routes/chat/$chatId.tsx b/web/src/routes/chat/$chatId.tsx
index 0e25488..2fe248a 100644
--- a/web/src/routes/chat/$chatId.tsx
+++ b/web/src/routes/chat/$chatId.tsx
@@ -10,10 +10,10 @@ import {
     WorkshopMessage,
 } from '@/api/workshop';
 import { WorkshopAuthGuard } from '@/components/AuthGuard';
+import { ResponsiveRightbar } from '@/components/layout/ResponsiveRightbar';
 import { UpDownScroller } from '@/components/UpDown';
 import { ChatMessage } from '@/components/workshop/ChatMessage';
 import { ConversationGraph } from '@/components/workshop/ConversationGraph';
-import { RightbarHamburger } from '@/components/layout/RightbarHamburger';
 import { queryClient } from '@/util/query';
 import {
     buildMessageTree,
@@ -128,22 +128,13 @@ const ChatWithSidebar = ({ chatId }: { chatId: string }) => {
         <>
             {/* Right Sidebar */}
             {chat?.messages && chat.messages.length > 0 && useTreeView && (
-                <>
-                    <RightbarHamburger>
-                        <ConversationGraph
-                            rootNodes={rootNodes}
-                            visibleMessages={visibleMessages}
-                            messageMap={messageMap}
-                        />
-                    </RightbarHamburger>
-                    <div className="right-bar p-4 hidden md:block">
-                        <ConversationGraph
-                            rootNodes={rootNodes}
-                            visibleMessages={visibleMessages}
-                            messageMap={messageMap}
-                        />
-                    </div>
-                </>
+                <ResponsiveRightbar>
+                    <ConversationGraph
+                        rootNodes={rootNodes}
+                        visibleMessages={visibleMessages}
+                        messageMap={messageMap}
+                    />
+                </ResponsiveRightbar>
             )}
 
             {/* Main Chat */}
diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx
index 0b5b158..6ede399 100644
--- a/web/src/routes/index.tsx
+++ b/web/src/routes/index.tsx
@@ -2,21 +2,20 @@ import { createFileRoute } from '@tanstack/react-router';
 import { LuBook, LuGithub, LuWandSparkles } from 'react-icons/lu';
 
 import { ProtocolAgendaUpcoming } from '@/components/agenda/Upcoming';
+import { ResponsiveRightbar } from '@/components/layout/ResponsiveRightbar';
 import { TopicList } from '@/components/topic/TopicList';
 import { TopicsTrending } from '@/components/topic/TopicsTrending';
-import { RightbarHamburger } from '@/components/layout/RightbarHamburger';
 
 export const Route = createFileRoute('/')({
     component: RouteComponent,
 });
 
 function RouteComponent() {
-    const rightContent = <ProtocolAgendaUpcoming />;
-
     return (
         <>
-            <RightbarHamburger>{rightContent}</RightbarHamburger>
-            <div className="right-bar p-4 hidden md:block">{rightContent}</div>
+            <ResponsiveRightbar>
+                <ProtocolAgendaUpcoming />
+            </ResponsiveRightbar>
             <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">

From 9239039a1320f468b86ecab4f59d5d4b69dca5ae Mon Sep 17 00:00:00 2001
From: Luc van Kampen <luc@lucemans.nl>
Date: Sun, 8 Jun 2025 02:16:07 +0200
Subject: [PATCH 3/4] Refactor hamburger menus without media query

---
 .../components/layout/ResponsiveRightbar.tsx  | 15 -----------
 .../components/layout/RightbarHamburger.tsx   | 16 ++++++++++--
 web/src/hooks/useMediaQuery.ts                | 21 ----------------
 web/src/routes/chat/$chatId.tsx               | 25 +++++++++++++------
 web/src/routes/index.tsx                      |  9 ++++---
 5 files changed, 37 insertions(+), 49 deletions(-)
 delete mode 100644 web/src/components/layout/ResponsiveRightbar.tsx
 delete mode 100644 web/src/hooks/useMediaQuery.ts

diff --git a/web/src/components/layout/ResponsiveRightbar.tsx b/web/src/components/layout/ResponsiveRightbar.tsx
deleted file mode 100644
index 8a9ec58..0000000
--- a/web/src/components/layout/ResponsiveRightbar.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { ReactNode } from 'react';
-
-import { useMediaQuery } from '@/hooks/useMediaQuery';
-
-import { RightbarHamburger } from './RightbarHamburger';
-
-export const ResponsiveRightbar = ({ children }: { children: ReactNode }) => {
-    const isDesktop = useMediaQuery('(min-width: 768px)');
-
-    return isDesktop ? (
-        <div className="right-bar p-4">{children}</div>
-    ) : (
-        <RightbarHamburger>{children}</RightbarHamburger>
-    );
-};
diff --git a/web/src/components/layout/RightbarHamburger.tsx b/web/src/components/layout/RightbarHamburger.tsx
index 1cf0dec..32c3239 100644
--- a/web/src/components/layout/RightbarHamburger.tsx
+++ b/web/src/components/layout/RightbarHamburger.tsx
@@ -1,13 +1,25 @@
 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 }: { children: ReactNode }) => {
+export const RightbarHamburger = ({
+    children,
+    triggerClassName = '',
+}: {
+    children: ReactNode;
+    triggerClassName?: string;
+}) => {
     return (
         <Dialog.Root>
             <Dialog.Trigger asChild>
-                <button className="md:hidden button aspect-square size-8 flex items-center justify-center">
+                <button
+                    className={classNames(
+                        'md:hidden button aspect-square size-8 flex items-center justify-center',
+                        triggerClassName
+                    )}
+                >
                     <FiMenu />
                 </button>
             </Dialog.Trigger>
diff --git a/web/src/hooks/useMediaQuery.ts b/web/src/hooks/useMediaQuery.ts
deleted file mode 100644
index d9b495c..0000000
--- a/web/src/hooks/useMediaQuery.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export const useMediaQuery = (query: string) => {
-    const [matches, setMatches] = useState(
-        typeof window !== 'undefined' ? window.matchMedia(query).matches : false
-    );
-
-    useEffect(() => {
-        if (typeof window === 'undefined') return;
-
-        const media = window.matchMedia(query);
-        const handler = () => setMatches(media.matches);
-
-        handler();
-        media.addEventListener('change', handler);
-
-        return () => media.removeEventListener('change', handler);
-    }, [query]);
-
-    return matches;
-};
diff --git a/web/src/routes/chat/$chatId.tsx b/web/src/routes/chat/$chatId.tsx
index 2fe248a..d300ab3 100644
--- a/web/src/routes/chat/$chatId.tsx
+++ b/web/src/routes/chat/$chatId.tsx
@@ -10,7 +10,7 @@ import {
     WorkshopMessage,
 } from '@/api/workshop';
 import { WorkshopAuthGuard } from '@/components/AuthGuard';
-import { ResponsiveRightbar } from '@/components/layout/ResponsiveRightbar';
+import { RightbarHamburger } from '@/components/layout/RightbarHamburger';
 import { UpDownScroller } from '@/components/UpDown';
 import { ChatMessage } from '@/components/workshop/ChatMessage';
 import { ConversationGraph } from '@/components/workshop/ConversationGraph';
@@ -128,13 +128,22 @@ const ChatWithSidebar = ({ chatId }: { chatId: string }) => {
         <>
             {/* Right Sidebar */}
             {chat?.messages && chat.messages.length > 0 && useTreeView && (
-                <ResponsiveRightbar>
-                    <ConversationGraph
-                        rootNodes={rootNodes}
-                        visibleMessages={visibleMessages}
-                        messageMap={messageMap}
-                    />
-                </ResponsiveRightbar>
+                <>
+                    <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 */}
diff --git a/web/src/routes/index.tsx b/web/src/routes/index.tsx
index 6ede399..1a45e9b 100644
--- a/web/src/routes/index.tsx
+++ b/web/src/routes/index.tsx
@@ -2,7 +2,7 @@ import { createFileRoute } from '@tanstack/react-router';
 import { LuBook, LuGithub, LuWandSparkles } from 'react-icons/lu';
 
 import { ProtocolAgendaUpcoming } from '@/components/agenda/Upcoming';
-import { ResponsiveRightbar } from '@/components/layout/ResponsiveRightbar';
+import { RightbarHamburger } from '@/components/layout/RightbarHamburger';
 import { TopicList } from '@/components/topic/TopicList';
 import { TopicsTrending } from '@/components/topic/TopicsTrending';
 
@@ -13,9 +13,12 @@ export const Route = createFileRoute('/')({
 function RouteComponent() {
     return (
         <>
-            <ResponsiveRightbar>
+            <div className="right-bar p-4 hidden md:block">
                 <ProtocolAgendaUpcoming />
-            </ResponsiveRightbar>
+            </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">

From 4e290f8094563d75b67955be49ef2f1d315cf83c Mon Sep 17 00:00:00 2001
From: Luc <luc@lucemans.nl>
Date: Sun, 8 Jun 2025 02:25:00 +0200
Subject: [PATCH 4/4] Update styling & fix prose-page width

---
 web/src/components/layout/SidebarHamburger.tsx |  4 ++--
 web/src/routes/chat/$chatId.tsx                | 12 ++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/components/layout/SidebarHamburger.tsx b/web/src/components/layout/SidebarHamburger.tsx
index 7126bbf..ab59b46 100644
--- a/web/src/components/layout/SidebarHamburger.tsx
+++ b/web/src/components/layout/SidebarHamburger.tsx
@@ -13,8 +13,8 @@ export const SidebarHamburger = () => {
                 </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 left-0 w-64 max-w-full bg-primary p-4 overflow-y-auto z-50 data-[state=open]:animate-contentShow">
+                <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" />
diff --git a/web/src/routes/chat/$chatId.tsx b/web/src/routes/chat/$chatId.tsx
index d300ab3..53817bb 100644
--- a/web/src/routes/chat/$chatId.tsx
+++ b/web/src/routes/chat/$chatId.tsx
@@ -77,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) {
@@ -298,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}
@@ -332,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}