mail page custum 3

app/mail/page.tsx

@@ -135,13 +135,27 @@ export default function MailPage() {
   };
 
   return (
-    <div className="flex h-screen bg-gray-50 text-gray-900 overflow-hidden">
+    <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
       {/* Sidebar */}
       <div className={`${sidebarOpen ? 'w-64' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
                     ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
         {/* Logo and toggle */}
         <div className="p-3 flex items-center justify-between border-b border-gray-100">
-          {sidebarOpen && <h1 className="text-lg font-semibold text-gray-800">Mail</h1>}
+          {sidebarOpen && (
+            <div className="flex items-center justify-between w-full">
+              <h1 className="text-lg font-semibold text-gray-800">Mail</h1>
+              <Button 
+                variant="ghost"
+                size="sm"
+                className="text-gray-600"
+              >
+                <div className="flex items-center gap-2">
+                  <div className="w-2.5 h-2.5 rounded-full bg-blue-500"></div>
+                  <span className="text-sm">All accounts</span>
+                </div>
+              </Button>
+            </div>
+          )}
           <Button 
             variant="ghost"
             size="icon"
@@ -211,39 +225,7 @@ export default function MailPage() {
               </Button>
             </li>
           </ul>
-
-          {/* Account selection */}
-          {sidebarOpen && (
-            <div className="mt-6 px-4">
-              <h2 className="text-xs uppercase text-gray-500 font-semibold mb-2 px-2">Accounts</h2>
-              <ul className="space-y-1">
-                {accounts.map(account => (
-                  <li key={account.id}>
-                    <Button 
-                      variant="ghost"
-                      className={`w-full justify-start px-3 py-2 ${selectedAccount === account.id ? 'bg-gray-100' : ''} hover:bg-gray-50`}
-                      onClick={() => {setSelectedAccount(account.id); setSelectedEmail(null);}}
-                    >
-                      <div className={`w-2.5 h-2.5 rounded-full ${account.color} mr-3`}></div>
-                      <div className="text-left">
-                        <div className="font-medium text-sm">{account.name}</div>
-                        <div className="text-xs text-gray-500">{account.email}</div>
-                      </div>
-                    </Button>
-                  </li>
-                ))}
-              </ul>
-            </div>
-          )}
         </nav>
-
-        {/* Settings */}
-        <div className="p-3 border-t border-gray-100">
-          <Button variant="ghost" className={`${sidebarOpen ? 'w-full' : 'justify-center'} text-gray-600 hover:text-gray-900`}>
-            <Settings className="h-4 w-4" />
-            {sidebarOpen && <span className="ml-3">Settings</span>}
-          </Button>
-        </div>
       </div>
 
       {/* Main content */}