86 lines
3.2 KiB
TypeScript
86 lines
3.2 KiB
TypeScript
import React, { useMemo, useState } from "react";
|
||
import { NavLink, Outlet, useNavigate } from "react-router-dom";
|
||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
import { faHouse, faBriefcase, faArrowRightFromBracket, faUser } from "@fortawesome/free-solid-svg-icons";
|
||
import { Button } from "./ui/button";
|
||
import { ThemeToggle } from "./ThemeToggle";
|
||
import { useAuth } from "../providers/auth-provider";
|
||
import { cn } from "../lib/utils";
|
||
|
||
export function DashboardLayout() {
|
||
const { user, logout } = useAuth();
|
||
const navigate = useNavigate();
|
||
const [isLoggingOut, setIsLoggingOut] = useState(false);
|
||
|
||
const navigation = useMemo(
|
||
() => [
|
||
{ label: "Home", to: "/home", icon: faHouse },
|
||
{ label: "Jobs", to: "/jobs", icon: faBriefcase }
|
||
],
|
||
[]
|
||
);
|
||
|
||
const handleLogout = () => {
|
||
setIsLoggingOut(true);
|
||
logout();
|
||
navigate("/login", { replace: true });
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-background text-foreground">
|
||
<div className="flex min-h-screen">
|
||
<aside className="hidden w-64 flex-col border-r border-border bg-card/40 md:flex">
|
||
<div className="flex h-16 items-center border-b border-border px-6">
|
||
<span className="text-lg font-semibold tracking-tight">Wisecolt CI</span>
|
||
</div>
|
||
<nav className="flex-1 space-y-1 px-3 py-4">
|
||
{navigation.map((item) => (
|
||
<NavLink
|
||
key={item.to}
|
||
to={item.to}
|
||
className={({ isActive }) =>
|
||
cn(
|
||
"flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition",
|
||
isActive
|
||
? "bg-accent text-foreground shadow-sm"
|
||
: "text-muted-foreground hover:bg-accent hover:text-foreground"
|
||
)
|
||
}
|
||
>
|
||
<FontAwesomeIcon icon={item.icon} className="h-4 w-4" />
|
||
<span>{item.label}</span>
|
||
</NavLink>
|
||
))}
|
||
</nav>
|
||
<div className="mt-auto space-y-3 border-t border-border px-4 py-4">
|
||
<div className="flex gap-3">
|
||
<ThemeToggle size="icon" className="h-10 w-10 justify-center" />
|
||
<div className="flex h-10 flex-1 items-center gap-3 rounded-md border border-border bg-background px-3">
|
||
<FontAwesomeIcon icon={faUser} className="h-4 w-4 text-muted-foreground" />
|
||
<span className="text-sm font-medium text-foreground">{user?.username ?? "-"}</span>
|
||
</div>
|
||
</div>
|
||
<Button
|
||
variant="outline"
|
||
className="w-full justify-center gap-2"
|
||
onClick={handleLogout}
|
||
disabled={isLoggingOut}
|
||
>
|
||
<FontAwesomeIcon icon={faArrowRightFromBracket} className="h-4 w-4" />
|
||
Çıkış Yap
|
||
</Button>
|
||
</div>
|
||
</aside>
|
||
|
||
<main className="flex-1">
|
||
<div className="mx-auto flex max-w-5xl flex-col gap-6 px-4 py-8 sm:px-6 lg:px-8">
|
||
<div className="grid gap-6">
|
||
<Outlet />
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|