Refactor Dashboard Layout and Enhance Mobile Experience

- Removed the SearchBar component and integrated mobile sidebar functionality.
- Added mobile sidebar with user profile and navigation links.
- Improved responsiveness of UserProfileSection for mobile devices.
- Updated ProgressCard to enhance stats grid layout for better mobile display.
- Modified Hero component to reflect upcoming event details.
- Enhanced CSS for mobile touch support, scrolling, and responsive grid layouts.

Author: chahatkesh

src/components/dashboard/DashboardLayout.jsx

@@ -1,83 +1,24 @@
 import React, { useState, useEffect } from 'react';
 import { Link, Outlet } from 'react-router-dom';
 import { useAuth } from '../../hooks/useAuth';
-import { LogOut, Settings, ChevronDown, Search, Home, X } from 'lucide-react';
+import { LogOut, Settings, ChevronDown, Home, X, User } from 'lucide-react';
 import UserProfileSection from './UserProfileSection';
 import ProgressService from '../../utils/progressService';
 import OptimizedDashboardService from '../../utils/optimizedDashboardService';
 import { getUserAvatarUrl } from '../../utils/avatarService.jsx';
-import { SearchProvider } from '../../context/SearchContext.jsx';
-
-// Search Bar Component
-const SearchBar = () => {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [isSearchActive, setIsSearchActive] = useState(false);
-
-  // Listen for clear search events
-  useEffect(() => {
-    const handleClearSearch = () => {
-      setSearchTerm('');
-      setIsSearchActive(false);
-      window.dispatchEvent(new CustomEvent('dashboardSearch', {
-        detail: { searchTerm: '', isActive: false }
-      }));
-    };
-
-    window.addEventListener('clearSearch', handleClearSearch);
-    return () => window.removeEventListener('clearSearch', handleClearSearch);
-  }, []);
-
-  const handleSearchChange = (e) => {
-    const value = e.target.value;
-    setSearchTerm(value);
-    setIsSearchActive(value.length > 0);
-    
-    // Dispatch custom event to notify other components
-    window.dispatchEvent(new CustomEvent('dashboardSearch', {
-      detail: { searchTerm: value, isActive: value.length > 0 }
-    }));
-  };
-
-  const clearSearch = () => {
-    setSearchTerm('');
-    setIsSearchActive(false);
-    window.dispatchEvent(new CustomEvent('dashboardSearch', {
-      detail: { searchTerm: '', isActive: false }
-    }));
-  };
-
-  return (
-    <div className="relative w-full">
-      <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-        <Search className="h-4 w-4 text-gray-400" />
-      </div>
-      <input
-        type="text"
-        placeholder="Search leagues, assignments..."
-        value={searchTerm}
-        onChange={handleSearchChange}
-        className="block w-full pl-10 pr-10 py-2 border border-gray-200 rounded-lg text-sm placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-[#FFDE59]/50 focus:border-[#FFDE59] bg-gray-50 focus:bg-white transition-all duration-200"
-      />
-      {isSearchActive && (
-        <button
-          onClick={clearSearch}
-          className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
-        >
-          <X className="h-4 w-4" />
-        </button>
-      )}
-    </div>
-  );
-};
 
 const DashboardLayout = () => {
   const { user } = useAuth();
   const [dashboardData, setDashboardData] = useState(null);
   const [showUserMenu, setShowUserMenu] = useState(false);
+  const [showMobileSidebar, setShowMobileSidebar] = useState(false);
 
   // Close dropdown when clicking outside
   useEffect(() => {
-    const handleClickOutside = () => setShowUserMenu(false);
+    const handleClickOutside = () => {
+      setShowUserMenu(false);
+      setShowMobileSidebar(false);
+    };
     document.addEventListener('click', handleClickOutside);
     return () => document.removeEventListener('click', handleClickOutside);
   }, []);
@@ -103,8 +44,7 @@ const DashboardLayout = () => {
   }, [user]);
 
   return (
-    <SearchProvider>
-      <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50">
       {/* Simplified Header with Clean Design */}
       <header className="sticky top-0 z-50 backdrop-blur-md bg-white/90 border-b border-gray-200 shadow-sm">
         {/* Simple gradient accent line */}
@@ -124,7 +64,7 @@ const DashboardLayout = () => {
                   {/* Subtle glow on hover */}
                   <div className="absolute inset-0 rounded-lg bg-[#FFDE59]/10 opacity-0 group-hover:opacity-100 transition-opacity duration-200"></div>
                 </div>
-                <div className="ml-3">
+                <div className="ml-3 hidden sm:block">
                   <h1 className="text-xl font-bold text-gray-900 group-hover:text-black transition-colors duration-200">
                     OpenLearn
                   </h1>
@@ -133,26 +73,33 @@ const DashboardLayout = () => {
               </Link>
             </div>
 
-            {/* Search Bar - Hidden on mobile */}
-            <div className="hidden md:flex flex-1 max-w-md mx-8">
-              <SearchBar />
-            </div>
+            {/* Right Section */}
+            <div className="flex items-center space-x-2 sm:space-x-4">
+              {/* Mobile Profile Button - Shows sidebar */}
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setShowMobileSidebar(!showMobileSidebar);
+                }}
+                className="flex md:hidden items-center justify-center w-10 h-10 rounded-lg bg-gray-100/60 hover:bg-[#FFDE59]/15 transition-all duration-300 group"
+              >
+                <User className="h-5 w-5 text-gray-600 group-hover:text-gray-900" />
+              </button>
 
-            {/* Simplified Right Section */}
-            <div className="flex items-center space-x-4">
               {/* Enhanced Admin Panel Link */}
               {(user?.role === 'GRAND_PATHFINDER' || user?.role === 'CHIEF_PATHFINDER') && (
                 <Link
                   to="/admin"
                   className="hidden sm:flex items-center px-3 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 bg-gray-100/60 hover:bg-[#FFDE59]/15 rounded-lg transition-all duration-300 hover:scale-105 border border-gray-200/50 hover:border-[#FFDE59]/40 group"
                 >
                   <Settings className="h-4 w-4 mr-2 group-hover:rotate-45 transition-transform duration-300" />
-                  Admin Panel
+                  <span className="hidden lg:inline">Admin Panel</span>
+                  <span className="lg:hidden">Admin</span>
                 </Link>
               )}
 
-              {/* Simplified User Menu */}
-              <div className="relative">
+              {/* Desktop User Menu */}
+              <div className="hidden md:block relative">
                 <button
                   onClick={(e) => {
                     e.stopPropagation();
@@ -170,7 +117,7 @@ const DashboardLayout = () => {
                       {/* Simplified status indicator */}
                       <div className="absolute -bottom-0.5 -right-0.5 h-3 w-3 bg-green-500 rounded-full border-2 border-white"></div>
                     </div>
-                    <div className="hidden sm:block text-left">
+                    <div className="hidden lg:block text-left">
                       <p className="text-sm font-semibold text-gray-900 truncate max-w-[120px] group-hover:text-black transition-colors duration-200">
                         {user?.name || 'User'}
                       </p>
@@ -182,7 +129,7 @@ const DashboardLayout = () => {
                   </div>
                 </button>
 
-                {/* Simplified Dropdown Menu */}
+                {/* Desktop Dropdown Menu */}
                 {showUserMenu && (
                   <div className="absolute right-0 mt-2 w-64 bg-white rounded-xl shadow-lg border border-gray-200 py-2 z-50 animate-fadeIn">
                     {/* Simple decorative accent */}
@@ -249,26 +196,108 @@ const DashboardLayout = () => {
         </div>
       </header>
 
-      {/* Main Content */}
-      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 min-h-[calc(100vh-120px)]">
-          {/* Left Section - 25% Width (User Profile) */}
-          <div className="lg:col-span-1 h-full">
-            <div className="sticky top-24 h-[calc(100vh-140px)] overflow-y-auto dashboard-scroll">
-              <UserProfileSection user={user} dashboardData={dashboardData} />
+      {/* Mobile Sidebar Overlay */}
+      {showMobileSidebar && (
+        <div className="md:hidden fixed inset-0 z-50 overflow-hidden">
+          {/* Backdrop */}
+          <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={() => setShowMobileSidebar(false)} />
+          
+          {/* Sidebar */}
+          <div className="absolute left-0 top-0 h-full w-80 max-w-[85vw] bg-white shadow-xl transform transition-transform duration-300 ease-out">
+            {/* Sidebar Header */}
+            <div className="flex items-center justify-between p-4 border-b border-gray-100 bg-gradient-to-r from-[#FFDE59]/10 to-[#FFD700]/10">
+              <div className="flex items-center space-x-3">
+                <img
+                  src={getUserAvatarUrl(user, 'avataaars', 40)}
+                  alt={`${user?.name} avatar`}
+                  className="h-10 w-10 rounded-full ring-2 ring-[#FFDE59]/30"
+                />
+                <div>
+                  <p className="text-sm font-semibold text-gray-900 truncate max-w-[180px]">
+                    {user?.name || 'User'}
+                  </p>
+                  <p className="text-xs text-gray-500 capitalize">
+                    {user?.role?.toLowerCase().replace('_', ' ') || 'Student'}
+                  </p>
+                </div>
+              </div>
+              <button
+                onClick={() => setShowMobileSidebar(false)}
+                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+              >
+                <X className="h-5 w-5 text-gray-500" />
+              </button>
+            </div>
+
+            {/* Sidebar Content */}
+            <div className="flex-1 overflow-y-auto p-4">
+              <UserProfileSection user={user} dashboardData={dashboardData} isMobile={true} />
+            </div>
+
+            {/* Sidebar Footer */}
+            <div className="border-t border-gray-100 p-4 space-y-2">
+              <Link
+                to="/"
+                className="flex items-center px-3 py-2 text-sm text-gray-700 hover:bg-[#FFDE59]/10 hover:text-gray-900 transition-all duration-200 rounded-lg group"
+                onClick={() => setShowMobileSidebar(false)}
+              >
+                <Home className="h-4 w-4 mr-3" />
+                Home
+              </Link>
+              
+              {(user?.role === 'GRAND_PATHFINDER' || user?.role === 'CHIEF_PATHFINDER') && (
+                <Link
+                  to="/admin"
+                  className="flex items-center px-3 py-2 text-sm text-gray-700 hover:bg-[#FFDE59]/10 hover:text-gray-900 transition-all duration-200 rounded-lg group"
+                  onClick={() => setShowMobileSidebar(false)}
+                >
+                  <Settings className="h-4 w-4 mr-3" />
+                  Admin Panel
+                </Link>
+              )}
+              
+              <Link
+                to="/logout"
+                className="flex items-center px-3 py-2 text-sm text-red-600 hover:bg-red-50 hover:text-red-700 transition-all duration-200 rounded-lg"
+                onClick={() => setShowMobileSidebar(false)}
+              >
+                <LogOut className="h-4 w-4 mr-3" />
+                Sign out
+              </Link>
             </div>
           </div>
-          
-          {/* Right Section - 75% Width (Main Content) */}
-          <div className="lg:col-span-3 h-full">
-            <div className="h-[calc(100vh-140px)] overflow-y-auto dashboard-scroll">
+        </div>
+      )}
+
+      {/* Main Content - Clean Responsive Layout */}
+      <main className="flex-1">
+        <div className="max-w-7xl mx-auto">
+          {/* Desktop Layout: Sidebar + Content */}
+          <div className="hidden md:flex gap-6 p-6">
+            {/* Desktop Sidebar - Clean fixed width */}
+            <div className="w-80 flex-shrink-0">
+              <div className="sticky top-24 max-h-[calc(100vh-140px)] overflow-y-auto dashboard-scroll">
+                <UserProfileSection user={user} dashboardData={dashboardData} isMobile={false} />
+              </div>
+            </div>
+            
+            {/* Desktop Main Content - Flexible width */}
+            <div className="flex-1 min-w-0">
+              <div className="max-h-[calc(100vh-140px)] overflow-y-auto dashboard-scroll">
+                <Outlet />
+              </div>
+            </div>
+          </div>
+
+          {/* Mobile Layout: Clean Full Width */}
+          <div className="md:hidden">
+            <div className="px-4 py-6">
               <Outlet />
             </div>
           </div>
         </div>
       </main>
     </div>
-    </SearchProvider>
   );
 };
 

src/components/dashboard/ProgressCard.jsx

@@ -101,18 +101,18 @@ const ProgressCard = ({ enrollment, onClick }) => {
         </div>
       </div>
 
-      {/* Stats Grid */}
-      <div className="grid grid-cols-3 gap-4 text-center mb-4">
-        <div>
-          <div className="text-lg font-bold text-green-600">{completedSections}</div>
+      {/* Stats Grid - Responsive layout */}
+      <div className="grid grid-cols-3 gap-2 sm:gap-4 text-center mb-4">
+        <div className="p-2 rounded-lg bg-green-50">
+          <div className="text-base sm:text-lg font-bold text-green-600">{completedSections}</div>
           <div className="text-xs text-gray-500">Completed</div>
         </div>
-        <div>
-          <div className="text-lg font-bold text-blue-600">{totalSections - completedSections}</div>
+        <div className="p-2 rounded-lg bg-blue-50">
+          <div className="text-base sm:text-lg font-bold text-blue-600">{totalSections - completedSections}</div>
           <div className="text-xs text-gray-500">Remaining</div>
         </div>
-        <div>
-          <div className="text-lg font-bold text-gray-900">{totalSections}</div>
+        <div className="p-2 rounded-lg bg-gray-50">
+          <div className="text-base sm:text-lg font-bold text-gray-900">{totalSections}</div>
           <div className="text-xs text-gray-500">Total</div>
         </div>
       </div>