82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
import { getProfile } from '@api/user'
|
|
import Logo from '@assets/logo.svg'
|
|
import { useSiteContext } from '@context/SiteContext'
|
|
import useAuth from '@hooks/useAuth'
|
|
import useToast from '@hooks/useToast'
|
|
import { A } from '@solidjs/router'
|
|
import { IconLogout, IconMenuDeep } from '@tabler/icons-solidjs'
|
|
import { Show, onMount } from 'solid-js'
|
|
|
|
export default function Header() {
|
|
const { store, setAuth, setUser } = useSiteContext()
|
|
const { clickLogOut } = useAuth(setAuth)
|
|
const notify = useToast()
|
|
|
|
onMount(async () => {
|
|
try {
|
|
const resp = await getProfile()
|
|
if (resp.status === 200) {
|
|
setUser(resp.data)
|
|
}
|
|
} catch (error) {
|
|
notify.error({
|
|
title: 'Get profile fail!',
|
|
closable: false,
|
|
description: error?.data || 'Can not get user profile!',
|
|
})
|
|
}
|
|
})
|
|
|
|
const logOut = async () => {
|
|
try {
|
|
await clickLogOut()
|
|
} catch (error) {
|
|
console.log({
|
|
status: 'danger',
|
|
title: 'Logout fail!',
|
|
closable: false,
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<header class="w-full navbar py-3 px-4 items-center justify-between bg-emerald-500">
|
|
<div class="flex items-center justify-end">
|
|
<A href="/" class="text-white flex items-center hover:text-white">
|
|
<img src={Logo} class="w-8" alt="Logo" />
|
|
<span class="ml-2 text-2xl">Fuware</span>
|
|
</A>
|
|
</div>
|
|
<Show when={store.auth}>
|
|
<div class="flex items-center justify-end">
|
|
<div class="avatar">
|
|
<div class="w-9 rounded-full">
|
|
<A href="/me" class="hidden lg:block">
|
|
<img
|
|
src={`https://ui-avatars.com/api/?name=${store.userInfo?.name}`}
|
|
alt="avatar"
|
|
/>
|
|
</A>
|
|
</div>
|
|
</div>
|
|
<A
|
|
href="/me"
|
|
class="mx-3 text-white hover:text-white hidden lg:block"
|
|
>
|
|
{store.userInfo?.name}
|
|
</A>
|
|
<button class="btn btn-ghost btn-sm hidden lg:block" onClick={logOut}>
|
|
<IconLogout size={16} />
|
|
</button>
|
|
<label
|
|
for="nav-menu"
|
|
class="btn btn-ghost btn-sm drawer-button pr-0 lg:hidden"
|
|
>
|
|
<IconMenuDeep size={25} color="white" />
|
|
</label>
|
|
</div>
|
|
</Show>
|
|
</header>
|
|
)
|
|
}
|