34 lines
928 B
TypeScript
34 lines
928 B
TypeScript
import { NavLink, Outlet } from "react-router-dom";
|
|
|
|
export function AppLayout(): JSX.Element {
|
|
return (
|
|
<div className="app-shell">
|
|
<header className="app-shell__header">
|
|
<div className="app-shell__brand">Calendar Run</div>
|
|
<nav className="app-shell__nav" aria-label="Primary navigation">
|
|
<NavLink
|
|
to="/"
|
|
end
|
|
className={({ isActive }) =>
|
|
isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
|
|
}
|
|
>
|
|
Dashboard
|
|
</NavLink>
|
|
<NavLink
|
|
to="/races"
|
|
className={({ isActive }) =>
|
|
isActive ? "app-shell__link app-shell__link--active" : "app-shell__link"
|
|
}
|
|
>
|
|
Races
|
|
</NavLink>
|
|
</nav>
|
|
</header>
|
|
<main className="app-shell__main">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|