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.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: ec325dd2-ed6f-4785-8de9-93ec3207af08
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/9SfnFMU
Replit-Helium-Checkpoint-Created: true

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 && (