48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import { NavLink, Outlet, useNavigate } from 'react-router-dom'
|
|
import { supabase } from '../../lib/supabase'
|
|
import styles from './AdminLayout.module.css'
|
|
|
|
const NAV_ITEMS = [
|
|
{ to: '/admin/products', label: 'Products' },
|
|
{ to: '/admin/services', label: 'Services' },
|
|
{ to: '/admin/schedule', label: 'Schedule' },
|
|
{ to: '/admin/bookings', label: 'Bookings' },
|
|
{ to: '/admin/inquiries', label: 'Inquiries' },
|
|
]
|
|
|
|
function AdminLayout() {
|
|
const navigate = useNavigate()
|
|
|
|
async function handleSignOut() {
|
|
const { error } = await supabase.auth.signOut()
|
|
if (!error) navigate('/admin/login')
|
|
}
|
|
|
|
return (
|
|
<div className={styles.layout}>
|
|
<aside className={styles.sidebar}>
|
|
<p className={styles.brand}>Braids by Mira</p>
|
|
<nav>
|
|
{NAV_ITEMS.map((item) => (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
className={({ isActive }) => (isActive ? `${styles.navLink} ${styles.navLinkActive}` : styles.navLink)}
|
|
>
|
|
{item.label}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
<button type="button" className={styles.signOut} onClick={handleSignOut}>
|
|
Sign out
|
|
</button>
|
|
</aside>
|
|
<main className={styles.content}>
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default AdminLayout
|