update sidebar props

phd-advisor-frontend/src/pages/ChatPage.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Home, MessageCircle, Reply, X, Sparkles, Users, Settings2, FileText , LogOut} from 'lucide-react';
+import { Home, MessageCircle, Reply, X, Sparkles, Users, Settings2, FileText , LogOut, Menu} from 'lucide-react';
 import EnhancedChatInput from '../components/EnhancedChatInput';
 import MessageBubble from '../components/MessageBubble';
 import ThinkingIndicator from '../components/ThinkingIndicator';
@@ -30,6 +30,7 @@ const ChatPage = ({ user, authToken, onNavigateToHome, onSignOut }) => {
   const [currentSessionTitle, setCurrentSessionTitle] = useState('');
   const [isSavingSession, setIsSavingSession] = useState(false);
   const [isLoadingSession, setIsLoadingSession] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
   
 
@@ -37,6 +38,10 @@ const ChatPage = ({ user, authToken, onNavigateToHome, onSignOut }) => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
   };
 
+  const handleMobileMenuToggle = () => {
+    setIsMobileMenuOpen(!isMobileMenuOpen);
+  };
+
   useEffect(() => {
     scrollToBottom();
   }, [messages, thinkingAdvisors]);
@@ -688,6 +693,8 @@ const handleNewChat = async (sessionId = null) => {
         onSignOut={onSignOut}
         authToken={authToken}
         onSidebarToggle={handleSidebarToggle}
+        isMobileOpen={isMobileMenuOpen}
+        onMobileToggle={setIsMobileMenuOpen}
       />
       
       <div className={`main-chat-area ${isSidebarCollapsed ? 'sidebar-collapsed' : ''}`}>
@@ -695,6 +702,12 @@ const handleNewChat = async (sessionId = null) => {
           {/* Floating Header */}
           <div className="floating-header">
             <div className="header-left">
+              <button 
+                className="mobile-menu-button"
+                onClick={handleMobileMenuToggle}
+              >
+                <Menu size={20} />
+              </button>
               <button onClick={onNavigateToHome} className="modern-home-btn">
                 <Home size={20} />
               </button>

phd-advisor-frontend/src/styles/ChatPage.css

@@ -986,18 +986,56 @@
   font-size: 12px;
 }
 
+.mobile-menu-button {
+  display: none;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  border: none;
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  align-items: center;
+  justify-content: center;
+}
+
+.mobile-menu-button:hover {
+  background: var(--accent-primary);
+  color: white;
+}
+
 /* Responsive Design for Chat Page */
 @media (max-width: 768px) {
   .floating-header {
     padding: 12px 16px;
-    flex-wrap: wrap;
+    flex-wrap: nowrap; 
+    gap: 8px;
+  }
+  
+  .header-left {
     gap: 12px;
+    flex: 0; /* Don't let it grow */
+    min-width: 0;
+  }
+  
+  /* Hide brand elements on mobile to reduce clutter */
+  .header-left .modern-home-btn,
+  .header-left .header-brand {
+    display: none;
   }
   
   .header-right {
-    gap: 12px;
+    gap: 8px;
+    flex: 1; /* Let header-right take available space */
+    justify-content: flex-end; /* Align items to the right */
+    flex-shrink: 0;
   }
   
+  /* Ensure mobile menu button is visible */
+  .mobile-menu-button {
+    display: flex;
+  }
   
   .main-content {
     padding: 24px 12px 120px 12px; /* Adjusted for mobile */
@@ -1030,12 +1068,6 @@
     font-size: 13px;
   }
 
-  .export-dropdown {
-    right: -20px;
-    left: -20px;
-    width: auto;
-    min-width: unset;
-  }
 
   .main-chat-area {
     margin-left: 0;
@@ -1063,4 +1095,17 @@
     padding: 10px 14px;
     font-size: 12px;
   }
+
+  .brand-text h1 {
+    font-size: 16px;
+  }
+  
+  .brand-text p {
+    font-size: 11px;
+  }
+
+  .session-title-display{
+    display: none;
+  }
+
 }