feat: add modals for managing interns, creating projects, and tasks

- Implemented AddInternsDialog for inviting and managing interns.
- Created CreateProjectDialog for launching new projects with detailed forms.
- Added CreateTaskDialog for task creation with deadline and submission type options.
- Enhanced Header component with navigation functionality.
- Updated MentorProjectCard to navigate correctly to mentor projects.
- Refactored SidebarMentor for improved navigation and mobile responsiveness.
- Adjusted Internify login logic to streamline user role navigation.
- Added CSS styles for consistent layout and design.
- Introduced mock data for interns to facilitate development and testing.

src/Pages/internify/layout.tsx

@@ -1,16 +1,26 @@
 import { Outlet } from "react-router-dom";
+import { useState } from "react";
 import Header from './mentor/components/Header';
 import SidebarIntern from './intern/components/SidebarIntern';
-import SidebarAdmin from '../../Layout/SidebarAdmin';
+import SidebarMentor from './mentor/components/SidebarMentor';
 import FooterIntern from '../../Layout/Footer-Internify';
 
 export const InternLayout = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+  const closeSidebar = () => setIsSidebarOpen(false);
   return (
-    <div className="min-h-screen bg-gray-50 flex flex-col">
-      <Header />
-      <div className="flex flex-1">
-        <SidebarIntern />
-        <main className="flex-1 flex flex-col min-w-0">
+    <div className="min-h-screen bg-gray-50 flex flex-col relative">
+      <Header toggleSidebar={toggleSidebar}/>
+      <div className="flex flex-1 relative">
+        <SidebarIntern isOpen={isSidebarOpen} closeSidebar={closeSidebar} />
+        {isSidebarOpen && (
+          <div 
+            className="fixed inset-0 bg-black/20 z-20 md:hidden min-h-screen" 
+            onClick={closeSidebar}
+          />
+        )}
+        <main className="flex-1 flex flex-col">
           <Outlet />
         </main>
       </div>
@@ -20,11 +30,20 @@ export const InternLayout = () => {
 };
 
 export const MentorLayout = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+  const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
+  const closeSidebar = () => setIsSidebarOpen(false);
   return (
     <div className="min-h-screen bg-gray-50 flex flex-col">
-      <Header />
+      <Header toggleSidebar={toggleSidebar}/>
       <div className="flex flex-1">
-        <SidebarAdmin />
+        <SidebarMentor isOpen={isSidebarOpen} closeSidebar={closeSidebar} />
+        {isSidebarOpen && (
+          <div 
+            className="fixed inset-0 bg-black/20 z-20 md:hidden min-h-screen" 
+            onClick={closeSidebar}
+          />
+        )}
         <main className="flex-1 flex flex-col min-w-0">
           <Outlet />
         </main>