fix(navbar): add separators between items, add a space between username and signout text

This commit is contained in:
Ashhhleyyy 2022-08-01 16:31:47 +01:00
parent fee2e98a90
commit abadf0aae5
Signed by: ash
GPG key ID: 83B789081A0878FB
2 changed files with 5 additions and 5 deletions

View file

@ -8,12 +8,12 @@ export default function NavBar() {
return (
<nav>
<ul className='flex flex-row h-12 bg-gray-900 justify-start items-center p-4 gap-1 shadow mb-4'>
<li>
<ul className='flex flex-row h-12 bg-gray-900 justify-start items-center p-4 gap-1 shadow mb-4 dots-between'>
<li className='no-dot'>
<LinkButton href='/'>Comicbox</LinkButton>
</li>
<li className='flex-1' aria-hidden />
<li className='flex-1 no-dot' aria-hidden />
<li>
{status === 'loading' && <>...</>}
@ -28,7 +28,7 @@ export default function NavBar() {
)}
{status === 'authenticated' && (
<>
<span>{data?.user?.name}</span>
<span>{data?.user?.name}</span>{' '}
<button onClick={() => signOut()}>(Log out)</button>
</>
)}

View file

@ -9,7 +9,7 @@
}
@layer components {
.dots-between > li:not(:last-child)::after {
.dots-between > li:not(:last-child):not(.no-dot)::after {
content: '⦁';
padding: 0 8px;
}