update layu

dashboard_js/app/layouts/app/_user-menu.jsx

@@ -0,0 +1,57 @@
+import { useAuth } from '~/hooks/use-auth'
+import { MenuButton, MenuItem as HeadlessMenuItem } from '@headlessui/react'
+import {
+  ChevronDownIcon,
+  AdjustmentsHorizontalIcon,
+  ArrowRightStartOnRectangleIcon,
+} from '@heroicons/react/24/solid'
+import { BookOpenIcon } from '@heroicons/react/24/outline'
+import { Menu, MenuItem, MenuItems, MenuSeparator } from '~/components/menu'
+import clsx from 'clsx'
+import { Link } from 'react-router'
+
+export function UserMenu({ className }) {
+  const { authUser } = useAuth()
+
+  return (
+    <Menu as="div" className={clsx('relative', className)}>
+      <MenuButton className="flex gap-0.5 items-center cursor-pointer">
+        <div className="w-10 h-10 bg-zinc-200 dark:bg-gray-800 rounded-full overflow-hidden">
+          {/* <Avatar
+            name={authUser.name}
+            email={authUser.email}
+            size={40}
+            maxInitials={2}
+          /> */}
+        </div>
+        <ChevronDownIcon className="w-5 fill-gray-500 dark:fill-white" />
+      </MenuButton>
+
+      <MenuItems className="w-64 mt-1">
+        {/* User */}
+        <HeadlessMenuItem as="div" className="py-2 px-4">
+          <div className="font-semibold truncate">{authUser?.name}</div>
+          <div className="text-sm text-gray-600 dark:text-slate-300 truncate">
+            {authUser?.email}
+          </div>
+        </HeadlessMenuItem>
+
+        <MenuSeparator />
+
+        <MenuItem as={Link} target="_blank" to="/redirect-out">
+          <BookOpenIcon className="w-5" /> Sala de aula
+        </MenuItem>
+
+        <MenuSeparator />
+
+        <MenuItem as={Link} to="/settings">
+          <AdjustmentsHorizontalIcon className="w-5" /> Configurações
+        </MenuItem>
+
+        <MenuItem as={Link} to="/auth/logout">
+          <ArrowRightStartOnRectangleIcon className="w-5" /> Sair
+        </MenuItem>
+      </MenuItems>
+    </Menu>
+  )
+}

dashboard_js/app/layouts/app/layout.jsx

@@ -2,8 +2,10 @@ import { useNavigation, redirect, useNavigate } from 'react-router'
 import { fetchAuthSession } from 'aws-amplify/auth'
 import { Link } from 'react-router'
 import { Outlet } from 'react-router'
-import { useAuth } from '~/hooks/use-auth'
 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()
@@ -15,14 +17,14 @@ export async function clientLoader() {
 
 export default function Layout() {
   const navigation = useNavigation()
-  const navigate = useNavigate()
-  const { signOut } = useAuth()
   const isNavigating = Boolean(navigation.location)
 
   return (
-    <>
-      <nav>
-        <ul className="flex gap-1">
+    <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>
@@ -33,26 +35,27 @@ export default function Layout() {
             <Link to="/enrollments">Matrículas</Link>
           </li>
         </ul>
+      </aside>
 
-        <button
-          onClick={() => {
-            signOut()
-            navigate('/auth')
-          }}
-        >
-          Sair
-        </button>
-      </nav>
+      <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>
 
-      {isNavigating ? <Loading /> : <Outlet />}
-    </>
+        <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-md">
+      <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" />
@@ -67,3 +70,12 @@ function Loading() {
     </Container>
   )
 }
+
+function Logo({ className }) {
+  return (
+    <div>
+      <Regular className={clsx('max-lg:hidden', className)} />
+      <Smallest className={clsx('lg:hidden w-full', className)} />
+    </div>
+  )
+}

dashboard_js/app/layouts/auth/layout.jsx

@@ -1,7 +1,8 @@
-import { Outlet, Link, useSearchParams } from 'react-router'
+import { Outlet, Link as RouterLink, useSearchParams } from 'react-router'
 import { Regular as Logo } from '../../components/logo'
 import Pulse from './_pulse'
 import WomanImg from './woman.png'
+import { Link } from './_link'
 
 export default function Auth() {
   const [searchParams] = useSearchParams()
@@ -48,6 +49,7 @@ export default function Auth() {
                 pathname: '/auth/support',
                 search: searchParams.toString(),
               }}
+              as={RouterLink}
               state={{ location: window.location.href }}
             >
               Precisa de ajuda? Fale conosco