|
|
|
|
@ -40,11 +40,23 @@ export const Navbar = ({
|
|
|
|
|
categories: BookmarkCategory[]
|
|
|
|
|
}) => {
|
|
|
|
|
const pathname = usePathname()
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
|
|
|
|
if (pathname.startsWith('/login') || pathname.startsWith('/signup')) {
|
|
|
|
|
return <></>
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const logout = async () => {
|
|
|
|
|
const response = await fetch('/api/auth/logout', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
})
|
|
|
|
|
router.refresh()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const login = () => {
|
|
|
|
|
router.push('/login')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<NextUINavbar
|
|
|
|
|
maxWidth='xl'
|
|
|
|
|
@ -96,12 +108,51 @@ export const Navbar = ({
|
|
|
|
|
isExternal
|
|
|
|
|
href={siteConfig.links.github}
|
|
|
|
|
aria-label='Github'
|
|
|
|
|
className='hidden sm:flex'>
|
|
|
|
|
className='hidden min-[330px]:flex'>
|
|
|
|
|
<GithubIcon className='text-default-500' />
|
|
|
|
|
</Link>
|
|
|
|
|
<ThemeSwitch className='hidden min-[330px]:flex' />
|
|
|
|
|
<div className='ml-2 flex items-center gap-4 min-[330px]:ml-4'>
|
|
|
|
|
<UserAvatar user={user} />
|
|
|
|
|
<Dropdown placement='bottom-end'>
|
|
|
|
|
<DropdownTrigger>
|
|
|
|
|
<Avatar
|
|
|
|
|
isBordered
|
|
|
|
|
as='button'
|
|
|
|
|
className='transition-transform'
|
|
|
|
|
icon={<AvatarIcon />}
|
|
|
|
|
/>
|
|
|
|
|
</DropdownTrigger>
|
|
|
|
|
<DropdownMenu
|
|
|
|
|
aria-label='Profile Actions'
|
|
|
|
|
variant='flat'>
|
|
|
|
|
<DropdownItem
|
|
|
|
|
key='profile'
|
|
|
|
|
className='h-14 gap-2'>
|
|
|
|
|
<p className='font-semibold'>
|
|
|
|
|
Signed in as
|
|
|
|
|
</p>
|
|
|
|
|
<p className='font-semibold text-primary'>
|
|
|
|
|
{user ? user.email : 'Guest'}
|
|
|
|
|
</p>
|
|
|
|
|
</DropdownItem>
|
|
|
|
|
{user ? (
|
|
|
|
|
<DropdownItem
|
|
|
|
|
key='logout'
|
|
|
|
|
color='danger'
|
|
|
|
|
className='text-danger'
|
|
|
|
|
onPress={() => logout()}>
|
|
|
|
|
Log Out
|
|
|
|
|
</DropdownItem>
|
|
|
|
|
) : (
|
|
|
|
|
<DropdownItem
|
|
|
|
|
key='login'
|
|
|
|
|
color='primary'
|
|
|
|
|
onPress={() => login()}>
|
|
|
|
|
Login
|
|
|
|
|
</DropdownItem>
|
|
|
|
|
)}
|
|
|
|
|
</DropdownMenu>
|
|
|
|
|
</Dropdown>
|
|
|
|
|
</div>
|
|
|
|
|
</NavbarItem>
|
|
|
|
|
</NavbarContent>
|
|
|
|
|
@ -119,7 +170,7 @@ export const Navbar = ({
|
|
|
|
|
? 'danger'
|
|
|
|
|
: 'foreground'
|
|
|
|
|
}
|
|
|
|
|
href={item.href}
|
|
|
|
|
href='#'
|
|
|
|
|
size='lg'>
|
|
|
|
|
{item.label}
|
|
|
|
|
</Link>
|
|
|
|
|
@ -130,59 +181,3 @@ export const Navbar = ({
|
|
|
|
|
</NextUINavbar>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function UserAvatar({ user }: { user: User | null }) {
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
|
|
|
|
|
const logout = async () => {
|
|
|
|
|
const response = await fetch('/api/auth/logout', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
})
|
|
|
|
|
router.refresh()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const login = () => {
|
|
|
|
|
router.push('/login')
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Dropdown placement='bottom-end'>
|
|
|
|
|
<DropdownTrigger>
|
|
|
|
|
<Avatar
|
|
|
|
|
isBordered
|
|
|
|
|
as='button'
|
|
|
|
|
className='transition-transform'
|
|
|
|
|
icon={<AvatarIcon />}
|
|
|
|
|
/>
|
|
|
|
|
</DropdownTrigger>
|
|
|
|
|
<DropdownMenu
|
|
|
|
|
aria-label='Profile Actions'
|
|
|
|
|
variant='flat'>
|
|
|
|
|
<DropdownItem
|
|
|
|
|
key='profile'
|
|
|
|
|
className='h-14 gap-2'>
|
|
|
|
|
<p className='font-semibold'>Signed in as</p>
|
|
|
|
|
<p className='font-semibold text-primary'>
|
|
|
|
|
{user ? user.email : 'Guest'}
|
|
|
|
|
</p>
|
|
|
|
|
</DropdownItem>
|
|
|
|
|
{user ? (
|
|
|
|
|
<DropdownItem
|
|
|
|
|
key='logout'
|
|
|
|
|
color='danger'
|
|
|
|
|
className='text-danger'
|
|
|
|
|
onPress={() => logout()}>
|
|
|
|
|
Log Out
|
|
|
|
|
</DropdownItem>
|
|
|
|
|
) : (
|
|
|
|
|
<DropdownItem
|
|
|
|
|
key='login'
|
|
|
|
|
color='primary'
|
|
|
|
|
onPress={() => login()}>
|
|
|
|
|
Login
|
|
|
|
|
</DropdownItem>
|
|
|
|
|
)}
|
|
|
|
|
</DropdownMenu>
|
|
|
|
|
</Dropdown>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|