From ec7b1b7af29567479e1a6ba62fda4850b844c43e Mon Sep 17 00:00:00 2001
From: Riyadh <dev@tx.local>
Date: Mon, 6 Jul 2026 10:13:41 +0000
Subject: [PATCH] Move navigation to a vertical sidebar on the right for better
 layout

Restructures the page layout to move the navigation tabs from a horizontal bar to a vertical sidebar on the right, enhancing RTL support.
---
 artifacts/tx-os/src/pages/protocol.tsx | 45 ++++++++++++++------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/artifacts/tx-os/src/pages/protocol.tsx b/artifacts/tx-os/src/pages/protocol.tsx
index 03cf3f50..929f7bc1 100644
--- a/artifacts/tx-os/src/pages/protocol.tsx
+++ b/artifacts/tx-os/src/pages/protocol.tsx
@@ -553,7 +553,7 @@ export default function ProtocolPage() {
   return (
     <div className="min-h-screen bg-slate-50" dir={isAr ? "rtl" : "ltr"}>
       <header className="sticky top-0 z-10 bg-white border-b border-slate-200">
-        <div className="max-w-5xl mx-auto px-4 py-3 flex items-center gap-3">
+        <div className="max-w-6xl mx-auto px-4 py-3 flex items-center gap-3">
           <Button variant="ghost" size="icon" onClick={back} aria-label={t("common.back")}>
             <BackIcon size={20} />
           </Button>
@@ -566,26 +566,30 @@ export default function ProtocolPage() {
             </h1>
           </div>
         </div>
-        <nav className="max-w-5xl mx-auto px-2 flex gap-1 overflow-x-auto pb-2">
-          {TABS.map(({ key, label, icon: Icon }) => (
-            <button
-              key={key}
-              onClick={() => setTab(key)}
-              className={cn(
-                "flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm whitespace-nowrap transition-colors",
-                tab === key
-                  ? "bg-sky-500 text-white"
-                  : "text-slate-600 hover:bg-slate-100",
-              )}
-            >
-              <Icon size={16} />
-              {label}
-            </button>
-          ))}
-        </nav>
       </header>
 
-      <main className="max-w-5xl mx-auto px-4 py-5">
+      <div className="max-w-6xl mx-auto px-4 py-5 flex flex-col md:flex-row gap-4 md:gap-6">
+        <aside className="md:w-56 shrink-0">
+          <nav className="flex md:flex-col gap-1 overflow-x-auto md:overflow-visible pb-2 md:pb-0 md:sticky md:top-20">
+            {TABS.map(({ key, label, icon: Icon }) => (
+              <button
+                key={key}
+                onClick={() => setTab(key)}
+                className={cn(
+                  "flex items-center gap-2 px-3 py-2 rounded-lg text-sm whitespace-nowrap transition-colors md:w-full md:justify-start",
+                  tab === key
+                    ? "bg-sky-500 text-white"
+                    : "text-slate-600 hover:bg-slate-100",
+                )}
+              >
+                <Icon size={16} className="shrink-0" />
+                {label}
+              </button>
+            ))}
+          </nav>
+        </aside>
+
+        <main className="flex-1 min-w-0">
         {tab === "dashboard" && (
           <DashboardView data={dashboard.data} t={t} goTab={setTab} />
         )}
@@ -1005,7 +1009,8 @@ export default function ProtocolPage() {
             </div>
           </section>
         )}
-      </main>
+        </main>
+      </div>
 
       {/* Dialogs */}
       {bookingDialog.open && (