add collapse button

phd-advisor-frontend/src/components/Sidebar.js

@@ -8,7 +8,9 @@ import {
   Edit3,
   LogOut,
   User,
-  Settings
+  Settings,
+  ChevronLeft,
+  ChevronRight
 } from 'lucide-react';
 import '../styles/Sidebar.css';
 
@@ -18,12 +20,14 @@ const Sidebar = ({
   onSelectSession, 
   onNewChat, 
   onSignOut,
-  authToken 
+  authToken,
+  onSidebarToggle // New prop to notify parent of sidebar state
 }) => {
   const [chatSessions, setChatSessions] = useState([]);
   const [searchTerm, setSearchTerm] = useState('');
   const [isLoading, setIsLoading] = useState(true);
   const [showUserMenu, setShowUserMenu] = useState(false);
+  const [isCollapsed, setIsCollapsed] = useState(false);
 
   useEffect(() => {
     if (authToken) {
@@ -31,6 +35,13 @@ const Sidebar = ({
     }
   }, [authToken]);
 
+  // Notify parent when sidebar state changes
+  useEffect(() => {
+    if (onSidebarToggle) {
+      onSidebarToggle(isCollapsed);
+    }
+  }, [isCollapsed, onSidebarToggle]);
+
   const fetchChatSessions = async () => {
     try {
       const response = await fetch('http://localhost:8000/api/chat-sessions', {
@@ -101,6 +112,14 @@ const Sidebar = ({
     }
   };
 
+  const toggleSidebar = () => {
+    setIsCollapsed(!isCollapsed);
+    // Close user menu when collapsing
+    if (!isCollapsed) {
+      setShowUserMenu(false);
+    }
+  };
+
   const filteredSessions = chatSessions.filter(session =>
     session.title.toLowerCase().includes(searchTerm.toLowerCase())
   );
@@ -118,101 +137,139 @@ const Sidebar = ({
   };
 
   return (
-    <div className="sidebar">
+    <div className={`sidebar ${isCollapsed ? 'collapsed' : ''}`}>
       {/* Header */}
       <div className="sidebar-header">
-        <div className="user-section">
-          <div className="user-info">
-            <div className="user-avatar">
-              <User size={20} />
-            </div>
-            <div className="user-details">
-              <span className="user-name">{user.firstName} {user.lastName}</span>
-              <span className="user-email">{user.email}</span>
+        {!isCollapsed && (
+          <>
+            <div className="user-section">
+              <div className="user-info">
+                <div className="user-avatar">
+                  <User size={20} />
+                </div>
+                <div className="user-details">
+                  <span className="user-name">{user.firstName} {user.lastName}</span>
+                  <span className="user-email">{user.email}</span>
+                </div>
+              </div>
+              
+              <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                {/* Toggle button next to user menu when expanded */}
+                <button 
+                  className="sidebar-toggle"
+                  onClick={toggleSidebar} 
+                  title="Collapse sidebar"
+                >
+                  <ChevronLeft size={16} />
+                </button>
+                
+                <div className="user-menu-container">
+                  <button 
+                    className="user-menu-button"
+                    onClick={() => setShowUserMenu(!showUserMenu)}
+                  >
+                    <MoreVertical size={16} />
+                  </button>
+                  
+                  {showUserMenu && (
+                    <div className="user-menu">
+                      <button className="user-menu-item">
+                        <Settings size={16} />
+                        <span>Settings</span>
+                      </button>
+                      <button className="user-menu-item sign-out" onClick={onSignOut}>
+                        <LogOut size={16} />
+                        <span>Sign Out</span>
+                      </button>
+                    </div>
+                  )}
+                </div>
+              </div>
             </div>
-          </div>
-          
-          <div className="user-menu-container">
+
+            <button className="new-chat-button" onClick={handleNewChat}>
+              <Plus size={16} />
+              <span>New Chat</span>
+            </button>
+          </>
+        )}
+
+        {isCollapsed && (
+          <div className="collapsed-header">
+            {/* Toggle button replaces user avatar when collapsed */}
             <button 
-              className="user-menu-button"
-              onClick={() => setShowUserMenu(!showUserMenu)}
+              className="collapsed-toggle-avatar"
+              onClick={toggleSidebar} 
+              title="Expand sidebar"
             >
-              <MoreVertical size={16} />
+              <ChevronRight size={20} />
+            </button>
+            <button className="collapsed-new-chat" onClick={handleNewChat} title="New Chat">
+              <Plus size={20} />
             </button>
-            
-            {showUserMenu && (
-              <div className="user-menu">
-                <button className="user-menu-item">
-                  <Settings size={16} />
-                  <span>Settings</span>
-                </button>
-                <button className="user-menu-item sign-out" onClick={onSignOut}>
-                  <LogOut size={16} />
-                  <span>Sign Out</span>
-                </button>
-              </div>
-            )}
           </div>
-        </div>
-
-        <button className="new-chat-button" onClick={handleNewChat}>
-          <Plus size={16} />
-          <span>New Chat</span>
-        </button>
+        )}
       </div>
 
-      {/* Search */}
-      <div className="sidebar-search">
-        <div className="search-container">
-          <Search size={16} className="search-icon" />
-          <input
-            type="text"
-            placeholder="Search chats..."
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-            className="search-input"
-          />
+      {/* Search - only show when expanded */}
+      {!isCollapsed && (
+        <div className="sidebar-search">
+          <div className="search-container">
+            <Search size={16} className="search-icon" />
+            <input
+              type="text"
+              placeholder="Search chats..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="search-input"
+            />
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Chat Sessions */}
       <div className="chat-sessions">
         {isLoading ? (
           <div className="loading-sessions">
             <div className="loading-spinner"></div>
-            <span>Loading chats...</span>
+            {!isCollapsed && <span>Loading chats...</span>}
           </div>
         ) : filteredSessions.length === 0 ? (
           <div className="no-sessions">
-            {searchTerm ? 'No chats found' : 'No chats yet'}
+            {!isCollapsed && (searchTerm ? 'No chats found' : 'No chats yet')}
           </div>
         ) : (
           <div className="sessions-list">
             {filteredSessions.map((session) => (
               <div
                 key={session.id}
-                className={`session-item ${currentSessionId === session.id ? 'active' : ''}`}
+                className={`session-item ${currentSessionId === session.id ? 'active' : ''} ${isCollapsed ? 'collapsed' : ''}`}
                 onClick={() => onSelectSession(session.id)}
+                title={isCollapsed ? session.title : ''}
               >
                 <div className="session-content">
                   <div className="session-icon">
                     <MessageSquare size={16} />
                   </div>
-                  <div className="session-details">
-                    <div className="session-title">{session.title}</div>
-                    <div className="session-meta">
-                      <span className="session-date">{formatDate(session.updated_at)}</span>
-                      <span className="session-messages">{session.message_count} messages</span>
+                  {!isCollapsed && (
+                    <div className="session-details">
+                      <div className="session-title">{session.title}</div>
+                      <div className="session-meta">
+                        <span className="session-date">{formatDate(session.updated_at)}</span>
+                        <span className="session-messages">{session.message_count} messages</span>
+                      </div>
                     </div>
-                  </div>
+                  )}
                 </div>
                 
-                <button
-                  className="session-menu-button"
-                  onClick={(e) => handleDeleteSession(session.id, e)}
-                >
-                  <Trash2 size={14} />
-                </button>
+                {!isCollapsed && (
+                  <button
+                    className="session-menu-button"
+                    onClick={(e) => handleDeleteSession(session.id, e)}
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                )}
               </div>
             ))}
           </div>

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

@@ -11,6 +11,12 @@
   top: 0;
   z-index: 100;
   overflow: hidden;
+  transition: width 0.3s ease;
+}
+
+/* Collapsed state */
+.sidebar.collapsed {
+  width: 70px;
 }
 
 /* Dark theme support */
@@ -19,17 +25,105 @@
   border-right-color: var(--border-dark, #374151);
 }
 
+/* Toggle Button - Matches User Menu Style */
+.sidebar-toggle {
+  padding: 6px;
+  border: none;
+  background: none;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--text-secondary, #6b7280);
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sidebar-toggle:hover {
+  background: var(--bg-secondary, #f3f4f6);
+  color: var(--text-primary, #111827);
+}
+
+.dark .sidebar-toggle:hover {
+  background: var(--bg-secondary-dark, #374151);
+  color: var(--text-primary-dark, #f9fafb);
+}
+
+/* Toggle button as collapsed user avatar replacement */
+.collapsed-toggle-avatar {
+  width: 40px;
+  height: 40px;
+  background: var(--primary-color, #3b82f6);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.collapsed-toggle-avatar:hover {
+  background: var(--primary-color-hover, #2563eb);
+  transform: scale(1.05);
+}
+
 /* Header Section */
 .sidebar-header {
   padding: 20px;
   border-bottom: 1px solid var(--border-light, #e5e7eb);
   flex-shrink: 0;
+  transition: all 0.3s ease;
+}
+
+.sidebar.collapsed .sidebar-header {
+  padding: 20px 10px;
 }
 
 .dark .sidebar-header {
   border-bottom-color: var(--border-dark, #374151);
 }
 
+/* Collapsed Header */
+.collapsed-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+}
+
+.collapsed-user-avatar {
+  width: 40px;
+  height: 40px;
+  background: var(--primary-color, #3b82f6);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  flex-shrink: 0;
+}
+
+.collapsed-new-chat {
+  width: 40px;
+  height: 40px;
+  background: var(--primary-color, #3b82f6);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.collapsed-new-chat:hover {
+  background: var(--primary-color-hover, #2563eb);
+  transform: scale(1.1);
+}
+
 .user-section {
   display: flex;
   align-items: center;
@@ -198,6 +292,7 @@
   padding: 16px 20px;
   border-bottom: 1px solid var(--border-light, #e5e7eb);
   flex-shrink: 0;
+  transition: all 0.3s ease;
 }
 
 .dark .sidebar-search {
@@ -252,6 +347,11 @@
   flex: 1;
   overflow-y: auto;
   padding: 0 20px 20px;
+  transition: padding 0.3s ease;
+}
+
+.sidebar.collapsed .chat-sessions {
+  padding: 0 10px 20px;
 }
 
 .loading-sessions {
@@ -264,6 +364,10 @@
   gap: 12px;
 }
 
+.sidebar.collapsed .loading-sessions {
+  padding: 40px 5px;
+}
+
 .dark .loading-sessions {
   color: var(--text-secondary-dark, #9ca3af);
 }
@@ -294,6 +398,10 @@
   font-size: 14px;
 }
 
+.sidebar.collapsed .no-sessions {
+  padding: 40px 5px;
+}
+
 .dark .no-sessions {
   color: var(--text-secondary-dark, #9ca3af);
 }
@@ -318,6 +426,11 @@
   group: true;
 }
 
+.session-item.collapsed {
+  justify-content: center;
+  padding: 12px 8px;
+}
+
 .session-item:hover {
   background: var(--bg-secondary, #f3f4f6);
   border-color: var(--border-light, #e5e7eb);
@@ -346,6 +459,11 @@
   min-width: 0;
 }
 
+.session-item.collapsed .session-content {
+  justify-content: center;
+  flex: none;
+}
+
 .session-icon {
   color: var(--text-secondary, #6b7280);
   flex-shrink: 0;
@@ -420,15 +538,56 @@
   background: var(--bg-tertiary-dark, #4b5563);
 }
 
+/* Tooltip for collapsed state */
+.session-item.collapsed {
+  position: relative;
+}
+
+.session-item.collapsed:hover::after {
+  content: attr(title);
+  position: absolute;
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  background: var(--bg-primary, #ffffff);
+  border: 1px solid var(--border-light, #e5e7eb);
+  border-radius: 6px;
+  padding: 8px 12px;
+  margin-left: 8px;
+  white-space: nowrap;
+  font-size: 12px;
+  color: var(--text-primary, #111827);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.dark .session-item.collapsed:hover::after {
+  background: var(--bg-primary-dark, #1f2937);
+  border-color: var(--border-dark, #374151);
+  color: var(--text-primary-dark, #f9fafb);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
 /* Responsive Design */
 @media (max-width: 768px) {
   .sidebar {
     width: 280px;
     transform: translateX(-100%);
-    transition: transform 0.3s ease;
+    transition: transform 0.3s ease, width 0.3s ease;
+  }
+  
+  .sidebar.collapsed {
+    width: 70px;
   }
   
   .sidebar.open {
     transform: translateX(0);
   }
+  
+  .sidebar-toggle {
+    display: none; /* Hide toggle on mobile, use overlay instead */
+  }
 }