44 lines
1.4 KiB
JavaScript
44 lines
1.4 KiB
JavaScript
// src/components/Navbar.js
|
|
import React from 'react';
|
|
import { AppBar, Toolbar, Typography, Button } from '@mui/material';
|
|
import { Link, useNavigate } from 'react-router-dom';
|
|
import { useContext } from 'react';
|
|
import { AppContext, PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
|
|
|
|
export default function Navbar() {
|
|
const navigate = useNavigate();
|
|
const context = useContext(AppContext);
|
|
const debugLog = (message) => {
|
|
if (process.env.DEBUG_API) {
|
|
console.log(message);
|
|
}
|
|
};
|
|
debugLog('Context:', context);
|
|
|
|
if (!context) {
|
|
throw new Error('AppContext is not available');
|
|
}
|
|
|
|
const { setToken } = context;
|
|
|
|
const handleLogout = () => {
|
|
localStorage.removeItem('token');
|
|
setToken(null);
|
|
navigate('/login');
|
|
};
|
|
|
|
return (
|
|
<AppBar position="static">
|
|
<Toolbar sx={{ backgroundColor: PRIMARY_COLOR, borderBottom: '1px solid', borderColor: '#444', color: SECONDARY_COLOR }}>
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
|
|
Boxes
|
|
</Typography>
|
|
<Button color="inherit" component={Link} to="/api/v1/login">Login</Button>
|
|
<Button color="inherit" component={Link} to="/api/v1/boxes">Boxes</Button>
|
|
<Button color="inherit" component={Link} to="/api/v1/items">Items</Button>
|
|
<Button color="inherit" component={Link} to="/api/v1/admin">Admin</Button>
|
|
<Button color="inherit" onClick={handleLogout}>Logout</Button>
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
} |