129 lines
3.5 KiB
JavaScript
129 lines
3.5 KiB
JavaScript
import { useAuth, useSignInUp } from '@hooks/useAuth'
|
|
import { Avatar, Badge, Box, Divider, Flex, Menu, NavLink } from '@mantine/core'
|
|
import { notifications } from '@mantine/notifications'
|
|
import { NAV_ITEM } from '@routes/nav-route'
|
|
import { PathConstants } from '@routes/routes'
|
|
import {
|
|
IconAt,
|
|
IconCircleXFilled,
|
|
IconLogout,
|
|
IconUserCircle,
|
|
} from '@tabler/icons-react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { NavLink as Link } from 'react-router-dom'
|
|
|
|
function NavLinkWithChildren(item) {
|
|
const Icon = item.icon
|
|
|
|
return (
|
|
<NavLink label={item.text} leftSection={<Icon size={15} />}>
|
|
{item.children.map((child) => {
|
|
if (!child.show) return
|
|
if (child.children) {
|
|
return <NavLinkWithChildren key={child.pathName} {...child} />
|
|
} else {
|
|
return (
|
|
<NavLink
|
|
key={child.pathName}
|
|
leftSection={<Icon size={15} />}
|
|
label={child.text}
|
|
component={Link}
|
|
to={child.pathName}
|
|
/>
|
|
)
|
|
}
|
|
})}
|
|
</NavLink>
|
|
)
|
|
}
|
|
|
|
export default function Navbar() {
|
|
const { auth, setAuth } = useAuth()
|
|
const { t } = useTranslation()
|
|
const { onLogout } = useSignInUp(setAuth)
|
|
|
|
const logOut = async () => {
|
|
try {
|
|
await onLogout()
|
|
} catch (error) {
|
|
notifications.show({
|
|
color: 'red.5',
|
|
icon: <IconCircleXFilled />,
|
|
withCloseButton: true,
|
|
title: t('message_logout_fail'),
|
|
})
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Box hiddenFrom="md">
|
|
<Flex p="lg">
|
|
<Menu trigger="hover" position="bottom-start" width={150}>
|
|
<Menu.Target>
|
|
<Avatar
|
|
size="30"
|
|
variant="filled"
|
|
name={auth.userInfo?.name}
|
|
color="red.4"
|
|
style={{ cursor: 'pointer' }}
|
|
/>
|
|
</Menu.Target>
|
|
<Menu.Dropdown>
|
|
<Menu.Label>
|
|
<Badge
|
|
leftSection={<IconAt size={12} />}
|
|
size="sm"
|
|
color="yellow.8"
|
|
>
|
|
{auth.userInfo?.name}
|
|
</Badge>
|
|
</Menu.Label>
|
|
<Menu.Divider />
|
|
<Menu.Item
|
|
leftSection={<IconUserCircle size={15} />}
|
|
component={Link}
|
|
to={PathConstants.PROFILE}
|
|
>
|
|
{t('ui_profile')}
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
leftSection={<IconLogout size={15} />}
|
|
fw="500"
|
|
onClick={logOut}
|
|
>
|
|
{t('ui_logout')}
|
|
</Menu.Item>
|
|
</Menu.Dropdown>
|
|
</Menu>
|
|
</Flex>
|
|
<Divider />
|
|
</Box>
|
|
<Box>
|
|
{NAV_ITEM(t, auth?.userInfo?.isAdmin).map((item) => {
|
|
if (!item.show) return null
|
|
const Icon = item.icon
|
|
|
|
if (item.children) {
|
|
return <NavLinkWithChildren key={item.pathName} {...item} />
|
|
} else {
|
|
return (
|
|
<NavLink
|
|
key={item.pathName}
|
|
leftSection={<Icon size={15} />}
|
|
label={item.text}
|
|
component={Link}
|
|
to={item.pathName}
|
|
className={({ isActive, isPending }) =>
|
|
isPending ? 'pending' : isActive ? 'active' : ''
|
|
}
|
|
color="red.8"
|
|
/>
|
|
)
|
|
}
|
|
})}
|
|
</Box>
|
|
</>
|
|
)
|
|
}
|