ui updates and bot updates. new commands and command handler

frontend/src/components/NavBar.js

@@ -0,0 +1,34 @@
+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;