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/intern/components/SidebarIntern.tsx

@@ -1,6 +1,5 @@
-import { useNavigate } from 'react-router-dom';
-import { Home, FolderKanban, Award, Settings, HelpCircle, LogOut, ChevronRight } from 'lucide-react';
-import { useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { Home, FolderKanban, Award, Settings, HelpCircle, LogOut, ChevronRight, X } from 'lucide-react';
 
 const navItems = [
   { label: "Home", icon: Home, path: "/intern" },
@@ -11,36 +10,62 @@ const navItems = [
 const prefItems = [
   { label: "Settings", icon: Settings, path: "/intern/settings" },
   { label: "FAQ", icon: HelpCircle, path: "/intern/faq" },
-  { label: "Logout", icon: LogOut, path: "/intern/logout", danger: true },
+  { label: "Logout", icon: LogOut, path: "/login-internify", danger: true },
 ];
 
-function SidebarIntern() {
+interface SidebarProps {
+  isOpen: boolean;
+  closeSidebar: () => void;
+}
+
+export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
   const navigate = useNavigate();
-  const [active, setActive] = useState("/intern");
+  const location = useLocation();
 
   const handleNav = (path: string) => {
-    setActive(path);
     navigate(path);
+    closeSidebar(); // Otomatis tutup sidebar setelah klik menu di HP
   };
 
   return (
-    <aside className="w-[279px] bg-white border-r border-gray-100 flex flex-col py-5 px-3 gap-1 sticky top-[73px] h-[calc(100vh-73px)] overflow-y-auto flex-shrink-0">
-      {/* Brand */}
-      <div className="flex items-center gap-2.5 px-2 pb-4">
-        <div className="w-9 h-9 rounded-[10px] bg-red-600 flex items-center justify-center flex-shrink-0">
-        </div>
-        <div>
-          <p className="text-sm font-bold text-gray-900 leading-tight">Internify</p>
-          <p className="text-[11px] text-gray-400">LMS Portal</p>
+    <aside 
+      className={`
+        /* Struktur Dasar Layout */
+        bg-white border-r border-gray-300 flex flex-col py-5 px-3 gap-1 overflow-y-auto flex-shrink-0 transition-transform duration-300 ease-in-out
+        
+        /* Kondisi Layar Desktop (>= md) */
+        md:sticky md:top-[73px] md:h-[calc(100vh-73px)] md:w-[250px] md:translate-x-0 md:z-8
+        
+        /* Kondisi Layar Mobile (< md) dan Logika Aktif-nya */
+        fixed top-0 left-0 h-screen w-[270px] z-40 pt-5
+        ${isOpen ? "translate-x-0" : "-translate-x-full"}
+      `}
+    >
+      {/* Brand & Tombol Close untuk Mobile */}
+      <div className="flex items-center justify-between px-2 pb-4">
+        <div className="flex items-center gap-2.5">
+          <div className="w-9 h-9 rounded-[10px] bg-red-600 flex items-center justify-center flex-shrink-0"></div>
+          <div>
+            <p className="text-sm font-bold text-gray-900 leading-tight">Internify</p>
+            <p className="text-[11px] text-gray-400">LMS Portal</p>
+          </div>
         </div>
+
+        {/* Tombol Close silang (X): Hanya muncul di HP saat sidebar terbuka */}
+        <button 
+          onClick={closeSidebar} 
+          className="p-1 text-gray-500 hover:bg-gray-100 rounded-md md:hidden"
+        >
+          <X className="w-5 h-5" />
+        </button>
       </div>
 
-      <div className="h-px bg-gray-100 my-1" />
+      <div className="h-px bg-gray-300 my-1" />
 
       {/* Main nav */}
       <nav className="flex flex-col gap-0.5">
         {navItems.map(({ label, icon: Icon, path }) => {
-          const isActive = active === path;
+          const isActive = location.pathname === path; 
           return (
             <button
               key={path}
@@ -53,15 +78,13 @@ function SidebarIntern() {
             >
               <Icon className="w-[18px] h-[18px] flex-shrink-0" />
               <span>{label}</span>
-              {isActive && (
-                <ChevronRight className="w-3.5 h-3.5 ml-auto opacity-60" />
-              )}
+              {isActive && <ChevronRight className="w-3.5 h-3.5 ml-auto opacity-60" />}
             </button>
           );
         })}
       </nav>
 
-      <div className="h-px bg-gray-100 my-1" />
+      <div className="h-px bg-gray-200 my-1" />
 
       {/* Preferences */}
       <p className="text-[10px] font-semibold tracking-widest text-gray-400 px-3 py-1.5">
@@ -69,7 +92,7 @@ function SidebarIntern() {
       </p>
       <nav className="flex flex-col gap-0.5">
         {prefItems.map(({ label, icon: Icon, path, danger }) => {
-          const isActive = active === path;
+          const isActive = location.pathname === path;
           return (
             <button
               key={path}
@@ -88,10 +111,6 @@ function SidebarIntern() {
           );
         })}
       </nav>
-
     </aside>
   );
-}
-
-
-export default SidebarIntern
+}