From c3c8cd8f98dc9a65cd9dbdea58b90285ca9f74b3 Mon Sep 17 00:00:00 2001
From: Kansaram <kansaram30@gmail.com>
Date: Mon, 8 Jun 2026 13:21:34 +0530
Subject: [PATCH] feat: add logout button to navbar

Clears session and returns user to login page.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/App.jsx               | 9 ++++++++-
 frontend/src/components/Navbar.jsx | 7 ++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 7687345..052f9b1 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -116,6 +116,13 @@ export default function App() {
     setAuthed(true)
   }
 
+  function handleLogout() {
+    sessionStorage.removeItem('qfx-auth')
+    sessionStorage.removeItem('qfx-v')
+    setAuthed(false)
+    setInApp(false)
+  }
+
   function enterApp() {
     sessionStorage.setItem('qfx-v', '1')
     setInApp(true)
@@ -126,7 +133,7 @@ export default function App() {
 
   return (
     <div style={{ display:'flex', flexDirection:'column', height:'100vh', overflow:'hidden' }}>
-      <Navbar />
+      <Navbar onLogout={handleLogout} />
 
       {/* Main layout: sidebar + content */}
       <div style={{ display:'flex', flex:1, overflow:'hidden' }}>
diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx
index d82b926..61da995 100644
--- a/frontend/src/components/Navbar.jsx
+++ b/frontend/src/components/Navbar.jsx
@@ -17,7 +17,7 @@ const TickerItem = ({ item }) => {
   )
 }
 
-export default function Navbar() {
+export default function Navbar({ onLogout }) {
   const { pair, setPair, setS, toShareURL } = usePortfolioStore()
   const [rates, setRates]   = useState([])
   const [time, setTime]     = useState(new Date())
@@ -130,6 +130,11 @@ export default function Navbar() {
             {time.toLocaleTimeString('en-GB', { hour12:false })}
           </div>
           <div style={{ fontSize:9, color:'var(--text-muted)' }}>UTC</div>
+          <div style={{ width:1, height:20, background:'var(--border)' }}/>
+          <button className="btn-ghost" onClick={onLogout}
+            style={{ fontSize:10, color:'var(--red)', borderColor:'rgba(239,68,68,0.3)' }}>
+            ⏻ Logout
+          </button>
         </div>
       </div>