feat: refactor Menu component layout and improve accessibility features

app/components/menu.tsx

@@ -82,7 +82,15 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
 
     return (
       <>
-      <Menubar className="rounded-none border-b border-none px-2 lg:px-4">
+      <div className="flex items-center justify-between w-full">
+        <div className="flex items-center gap-2 mx-2">
+          <span
+        className={`h-2 w-2 rounded-full ${isConnected ? "bg-green-500" : "bg-red-400"}`}
+          />
+        </div>
+          <div style={{ marginRight: '0.24rem' }} className="border-r-4 w-0"><p className="invisible">j</p></div>
+
+        <Menubar className="rounded-none border-b border-none px-0 lg:px-0 flex-1" style={{ minWidth: 0 }}>
           <MenubarMenu>
         <MenubarTrigger className="font-bold">mice</MenubarTrigger>
         <MenubarContent>
@@ -261,6 +269,8 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
           </MenubarMenu>
         </Menubar>
         
+      </div>
+
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="sm:max-w-[400px] p-0 overflow-hidden">
           <div className=" px-6 pt-8 pb-6 flex flex-col items-center">