120 lines
3.4 KiB
JavaScript
120 lines
3.4 KiB
JavaScript
import { useNavigation, redirect, useNavigate } from 'react-router'
|
|
import { fetchAuthSession } from 'aws-amplify/auth'
|
|
import {
|
|
AcademicCapIcon,
|
|
PresentationChartLineIcon,
|
|
UserGroupIcon,
|
|
ShoppingBagIcon,
|
|
Bars3BottomLeftIcon,
|
|
} from '@heroicons/react/24/outline'
|
|
import { NavLink } from 'react-router'
|
|
import { Outlet } from 'react-router'
|
|
import { Container } from '~/components/container'
|
|
import { Smallest, Regular } from '~/components/logo'
|
|
import { clsx } from 'clsx'
|
|
import { UserMenu } from './_user-menu'
|
|
|
|
export async function clientLoader() {
|
|
const session = await fetchAuthSession()
|
|
|
|
if (!session?.tokens?.idToken) {
|
|
throw redirect('/auth')
|
|
}
|
|
}
|
|
|
|
export default function Layout() {
|
|
const navigation = useNavigation()
|
|
const isNavigating = Boolean(navigation.location)
|
|
|
|
return (
|
|
<div>
|
|
<aside
|
|
role="navigation"
|
|
className="p-4 w-80 h-full fixed top-0 left-0 bg-yellow-terciary dark:bg-green-primary z-40 overflow-y-auto max-lg:hidden"
|
|
>
|
|
<div className="space-y-6">
|
|
<Logo className="h-12 lg:h-14" />
|
|
|
|
<ul className="space-y-1 font-medium">
|
|
<Link to="/" icon={PresentationChartLineIcon}>
|
|
<>Visão geral</>
|
|
</Link>
|
|
|
|
<Link to="/orders" icon={ShoppingBagIcon}>
|
|
<>Pagamentos</>
|
|
</Link>
|
|
|
|
<Link to="/users" icon={UserGroupIcon}>
|
|
<>Usuários</>
|
|
</Link>
|
|
|
|
<Link to="/enrollments" icon={AcademicCapIcon}>
|
|
Matriculas
|
|
</Link>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
|
|
<section className="lg:ml-80">
|
|
<header className="flex items-center bg-slate-50/50 dark:bg-gray-900/50 backdrop-blur backdrop-filter sticky top-0 border-b border-gray-200 dark:border-gray-700 lg:border-0 z-20 h-16 px-4 lg:px-8">
|
|
{/* Mobile menu button */}
|
|
<button className="lg:hidden" onClick={() => setIsOpen(true)}>
|
|
<span className="sr-only">Abrir barra lateral</span>
|
|
<Bars3BottomLeftIcon className="w-6" />
|
|
</button>
|
|
|
|
<div className="ml-auto flex items-center">
|
|
<UserMenu />
|
|
</div>
|
|
</header>
|
|
|
|
<main className="p-4 lg:p-8">
|
|
{isNavigating ? <Loading /> : <Outlet />}
|
|
</main>
|
|
</section>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Link({ children, icon: Icon, ...props }) {
|
|
return (
|
|
<li>
|
|
<NavLink
|
|
className="aria-[current=page]:text-white aria-[current=page]:bg-green-dark hover:bg-green-secondary dark:hover:text-white p-2.5 rounded-lg flex gap-2 transition"
|
|
{...props}
|
|
>
|
|
<Icon className="w-6" />
|
|
<span>{children}</span>
|
|
</NavLink>
|
|
</li>
|
|
)
|
|
}
|
|
|
|
function Loading() {
|
|
return (
|
|
<Container>
|
|
<div className="animate-pulse flex flex-col gap-2.5 lg:w-2/4 [&>*]:bg-gray-200 dark:[&>*]:bg-gray-700 [&>*]:h-5 [&>*]:rounded">
|
|
<div className="w-2/6" />
|
|
<div className="w-4/6" />
|
|
<div className="w-5/6" />
|
|
<div className="w-5/6" />
|
|
<div className="w-6/6" />
|
|
<div className="w-6/6" />
|
|
<div className="w-3/6" />
|
|
<div className="w-5/6" />
|
|
<div className="w-4/6" />
|
|
<div className="w-4/6" />
|
|
</div>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
function Logo({ className }) {
|
|
return (
|
|
<div>
|
|
<Regular className={clsx(className)} />
|
|
{/* <Smallest className={clsx('lg:hidden w-full', className)} /> */}
|
|
</div>
|
|
)
|
|
}
|