Dashboard header remove

Frontend/src/App.tsx

@@ -6,18 +6,14 @@ import AIInterview from "./pages/AiInterview";
 import Quize from "./pages/quize";
 import Home from "./pages/home";
 import Sidebar from "./components/dashboard/Sidebar";
-import Header from "./components/dashboard/Header";
 
 const App: React.FC = () => {
-  // Track authentication state
   const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
 
-  // Function to handle successful login
   const handleLogin = () => {
     setIsAuthenticated(true);
   };
 
-  // Function to handle logout
   const handleLogout = () => {
     setIsAuthenticated(false);
   };
@@ -25,45 +21,46 @@ const App: React.FC = () => {
   return (
     <Router>
       <Routes>
-        {/* Public Route - Home Page */}
-        <Route 
-          path="/" 
+
+        {/* Public Route */}
+        <Route
+          path="/"
           element={
             isAuthenticated ? (
               <Navigate to="/dashboard" replace />
             ) : (
               <Home onLogin={handleLogin} />
             )
-          } 
+          }
         />
 
-        {/* Protected Routes - Dashboard Layout */}
+        {/* Protected Routes */}
         <Route
           path="/*"
           element={
             isAuthenticated ? (
               <div className="flex h-screen bg-gray-100">
-                {/* Sidebar */}
-                <Sidebar />
+
+                {/* Sidebar (only once) */}
+                <Sidebar onLogout={handleLogout} />
 
                 {/* Main Content */}
-                <div className="flex-1 flex flex-col">
-                  <Header onLogout={handleLogout} />
-                  <main className="flex-1 overflow-y-auto p-6">
-                    <Routes>
-                      <Route path="/dashboard" element={<Dashboard />} />
-                      <Route path="/notes" element={<Notes />} />
-                      <Route path="/AIInterview" element={<AIInterview />} />
-                      <Route path="/quize" element={<Quize />} />
-                    </Routes>
-                  </main>
-                </div>
+                <main className="flex-1 overflow-y-auto p-6">
+                  <Routes>
+                    <Route path="/dashboard" element={<Dashboard />} />
+                    <Route path="/notes" element={<Notes />} />
+                    <Route path="/AIInterview" element={<AIInterview />} />
+                    <Route path="/quize" element={<Quize />} />
+                  </Routes>
+                </main>
+
               </div>
             ) : (
               <Navigate to="/" replace />
             )
           }
         />
+
       </Routes>
     </Router>
   );

Frontend/src/components/dashboard/Header.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { LogOut, Bell, Settings, User } from 'lucide-react';
-
-interface HeaderProps {
-  onLogout: () => void;
-}
-
-const Header: React.FC<HeaderProps> = ({ onLogout }) => {
-  return (
-    <header className="bg-white shadow-sm border-b border-gray-200 px-6 py-4">
-      <div className="flex items-center justify-between">
-        {/* Left side - Title or Search */}
-        <div>
-          <h1 className="text-2xl font-bold text-gray-800">Dashboard</h1>
-        </div>
-
-        {/* Right side - Actions */}
-        <div className="flex items-center space-x-4">
-          {/* Notifications */}
-          <button className="p-2 rounded-lg hover:bg-gray-100 transition-colors relative">
-            <Bell className="w-5 h-5 text-gray-600" />
-            <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
-          </button>
-
-          {/* Settings */}
-          <button className="p-2 rounded-lg hover:bg-gray-100 transition-colors">
-            <Settings className="w-5 h-5 text-gray-600" />
-          </button>
-
-          {/* User Profile */}
-          <div className="flex items-center space-x-3 pl-4 border-l border-gray-200">
-            <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
-              <User className="w-5 h-5 text-white" />
-            </div>
-            <div className="hidden md:block">
-              <p className="text-sm font-medium text-gray-700">John Doe</p>
-              <p className="text-xs text-gray-500">john@example.com</p>
-            </div>
-          </div>
-
-          {/* Logout Button */}
-          <button
-            onClick={onLogout}
-            className="flex items-center space-x-2 px-4 py-2 rounded-lg bg-red-500 hover:bg-red-600 text-white transition-colors"
-          >
-            <LogOut className="w-4 h-4" />
-            <span className="hidden md:inline">Logout</span>
-          </button>
-        </div>
-      </div>
-    </header>
-  );
-};
-
-export default Header;

Frontend/src/components/dashboard/Sidebar.tsx

@@ -1,8 +1,15 @@
 import React from "react";
 import { Link, useLocation } from "react-router-dom";
-import { Home, FileText, Brain, BookOpen } from "lucide-react";
+import { 
+  Home, FileText, Brain, BookOpen, 
+  Bell, Settings, User, LogOut 
+} from "lucide-react";
 
-const Sidebar: React.FC = () => {
+interface SidebarProps {
+  onLogout?: () => void;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ onLogout }) => {
   const location = useLocation();
 
   const navItems = [
@@ -11,26 +18,54 @@ const Sidebar: React.FC = () => {
     { path: "/AIInterview", label: "AI Interview", icon: <Brain size={18} /> },
     { path: "/quize", label: "Resume Quiz", icon: <FileText size={18} /> },
   ];
-
   return (
-    <aside className="w-64 bg-gray-900 text-white flex flex-col">
-      <div className="text-2xl font-bold text-center py-6 border-b border-gray-700">
-        InterviewAI
+    <aside className="w-64 bg-gray-900 text-white flex flex-col justify-between">
+      
+      {/* Top Section */}
+      <div>
+        <div className="text-2xl font-bold text-center py-6 border-b border-gray-700">
+          InterviewAI
+        </div>
+
+        <nav className="p-4 space-y-3">
+          {navItems.map((item) => (
+            <Link
+              key={item.path}
+              to={item.path}
+              className={`flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition ${
+                location.pathname === item.path ? "bg-gray-800" : ""
+              }`}
+            >
+              {item.icon}
+              <span>{item.label}</span>
+            </Link>
+          ))}
+        </nav>
       </div>
-      <nav className="flex-1 p-4 space-y-3">
-        {navItems.map((item) => (
-          <Link
-            key={item.path}
-            to={item.path}
-            className={`flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition ${
-              location.pathname === item.path ? "bg-gray-800" : ""
-            }`}
-          >
-            {item.icon}
-            <span>{item.label}</span>
-          </Link>
-        ))}
-      </nav>
+
+      {/* Bottom Section (From Header) */}
+      <div className="p-4 border-t border-gray-700 space-y-4">
+        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left">
+          <Bell size={18} />
+          <span>Notifications</span>
+        </button>
+
+        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left">
+          <Settings size={18} />
+          <span>Settings</span>
+        </button>
+
+        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-gray-800 transition w-full text-left">
+          <User size={18} />
+          <span>John Doe</span>
+        </button>
+
+        <button className="flex items-center space-x-3 p-3 rounded-lg hover:bg-red-600/20 text-red-400 transition w-full text-left">
+          <LogOut size={18} />
+          <span>Logout</span>
+        </button>
+      </div>
+
     </aside>
   );
 };