computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
59 lines
1.7 KiB
59 lines
1.7 KiB
<div class='relative block hidden' id='account-dropdown'> |
|
<button |
|
class='flex h-8 w-24 items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 py-2 px-4 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600' |
|
type='button' |
|
data-account-button |
|
> |
|
<span>Account</span> |
|
</button> |
|
|
|
<div |
|
class='absolute right-0 z-10 mt-2 hidden w-48 rounded-md bg-slate-800 py-1 shadow-xl' |
|
> |
|
<ul> |
|
<li class='px-1'> |
|
<a |
|
href='/profile' |
|
class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700' |
|
> |
|
Your Profile |
|
</a> |
|
</li> |
|
<li class='px-1'> |
|
<a |
|
href='/settings/profile' |
|
class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700' |
|
> |
|
Settings |
|
</a> |
|
</li> |
|
<li class='px-1'> |
|
<button |
|
class='block w-full rounded px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700' |
|
type='button' |
|
data-logout-button |
|
> |
|
Logout |
|
</button> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
import Cookies from 'js-cookie'; |
|
import { TOKEN_COOKIE_NAME } from '../../lib/utils'; |
|
|
|
const accountButton = document.querySelector('[data-account-button]'); |
|
const accountMenu = accountButton?.nextElementSibling; |
|
const logoutButton = accountMenu?.querySelector('[data-logout-button]'); |
|
|
|
accountButton?.addEventListener('click', () => { |
|
accountMenu?.classList.toggle('hidden'); |
|
}); |
|
|
|
logoutButton?.addEventListener('click', () => { |
|
Cookies.remove(TOKEN_COOKIE_NAME); |
|
window.location.reload(); |
|
}); |
|
</script>
|
|
|