ui: show login button when logged out and logout when logged in

src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react'
-import { Link, useLocation } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
 import api from '@/services/api'
 import type { User } from '@/types'
 
@@ -10,6 +10,7 @@ interface Props {
 
 export default function Sidebar({ user, onLogout }: Props) {
   const { pathname } = useLocation()
+  const navigate = useNavigate()
   const [unreadCount, setUnreadCount] = useState(0)
 
   useEffect(() => {
@@ -51,12 +52,14 @@ export default function Sidebar({ user, onLogout }: Props) {
           </li>
         ))}
       </ul>
-      {user && (
-        <div className="sidebar-footer">
-          <span>👤 {user.username}</span>
-          <button onClick={onLogout}>Logout</button>
-        </div>
-      )}
+      <div className="sidebar-footer">
+        <span>👤 {user ? user.username : 'Guest'}</span>
+        {user ? (
+          <button onClick={onLogout}>Log out</button>
+        ) : (
+          <button onClick={() => navigate('/login')}>Log in</button>
+        )}
+      </div>
     </nav>
   )
 }