Update menu design and add toggle functionality for better responsiveness

Add a menu toggle button to show/hide the sidebar. Update locale files for `menuToggle` key. Refactor `protocol.tsx` to manage menu state, adjust layout for responsiveness, and apply square corners to the menu.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 470babcf-8feb-4bdb-8f18-66e74df799e6
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/ZgwFc55
Replit-Helium-Checkpoint-Created: true

artifacts/tx-os/src/locales/ar.json

@@ -1661,6 +1661,7 @@
   },
   "protocol": {
     "title": "العلاقات العامة والمراسم",
+    "menuToggle": "إظهار/إخفاء القائمة",
     "notes": "ملاحظات",
     "statusLabel": "الحالة",
     "confirmReject": "هل أنت متأكد من رفض هذا الطلب؟",

artifacts/tx-os/src/locales/en.json

@@ -1534,6 +1534,7 @@
   },
   "protocol": {
     "title": "Public Relations & Protocol",
+    "menuToggle": "Show/hide menu",
     "notes": "Notes",
     "statusLabel": "Status",
     "confirmReject": "Are you sure you want to reject this request?",

artifacts/tx-os/src/pages/protocol.tsx

@@ -33,6 +33,7 @@ import {
   Image as ImageIcon,
   Settings as SettingsIcon,
   Clock3,
+  Menu as MenuIcon,
 } from "lucide-react";
 import {
   ResponsiveContainer,
@@ -881,6 +882,7 @@ export default function ProtocolPage() {
   });
   const [giftsGroupOpen, setGiftsGroupOpen] = useState(false);
   const [roomsGroupOpen, setRoomsGroupOpen] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(true);
 
   const bookingAction = useMutation({
     mutationFn: (args: { id: number; action: "approve" | "cancel" }) =>
@@ -1396,6 +1398,16 @@ export default function ProtocolPage() {
           <Button variant="ghost" size="icon" onClick={back} aria-label={t("common.back")}>
             <BackIcon size={20} />
           </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setMenuOpen((v) => !v)}
+            aria-label={t("protocol.menuToggle")}
+            title={t("protocol.menuToggle")}
+            data-testid="protocol-menu-toggle"
+          >
+            <MenuIcon size={20} />
+          </Button>
           <div className="flex items-center gap-2 min-w-0">
             <div className="h-9 w-9 rounded-xl bg-sky-500 text-white flex items-center justify-center shrink-0">
               <Handshake size={20} />
@@ -1407,9 +1419,10 @@ export default function ProtocolPage() {
         </div>
       </header>
 
-      <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 md:sticky md:top-20 rounded-xl bg-[#0f1d3d] p-2">
+      <div className="flex flex-col md:flex-row md:items-stretch">
+        {menuOpen && (
+        <aside className="md:w-56 shrink-0 bg-[#0f1d3d] md:min-h-[calc(100vh-61px)]">
+          <nav className="flex md:flex-col gap-1 overflow-x-auto md:overflow-visible p-2 md:sticky md:top-[73px]">
             {TABS.map((item) => {
               const { key, label, icon: Icon } = item;
               if (key === "issues") return null;
@@ -1539,8 +1552,9 @@ export default function ProtocolPage() {
             })}
           </nav>
         </aside>
+        )}
 
-        <main className="flex-1 min-w-0">
+        <main className="flex-1 min-w-0 w-full max-w-6xl md:mx-auto px-4 py-5">
         {tab === "dashboard" && (
           <DashboardView data={dashboard.data} t={t} goTab={setTab} />
         )}