sulthan/internify-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implementasi Backend pada login, FAQ, Settings Intern, Projects Intern, Home Intern

Browse Source
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-06-25 00:35:53 +07:00
parent 9e5a97ef10
commit f63efb0e12
29 changed files with 682 additions and 280 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Pages/internify/intern/components/SidebarIntern.tsx
+25 -19
View File
@@ -1,16 +1,18 @@
import { useNavigate, useLocation } from 'react-router-dom';
import { Home, FolderKanban, Award, Settings, HelpCircle, LogOut, ChevronRight, X } from 'lucide-react';
import { Award, Settings, HelpCircle, X } from 'lucide-react';
import { GrHomeRounded } from "react-icons/gr";
import { MdOutlineAssignment, MdLogout } from "react-icons/md";
const navItems = [
{ label: "Home", icon: Home, path: "/intern" },
{ label: "List Projects", icon: FolderKanban, path: "/intern/projects" },
{ label: "Home", icon: GrHomeRounded, path: "/intern" },
{ label: "List Projects", icon: MdOutlineAssignment, path: "/intern/projects" },
{ label: "Certificates", icon: Award, path: "/intern/certificates" },
];
const prefItems = [
{ label: "Settings", icon: Settings, path: "/intern/settings" },
{ label: "FAQ", icon: HelpCircle, path: "/intern/faq" },
{ label: "Logout", icon: LogOut, path: "/login-internify", danger: true },
{ label: "Logout", icon: MdLogout, path: "/login-internify", danger: true, isLogout: true },
];
interface SidebarProps {
@@ -24,11 +26,18 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
const handleNav = (path: string) => {
navigate(path);
closeSidebar(); // Otomatis tutup sidebar setelah klik menu di HP
closeSidebar();
};
const handleLogout = () => {
document.cookie = "token=; path=/; max-age=86400; SameSite=Strict";
closeSidebar();
navigate("/login-internify", { replace: true });
};
return (
<aside
<aside
className={`
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
lg:sticky lg:top-[50px] lg:h-[calc(100vh-73px)] lg:w-[250px] lg:translate-x-0 lg:z-8
@@ -37,7 +46,7 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
`}
>
{/* Brand & Tombol Close untuk Mobile */}
<div className="flex items-center justify-between px-2 pb-4">
<div className="flex items-center justify-between px-2 pb-10">
<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>
@@ -47,33 +56,30 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
</div>
{/* Tombol Close silang (X): Hanya muncul di HP saat sidebar terbuka */}
<button
onClick={closeSidebar}
<button
onClick={closeSidebar}
className="p-1 text-gray-500 hover:bg-gray-100 rounded-lg lg:hidden"
>
<X className="w-5 h-5" />
</button>
</div>
<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 = location.pathname === path;
const isActive = location.pathname === path;
return (
<button
key={path}
onClick={() => handleNav(path)}
className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
${isActive
? "bg-red-50 text-red-600 font-semibold border-l-4 border-red-600"
: "text-gray-500 hover:bg-red-50 hover:text-red-600"
? "bg-base-foreground text-base font-semibold border-l-4 border-base"
: "text-font hover:bg-base-foreground hover:text-base"
}`}
>
<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" />}
</button>
);
})}
@@ -86,18 +92,18 @@ export default function SidebarIntern({ isOpen, closeSidebar }: SidebarProps) {
PREFERENCES
</p>
<nav className="flex flex-col gap-0.5">
{prefItems.map(({ label, icon: Icon, path, danger }) => {
{prefItems.map(({ label, icon: Icon, path, danger, isLogout }) => {
const isActive = location.pathname === path;
return (
<button
key={path}
onClick={() => handleNav(path)}
onClick={() => isLogout ? handleLogout() : handleNav(path)}
className={`flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-[13.5px] font-medium text-left transition-colors
${isActive
? "bg-red-50 text-red-600 font-semibold"
: danger
? "text-gray-400 hover:bg-red-50 hover:text-red-600"
: "text-gray-500 hover:bg-red-50 hover:text-red-600"
? "text-font hover:bg-base-foreground hover:text-base"
: "text-font hover:bg-base-foreground hover:text-base"
}`}
>
<Icon className="w-[18px] h-[18px] flex-shrink-0" />