mail page connected with folders 8

app/mail/page.tsx

@@ -1131,6 +1131,40 @@ export default function MailPage() {
     </div>
   );
 
+  // Render the sidebar navigation
+  const renderSidebarNav = () => (
+    <nav className="p-3">
+      <ul className="space-y-0.5 px-2">
+        {sidebarItems.map((item) => (
+          <li key={item.view}>
+            <Button 
+              variant={currentView === item.view ? 'secondary' : 'ghost'}
+              className={`w-full justify-start py-2 ${
+                currentView === item.view ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
+              }`}
+              onClick={() => {
+                setCurrentView(item.view);
+                setSelectedEmail(null);
+              }}
+            >
+              <div className="flex items-center justify-between w-full">
+                <div className="flex items-center">
+                  <item.icon className="h-4 w-4 mr-2" />
+                  <span>{item.label}</span>
+                </div>
+                {item.view === 'INBOX' && unreadCount > 0 && (
+                  <span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
+                    {unreadCount}
+                  </span>
+                )}
+              </div>
+            </Button>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+
   if (error) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">