moidifiche a Layout.tsx
This commit is contained in:
parent
f05bf838d2
commit
26a97a1304
3 changed files with 11 additions and 37 deletions
|
|
@ -25,7 +25,7 @@ export default function AppSidebar({ onNavigate }: AppSidebarProps) {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<aside className="flex h-full w-64 shrink-0 flex-col border-r bg-card">
|
<aside className="flex min-h-svh w-64 shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground">
|
||||||
<div className="border-b px-4 py-4">
|
<div className="border-b px-4 py-4">
|
||||||
<p className="text-sm font-semibold">Academy Aziendale</p>
|
<p className="text-sm font-semibold">Academy Aziendale</p>
|
||||||
<p className="text-xs text-muted-foreground">Gestione formazione</p>
|
<p className="text-xs text-muted-foreground">Gestione formazione</p>
|
||||||
|
|
@ -39,10 +39,10 @@ export default function AppSidebar({ onNavigate }: AppSidebarProps) {
|
||||||
onClick={onNavigate}
|
onClick={onNavigate}
|
||||||
className={({ isActive }) =>
|
className={({ isActive }) =>
|
||||||
cn(
|
cn(
|
||||||
"flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors",
|
"flex items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium no-underline transition-colors",
|
||||||
isActive
|
isActive
|
||||||
? "bg-primary text-primary-foreground"
|
? "bg-sidebar-primary text-sidebar-primary-foreground"
|
||||||
: "text-muted-foreground hover:bg-muted hover:text-foreground"
|
: "text-sidebar-foreground/80 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -1,33 +1,14 @@
|
||||||
import { Link, Outlet, useNavigate } from "react-router-dom";
|
import { Outlet } from "react-router-dom";
|
||||||
import { useAuth } from "../context/AuthContext";
|
import AppSidebar from "@/components/AppSidebar";
|
||||||
|
|
||||||
export default function Layout() {
|
export default function Layout() {
|
||||||
const { user, logout } = useAuth();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const handleLogout = async () => {
|
|
||||||
await logout();
|
|
||||||
navigate("/login");
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="layout">
|
<div className="flex min-h-svh bg-background">
|
||||||
<header className="header">
|
<AppSidebar />
|
||||||
<div className="header-inner">
|
<main className="flex min-w-0 flex-1 flex-col overflow-auto">
|
||||||
<Link to="/dashboard" className="logo">
|
<div className="mx-auto w-full max-w-6xl flex-1 p-6">
|
||||||
Academy aziendale
|
<Outlet />
|
||||||
</Link>
|
|
||||||
<nav>
|
|
||||||
<Link to="/dashboard">Dashboard</Link>
|
|
||||||
</nav>
|
|
||||||
<div className="user-bar">
|
|
||||||
<span>{user?.nome} {user?.cognome}</span>
|
|
||||||
<button type="button" onClick={handleLogout}>Esci</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
|
||||||
<main className="main">
|
|
||||||
<Outlet />
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -13,9 +13,6 @@
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
|
||||||
background: #f1f5f9;
|
|
||||||
color: #1e293b;
|
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -23,10 +20,6 @@ body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
|
||||||
color: #2563eb;
|
|
||||||
}
|
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--font-heading: var(--font-sans);
|
--font-heading: var(--font-sans);
|
||||||
--font-sans: 'Geist Variable', sans-serif;
|
--font-sans: 'Geist Variable', sans-serif;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue