auth

src/components/NavBar.tsx

@@ -1,10 +1,31 @@
+import { useUser } from '../store/userStore'
 import NavLinkButton from './NavLinkButton'
 
 export default function NavBar() {
+  const [user] = useUser()
+
+  const loggedIn = user != null
+
   return (
     <nav className={`w-full flex flex-row-reverse gap-4 px-4 md:px-8 py-0.5`}>
-      <NavLinkButton to="/signup">register</NavLinkButton>
-      <NavLinkButton to="/login">login</NavLinkButton>
+      {loggedIn ? <LoggedInContent /> : <LoggedOutContent />}
     </nav>
   )
 }
+
+function LoggedInContent() {
+  return (
+    <>
+      <NavLinkButton to="/logout">logout</NavLinkButton>
+    </>
+  )
+}
+
+function LoggedOutContent() {
+  return (
+    <>
+      <NavLinkButton to="/signup">register</NavLinkButton>
+      <NavLinkButton to="/login">login</NavLinkButton>{' '}
+    </>
+  )
+}