refactor: enable conditional rendering of forum and bug report links in Navbar and Footer based on settings

This commit is contained in:
Thibault Pouch
2026-03-17 16:43:35 +01:00
parent 2e42d67196
commit e8cd7e9562
2 changed files with 23 additions and 13 deletions

View File

@@ -1,7 +1,9 @@
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { useSettings } from '../../contexts/SettingsContext';
export function Footer() { export function Footer() {
const year = new Date().getFullYear(); const year = new Date().getFullYear();
const { forumEnabled, bugsEnabled } = useSettings();
return ( return (
<footer <footer
@@ -37,11 +39,11 @@ export function Footer() {
<div className="section-label" style={{ marginBottom: '0.75rem' }}>Navigate</div> <div className="section-label" style={{ marginBottom: '0.75rem' }}>Navigate</div>
<ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: '0.4rem' }}> <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: '0.4rem' }}>
{[ {[
{ to: '/', label: 'Home' }, { to: '/', label: 'Home', show: true },
{ to: '/studio', label: 'Studio' }, { to: '/studio', label: 'Studio', show: true },
{ to: '/forum', label: 'Forum' }, { to: '/forum', label: 'Forum', show: forumEnabled },
{ to: '/bugs', label: 'Bug Reports' }, { to: '/bugs', label: 'Bug Reports', show: bugsEnabled },
].map(({ to, label }) => ( ].filter((item) => item.show).map(({ to, label }) => (
<li key={to}> <li key={to}>
<Link <Link
to={to} to={to}

View File

@@ -1,20 +1,28 @@
import { useState, useCallback } from 'react'; import { useState, useCallback } from 'react';
import { Link, NavLink, useNavigate } from 'react-router-dom'; import { Link, NavLink, useNavigate } from 'react-router-dom';
import { useAuth } from '../../contexts/AuthContext'; import { useAuth } from '../../contexts/AuthContext';
import { useSettings } from '../../contexts/SettingsContext';
const NAV_LINKS = [ const BASE_NAV_LINKS = [
{ to: '/', label: 'Home', end: true }, { to: '/', label: 'Home', end: true, feature: null as null | 'forum' | 'bugs' },
{ to: '/studio', label: 'Studio', end: false }, { to: '/studio', label: 'Studio', end: false, feature: null },
{ to: '/events', label: 'Events', end: false }, { to: '/events', label: 'Events', end: false, feature: null },
{ to: '/forum', label: 'Forum', end: false }, { to: '/forum', label: 'Forum', end: false, feature: 'forum' as const },
{ to: '/bugs', label: 'Bugs', end: false }, { to: '/bugs', label: 'Bugs', end: false, feature: 'bugs' as const },
]; ];
export function Navbar() { export function Navbar() {
const { user, isAuthenticated, logout } = useAuth(); const { user, isAuthenticated, logout } = useAuth();
const { forumEnabled, bugsEnabled } = useSettings();
const navigate = useNavigate(); const navigate = useNavigate();
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
const navLinks = BASE_NAV_LINKS.filter(({ feature }) => {
if (feature === 'forum') return forumEnabled;
if (feature === 'bugs') return bugsEnabled;
return true;
});
const handleLogout = useCallback(() => { const handleLogout = useCallback(() => {
logout(); logout();
setMenuOpen(false); setMenuOpen(false);
@@ -85,7 +93,7 @@ export function Navbar() {
{/* Desktop Nav */} {/* Desktop Nav */}
<div className="hidden md:flex items-center gap-6"> <div className="hidden md:flex items-center gap-6">
{NAV_LINKS.map(({ to, label, end }) => ( {navLinks.map(({ to, label, end }) => (
<NavLink key={to} to={to} end={end} style={navLinkStyle}> <NavLink key={to} to={to} end={end} style={navLinkStyle}>
{label} {label}
</NavLink> </NavLink>
@@ -148,7 +156,7 @@ export function Navbar() {
}} }}
> >
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.85rem' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '0.85rem' }}>
{NAV_LINKS.map(({ to, label, end }) => ( {navLinks.map(({ to, label, end }) => (
<NavLink <NavLink
key={to} key={to}
to={to} to={to}