update layu

dashboard_js/app/layouts/app/layout.jsx

@@ -0,0 +1,81 @@
+import { useNavigation, redirect, useNavigate } from 'react-router'
+import { fetchAuthSession } from 'aws-amplify/auth'
+import { Link } 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 className="p-4 w-80 h-full fixed top-0 left-0 dark:bg-green-primary max-lg:hidden">
+        <Logo className="h-12 lg:h-14" />
+
+        <ul className="flex flex-col gap-1">
+          <li>
+            <Link to="/orders">Pagamentos</Link>
+          </li>
+          <li>
+            <Link to="/users">Usuários</Link>
+          </li>
+          <li>
+            <Link to="/enrollments">Matrículas</Link>
+          </li>
+        </ul>
+      </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 dark:border-gray-700 lg:border-0 z-20 h-16 px-4 lg:px-8">
+          <div className="ml-auto flex items-center">
+            <UserMenu />
+          </div>
+        </header>
+
+        <main className="p-4 lg:p-8">
+          {isNavigating ? <Loading /> : <Outlet />}
+        </main>
+      </section>
+    </div>
+  )
+}
+
+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('max-lg:hidden', className)} />
+      <Smallest className={clsx('lg:hidden w-full', className)} />
+    </div>
+  )
+}