web_app/frontend/src/components/Navbar.jsx

import React, { useState, useEffect } from 'react';
import { AppBar, Toolbar, IconButton, Typography, Button, Box, Drawer, MenuItem, Fade, Divider } from '@mui/material';
import { shadows } from '@mui/system'
import { Menu, Close } from '@mui/icons-material';
import { Link, useLocation } from 'react-router-dom';
import './Navbar.css'

const Navbar = ({bgColor = 'rgba(255, 255, 255, 0.1)', fontColor = 'white'}) => {
  const [open, setOpen] = useState(false);
  const location = useLocation();
  const [currentPage, setCurrentPage] = useState('');

  useEffect(() => {
    const currentPath = location.pathname;
    const page = currentPath.split("/").slice(-1)[0];
    setCurrentPage(page.charAt(0).toUpperCase() + page.slice(1));
  }, [location]);

  const handleToggle = () => {
    setOpen((prevOpen) => !prevOpen);
  };
  
  return (
    <AppBar position="absolute" style={{ backgroundColor:'transparent', boxShadow: 'none' }}>
      <Toolbar style={{ display: 'flex', justifyContent: 'space-between', margin: '10px', borderRadius: '15px', backgroundColor:bgColor }}>
        <Link className="logo" to="/" style={{ textDecoration: 'none', padding: '10px', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <Typography style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold', color: fontColor}}>
            LuminLab
          </Typography>
          <Divider orientation="vertical" flexItem sx={{ bgcolor: fontColor, width: '1px', mx: 2 }}/>
          <Typography style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold', color: fontColor}}>
            {currentPage}
          </Typography>
        </Link>

        <Box display={{ xs: 'block', sm: 'none' }}>
          <IconButton 
            color={fontColor}
            onClick={handleToggle}
          >
            {open ? <Close /> : <Menu />}
          </IconButton>
      
          <Drawer
            anchor="top"
            open={open}
            onClose={() => setOpen(false)}
            slotProps={{ backdrop:{
              invisible:true
            } }}
            PaperProps={{
              style: {
                borderRadius: '15px',
                marginTop: '76px',
                marginRight: '10px',
                marginLeft: '10px',
                backgroundColor: bgColor,
                boxShadow: '1',
                color: fontColor
              }
            }}
            transitionDuration={200}
            TransitionComponent={Fade}
          >
            <MenuItem onClick={() => setOpen(false)} component={Link} to="/about" style={{ fontWeight: 'bold'}}>About</MenuItem>
            <MenuItem onClick={() => setOpen(false)} component={Link} to="/contact" style={{ fontWeight: 'bold' }}>Client Communications</MenuItem>
            <MenuItem onClick={() => setOpen(false)} component={Link} to="/dashboard" style={{ fontWeight: 'bold' }}>Dashboard</MenuItem>
            {/* <MenuItem onClick={() => setOpen(false)} component={Link} to="/team" style={{ fontWeight: 'bold' }}>Team</MenuItem> */}
          </Drawer>
        </Box>

        <Box display={{ sm: 'flex', xs: 'none' }}>
          <Button className="nav-link" color="inherit" component={Link} to="/about" style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold', marginRight: '15px', color: fontColor}}>
            About
          </Button>
          <Button className="nav-link" color="inherit" component={Link} to="/contact" style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold', marginRight: '15px', color: fontColor}}>
            Client Communications
          </Button>
          <Button className="nav-link" color="inherit" component={Link} to="/dashboard" style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold', marginRight: '15px', color: fontColor}}>
            Dashboard
          </Button>
          {/* <Button className="nav-link" color="inherit" component={Link} to="/team" style={{ textTransform: 'none', fontSize: '16px', fontWeight: 'bold'}}>
            Team
          </Button> */}
        </Box>
      </Toolbar>
    </AppBar>
  );
};

export default Navbar;