refactor: enable conditional rendering of forum and bug report links in Navbar and Footer based on settings
This commit is contained in:
@@ -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}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user