35 lines
1.5 KiB
JavaScript
35 lines
1.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { AppBar, Toolbar, Button, Box, IconButton, Collapse } from '@mui/material';
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
|
|
import { useNavigate, useLocation, useParams } from 'react-router-dom';
|
|
|
|
const NavBar = () => {
|
|
const [open, setOpen] = useState(true);
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
// Pull guildId from URL if present
|
|
const guildIdMatch = location.pathname.match(/\/server\/(\d+)/);
|
|
const guildId = guildIdMatch ? guildIdMatch[1] : null;
|
|
|
|
return (
|
|
<AppBar position="static" color="transparent" elevation={0} sx={{ mb: 2 }}>
|
|
<Toolbar>
|
|
<IconButton onClick={() => setOpen(prev => !prev)} aria-label="toggle menu"><MenuIcon /></IconButton>
|
|
<Collapse in={open} orientation="horizontal">
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<Button onClick={() => navigate('/dashboard')} color="inherit">Dashboard</Button>
|
|
<Button onClick={() => navigate('/discord')} color="inherit">Discord!</Button>
|
|
<Button onClick={() => navigate('/contact')} color="inherit">Contact</Button>
|
|
{guildId && (
|
|
<Button startIcon={<HelpOutlineIcon />} onClick={() => navigate(`/server/${guildId}/help`)} color="inherit">Help</Button>
|
|
)}
|
|
</Box>
|
|
</Collapse>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
};
|
|
|
|
export default NavBar;
|