From abadf0aae52828af8f7650eff23bb2959b49bd69 Mon Sep 17 00:00:00 2001
From: Ashhhleyyy <ash@ashhhleyyy.dev>
Date: Mon, 1 Aug 2022 16:31:47 +0100
Subject: [PATCH] fix(navbar): add separators between items, add a space
 between username and signout text

---
 components/NavBar.tsx | 8 ++++----
 styles/globals.css    | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/NavBar.tsx b/components/NavBar.tsx
index 7fb395c..4a69290 100644
--- a/components/NavBar.tsx
+++ b/components/NavBar.tsx
@@ -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>
                         </>
                     )}
diff --git a/styles/globals.css b/styles/globals.css
index de1cac6..a4c9fad 100755
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -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;
     }