update layu

dashboard_js/app/components/menu.jsx

@@ -0,0 +1,88 @@
+import { createContext, useContext, useState } from 'react'
+import {
+  Menu as HeadlessMenu,
+  MenuButton as HeadlessMenuButton,
+  MenuItem as HeadlessMenuItem,
+  MenuItems as HeadlessMenuItems,
+} from '@headlessui/react'
+import { Loader } from './loader'
+import clsx from 'clsx'
+
+const MenuContext = createContext(null)
+
+export function useMenu() {
+  return useContext(MenuContext)
+}
+
+export function Menu({
+  children,
+  isLoading: defaultIsLoading = false,
+  ...props
+}) {
+  const [isLoading, setIsLoading] = useState(defaultIsLoading)
+
+  return (
+    <MenuContext.Provider
+      value={{ isLoading: isLoading || defaultIsLoading, setIsLoading }}
+    >
+      <HeadlessMenu {...props}>{children}</HeadlessMenu>
+    </MenuContext.Provider>
+  )
+}
+
+export function MenuButton({ children, className, disabled, ...props }) {
+  const { isLoading } = useContext(MenuContext)
+
+  return (
+    <HeadlessMenuButton
+      className={clsx(
+        className,
+        'relative overflow-hidden disabled:pointer-events-none',
+      )}
+      disabled={isLoading || disabled}
+      {...props}
+    >
+      {isLoading && (
+        <div className="absolute inset-0 flex justify-center items-center bg-white dark:bg-slate-800">
+          <Loader className="w-4" />
+        </div>
+      )}
+
+      {children}
+    </HeadlessMenuButton>
+  )
+}
+
+export function MenuItem({ children, className, ...props }) {
+  return (
+    <HeadlessMenuItem
+      className={clsx(
+        'relative flex items-center gap-1 py-2 px-4 hover:bg-zinc-100 dark:hover:bg-slate-600 w-full transition',
+        'aria-[disabled=true]:text-gray-400 aria-[disabled=true]:dark:text-gray-600',
+        'aria-[disabled=true]:pointer-events-none',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </HeadlessMenuItem>
+  )
+}
+
+export function MenuItems({ children, className, ...props }) {
+  return (
+    <HeadlessMenuItems
+      className={clsx(
+        'absolute right-0 origin-top-right bg-white dark:bg-slate-700 rounded-lg drop-shadow shadow overflow-hidden py-2',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </HeadlessMenuItems>
+  )
+}
+
+export function MenuSeparator() {
+  return <hr className="my-2 dark:border-t-slate-600" />
+}

dashboard_js/app/hooks/use-auth.jsx

@@ -4,6 +4,7 @@ import {
   useCallback,
   createContext,
   useState,
+  useEffect,
 } from 'react'
 import * as Auth from 'aws-amplify/auth'
 
@@ -22,6 +23,12 @@ export function useAuth() {
 export function AuthProvider({ children }) {
   const [authUser, setAuthUser] = useState(null)
 
+  useEffect(() => {
+    Auth.fetchUserAttributes().then((user) => {
+      setAuthUser(user)
+    })
+  }, [])
+
   const signIn = useCallback(async ({ username, password }) => {
     const signInOut = await Auth.signIn({
       username,

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

dashboard_js/app/routes.js

@@ -1,7 +1,7 @@
 import { index, route, layout, prefix } from '@react-router/dev/routes'
 
 export default [
-  layout('layouts/app.jsx', [
+  layout('layouts/app/layout.jsx', [
     index('routes/overview/index.jsx'),
     route('users', 'routes/users/index.jsx'),
     route('users/:id', 'routes/users/$id.jsx'),
@@ -13,11 +13,12 @@ export default [
   ]),
   layout('layouts/auth/layout.jsx', [
     ...prefix('auth', [
-      index('routes/auth/signin/index.jsx'),
-      route('signup', 'routes/auth/signup/index.jsx'),
+      index('routes/auth/login/index.jsx'),
+      route('logout', 'routes/auth/logout.jsx'),
+      route('register', 'routes/auth/register/index.jsx'),
       route('forgot', 'routes/auth/forgot/index.jsx'),
       route('passcode', 'routes/auth/passcode/index.jsx'),
-      route('support', 'routes/auth/support/index.jsx'),
+      route('support', 'routes/auth/support.jsx'),
     ]),
   ]),
 ]

dashboard_js/app/routes/auth/logout.jsx

@@ -0,0 +1,15 @@
+import { useNavigate } from 'react-router'
+import { useEffect } from 'react'
+import { useAuth } from '~/hooks/use-auth'
+
+export default function Component() {
+  const { signOut } = useAuth()
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    signOut()
+    navigate('/auth')
+  }, [])
+
+  return <></>
+}

dashboard_js/app/routes/auth/support.jsx

@@ -0,0 +1,9 @@
+import { Heading } from '~/components/heading'
+
+export default function Component() {
+  return (
+    <>
+      <Heading>...</Heading>
+    </>
+  )
+}

dashboard_js/app/routes/auth/support/index.jsx

@@ -1,5 +0,0 @@
-import { Heading } from '../../../components/heading'
-
-export default function Component() {
-  return <>...</>
-}

dashboard_js/app/routes/users/index.jsx

@@ -6,7 +6,7 @@ export function meta({}) {
 
 export default function Component() {
   const info = useSuspenseQuery({
-    queryKey: ['todos'],
+    queryKey: ['users'],
     queryFn: async () => {
       await new Promise((r) => setTimeout(r, 3000))
       return { data: 'todos' }