Update components/Sidebar.tsx

components/Sidebar.tsx

@@ -1,3 +1,4 @@
+
 import React, { useState, useEffect, useMemo } from 'react';
 import { LayoutDashboard, Users, BookOpen, GraduationCap, Settings, LogOut, FileText, School, UserCog, Palette, X, Building, Gamepad2, CalendarCheck, UserCircle, MessageSquare, Bot, ArrowUp, ArrowDown, Save, UserCheck, Download } from 'lucide-react';
 import { UserRole } from '../types';
@@ -113,10 +114,12 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView, onChangeView, use
       }
   };
 
+  // Added 'flex flex-col h-full' to ensure proper layout on mobile
   const sidebarClasses = `
     fixed inset-y-0 left-0 z-50 w-64 bg-slate-900 text-white transition-transform duration-300 ease-in-out transform 
+    flex flex-col h-full
     ${isOpen ? 'translate-x-0' : '-translate-x-full'} 
-    lg:relative lg:translate-x-0 lg:flex lg:flex-col lg:h-screen shadow-2xl lg:shadow-none
+    lg:relative lg:translate-x-0 shadow-2xl lg:shadow-none
   `;
 
   return (
@@ -124,7 +127,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView, onChangeView, use
       {isOpen && <div className="fixed inset-0 bg-black/50 z-40 lg:hidden backdrop-blur-sm" onClick={onClose}></div>}
 
       <div className={sidebarClasses}>
-        <div className="flex items-center justify-between h-20 border-b border-slate-700 px-6">
+        <div className="flex items-center justify-between h-20 border-b border-slate-700 px-6 shrink-0">
           <div className="flex items-center space-x-2">
             <GraduationCap className="h-8 w-8 text-blue-400" />
             <span className="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-teal-300">
@@ -180,7 +183,7 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView, onChangeView, use
           </nav>
         </div>
 
-        <div className="p-4 border-t border-slate-700 space-y-2">
+        <div className="p-4 border-t border-slate-700 space-y-2 shrink-0">
           {installPrompt && (
             <button onClick={handleInstallClick} className="w-full flex items-center space-x-3 px-4 py-3 rounded-lg bg-gradient-to-r from-blue-600 to-indigo-600 text-white hover:shadow-lg transition-all duration-200 animate-in fade-in slide-in-from-bottom-2">
               <Download size={20} />
@@ -204,4 +207,4 @@ export const Sidebar: React.FC<SidebarProps> = ({ currentView, onChangeView, use
       </div>
     </>
   );
-};
+};