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 { useSettings } from '../../contexts/SettingsContext';
export function Footer() {
const year = new Date().getFullYear();
const { forumEnabled, bugsEnabled } = useSettings();
return (
<footer
@@ -37,11 +39,11 @@ export function Footer() {
<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' }}>
{[
{ to: '/', label: 'Home' },
{ to: '/studio', label: 'Studio' },
{ to: '/forum', label: 'Forum' },
{ to: '/bugs', label: 'Bug Reports' },
].map(({ to, label }) => (
{ to: '/', label: 'Home', show: true },
{ to: '/studio', label: 'Studio', show: true },
{ to: '/forum', label: 'Forum', show: forumEnabled },
{ to: '/bugs', label: 'Bug Reports', show: bugsEnabled },
].filter((item) => item.show).map(({ to, label }) => (
<li key={to}>
<Link
to={to}

View File

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