feature : Connect front to backend #1
@@ -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}
|
||||||
|
|||||||
@@ -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}
|
||||||
|
|||||||
Reference in New Issue
Block a user