76 lines
2.1 KiB
JavaScript
76 lines
2.1 KiB
JavaScript
// import { styled } from 'solid-styled-components'
|
|
|
|
import { useSiteContext } from '@context/SiteContext'
|
|
import useAuth from '@hooks/useAuth'
|
|
import useLanguage from '@hooks/useLanguage'
|
|
import { A } from '@solidjs/router'
|
|
import { IconDashboard, IconLogout, IconTriangle } from '@tabler/icons-solidjs'
|
|
import { For, Show } from 'solid-js'
|
|
import { Dynamic } from 'solid-js/web'
|
|
|
|
const language = useLanguage('vi')
|
|
|
|
const NAVBAR_ITEM = [
|
|
{
|
|
path: '/dashboard',
|
|
icon: IconDashboard,
|
|
text: language?.ui.dashboard,
|
|
},
|
|
]
|
|
|
|
export default function Navbar() {
|
|
const { store, setAuth } = useSiteContext()
|
|
const { clickLogOut } = useAuth(setAuth)
|
|
|
|
const logOut = async () => {
|
|
try {
|
|
await clickLogOut()
|
|
} catch (error) {
|
|
console.log({
|
|
status: 'danger',
|
|
title: 'Logout fail!',
|
|
closable: false,
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div class="drawer-side">
|
|
<label for="nav-menu" aria-label="close sidebar" class="drawer-overlay" />
|
|
<div class="bg-base-200 w-80 min-h-full">
|
|
<Show when={store.auth}>
|
|
<div class="flex items-center justify-between px-5 pt-5 lg:hidden">
|
|
<div class="avatar">
|
|
<div class="w-9 mask mask-hexagon">
|
|
<img
|
|
src={`https://ui-avatars.com/api/?name=${store.userInfo?.name}`}
|
|
alt="avatar"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<span class="mx-3 line-clamp-1">{store.userInfo?.name}</span>
|
|
<button class="btn btn-ghost btn-sm" onClick={logOut}>
|
|
<IconLogout size={16} />
|
|
</button>
|
|
</div>
|
|
<div class="divider divider-success mb-0 lg:hidden">
|
|
<IconTriangle size={30} />
|
|
</div>
|
|
</Show>
|
|
<ul class="menu p-4 w-80 text-base-content">
|
|
<For each={NAVBAR_ITEM}>
|
|
{(item) => (
|
|
<li>
|
|
<A href={item.path}>
|
|
<Dynamic component={item.icon} />
|
|
{item.text}
|
|
</A>
|
|
</li>
|
|
)}
|
|
</For>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|