Lobo_Corp/ToBePlayed-Frontend
Public Access
3
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(nav): add header navigation and show Steam ID on dashboard

Browse Source 
Header links to Dashboard, Library and Settings. The logo, the login page and
the landing page lead logged-in users to the dashboard. Expired tokens are
removed, and a 403 on the dashboard logs out. Remove the dev dummy token.
This commit is contained in:
lobo committed 2026-09-24 08:57:03 +02:00
1 parent 44e23de6d6
commit 8fa605aff0
8 files changed
+124 -23
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/App.jsx
+26 -12
View File
@@ -1,4 +1,4 @@
import {Link, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
import {Link, NavLink, Route, Routes, useLocation, useNavigate} from 'react-router-dom';
import {useTranslation} from 'react-i18next';
import {useEffect, useState} from 'react';
@@ -11,6 +11,12 @@ import SettingsPage from './pages/SettingsPage.jsx';
import GameLibrary from './pages/GameLibrary.jsx';
import GameDetail from './pages/GameDetail.jsx';
import {usePreferences} from './context/PreferencesContext.jsx';
import {getValidToken} from './utils/auth.js';
const navLinkClass = ({isActive}) =>
`flex items-center gap-1 text-sm font-bold transition-colors ${
isActive ? 'text-blue-600 dark:text-blue-400' : 'text-slate-600 dark:text-slate-300 hover:text-blue-500'
}`;
function App() {
const {t, i18n} = useTranslation();
@@ -22,13 +28,7 @@ function App() {
const location = useLocation();
useEffect(() => {
// Dev mode: inject dummy token if none exists
if (import.meta.env.MODE === 'development' && !localStorage.getItem('tbp_jwt')) {
localStorage.setItem('tbp_jwt', 'dev-dummy-token');
}
const token = localStorage.getItem('tbp_jwt');
setIsAuthenticated(!!token); // Converts the token string (or null) to a boolean
setIsAuthenticated(!!getValidToken());
}, [location]);
const toggleLanguage = () => {
@@ -44,10 +44,27 @@ function App() {
return (
<div className="min-h-screen flex flex-col bg-slate-50 dark:bg-slate-950 transition-colors duration-300 font-sans">
<header className="p-4 flex justify-between items-center border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 sticky top-0 z-50">
<Link to="/" className="font-black text-blue-600 dark:text-blue-500 text-2xl flex items-center tracking-tight">
<Link to={isAuthenticated ? '/dashboard' : '/'} className="font-black text-blue-600 dark:text-blue-500 text-2xl flex items-center tracking-tight">
<i className="mdi mdi-controller mr-2 text-3xl"></i> Game Log
</Link>
{isAuthenticated && (
<nav className="flex gap-4 sm:gap-6 items-center">
<NavLink to="/dashboard" className={navLinkClass}>
<i className="mdi mdi-view-dashboard text-xl"></i>
<span className="hidden sm:inline">{t('NAV.DASHBOARD')}</span>
</NavLink>
<NavLink to="/library" className={navLinkClass}>
<i className="mdi mdi-gamepad-variant text-xl"></i>
<span className="hidden sm:inline">{t('NAV.LIBRARY')}</span>
</NavLink>
<NavLink to="/settings" className={navLinkClass}>
<i className="mdi mdi-cog text-xl"></i>
<span className="hidden sm:inline">{t('NAV.SETTINGS')}</span>
</NavLink>
</nav>
)}
<div className="flex gap-5 items-center">
<button onClick={toggleLanguage} className="text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
{i18n.language.toUpperCase()}
@@ -59,9 +76,6 @@ function App() {
</button>
{isAuthenticated ? (
<>
<Link to="/settings" className="text-sm font-bold text-slate-600 dark:text-slate-300 hover:text-blue-500 transition-colors">
<i className="mdi mdi-cog text-xl"></i>
</Link>
<button onClick={handleLogout} className="bg-red-600 hover:bg-red-500 text-white px-5 py-2 rounded-lg font-bold transition-all shadow-md shadow-red-500/20">
{t('MAIN.LOGOUT')}
</button>