Header alignment , style and optimization

src/components/Header.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Link, useLocation } from 'react-router-dom';
 import AppBar from '@mui/material/AppBar';
 import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
@@ -9,44 +10,29 @@ import MenuIcon from '@mui/icons-material/Menu';
 import Container from '@mui/material/Container';
 import Avatar from '@mui/material/Avatar';
 import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
-import AdbIcon from '@mui/icons-material/Adb';
-import Grid from '@mui/material/Grid';
-import { Link } from 'react-router-dom';
-
-const pages = ['HOME','PROJECTS', 'SEARCH', 'ADMIN','MANAGE USERS','INTRANET USERS'];
-const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
 
 function Header() {
   const [anchorElNav, setAnchorElNav] = React.useState(null);
-  const [anchorElUser, setAnchorElUser] = React.useState(null);
+  const location = useLocation();
 
-  const handleOpenNavMenu = (event:any) => {
+  const handleOpenNavMenu = (event: any) => {
     setAnchorElNav(event.currentTarget);
   };
-  const handleOpenUserMenu = (event:any) => {
-    setAnchorElUser(event.currentTarget);
-  };
 
   const handleCloseNavMenu = () => {
     setAnchorElNav(null);
   };
 
-  const handleCloseUserMenu = () => {
-    setAnchorElUser(null);
-  };
-
   return (
-    <AppBar position="static" sx={{bgcolor:'#0d0d0d', height:'94px'}}>
+    <AppBar position="static" sx={{ bgcolor: '#0d0d0d', height: '94px' }}>
       <Container maxWidth="xl">
-
+        <Toolbar disableGutters sx={{ marginTop: '10px', display: 'flex', justifyContent: 'space-between' }}>
-        <Toolbar disableGutters sx={{marginTop:'10px'}}>   
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
             <Typography
               variant="h6"
               noWrap
               component="a"
-            // href="#app-bar-with-responsive-menu"
               sx={{
                 mr: 2,
                 display: { xs: 'none', md: 'flex' },
@@ -57,10 +43,9 @@ function Header() {
                 textDecoration: 'none',
               }}
             >
-            <img src='sonymusic_logo1.png' width="70" height="70"></img>
+              <img src='sonymusic_logo1.png' width="70" height="70" alt="logo"></img>
             </Typography>
 
-          <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
             <IconButton
               size="large"
               aria-label="account of current user"
@@ -68,6 +53,7 @@ function Header() {
               aria-haspopup="true"
               onClick={handleOpenNavMenu}
               color="inherit"
+              sx={{ display: { xs: 'flex', md: 'none' } }}
             >
               <MenuIcon />
             </IconButton>
@@ -89,130 +75,75 @@ function Header() {
                 display: { xs: 'block', md: 'none' },
               }}
             >
-              {/* {pages.map((page) => (
+              {/* ... (existing code) */}
-                <MenuItem key={page} onClick={handleCloseNavMenu}>
-                  <Typography textAlign="center">{page}</Typography>
-                </MenuItem>
-              ))} */}
-                <MenuItem key='home' onClick={handleCloseNavMenu}>
-                  <Typography textAlign="center" component={Link}
-                    to='/'>HOME</Typography>
-                </MenuItem>
-                <MenuItem key='home' onClick={handleCloseNavMenu}>
-                  <Typography textAlign="center" component={Link}
-                    to='/projects'>PROJECTS</Typography>
-                </MenuItem>
-                <MenuItem key='home' onClick={handleCloseNavMenu}>
-                  <Typography textAlign="center" component={Link}
-                    to='/manage-users'>MANAGE USERS</Typography>
-                </MenuItem>
-                <MenuItem key='home' onClick={handleCloseNavMenu}>
-                  <Typography textAlign="center" component={Link}
-                    to='/intranet-users'>INTRANET USERS</Typography>
-                </MenuItem>
             </Menu>
           </Box>
 
-    
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          <Typography
+            <Button
-            variant="h5"
+              key="home"
-            noWrap
+              onClick={handleCloseNavMenu}
-            component="a"
-            // href="#app-bar-with-responsive-menu"
               sx={{
-              mr: 2,
+                mx: 2,
-              display: { xs: 'flex', md: 'none' },
+                color: 'white',
-              flexGrow: 1,
+                borderBottom: location.pathname === '/' ? '2px solid red' : 'none',
-              fontFamily: 'monospace',
-              fontWeight: 700,
-              letterSpacing: '.3rem',
-              color: 'inherit',
-              textDecoration: 'none',
               }}
-          >
-            <img src='sonymusic_logo1.png' width="70" height="70"></img>
-          </Typography>
-          <Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
-            {/* {pages.map((page) => (
-              <Button
-                key={page}
-                onClick={handleCloseNavMenu}
-                sx={{ my: 2, color: 'white', display: 'block' }}
-              >
-                {page}
-              </Button>
-            ))} */}
-            <Button
-                key='home'
-                onClick={handleCloseNavMenu}
-                sx={{ my: 2, color: 'white', display: 'block' }}
               component={Link}
-                    to='/'
+              to="/"
             >
               HOME
             </Button>
             <Button
-                key='home'
+              key="projects"
               onClick={handleCloseNavMenu}
-                sx={{ my: 2, color: 'white', display: 'block' }}
+              sx={{
+                mx: 2,
+                color: 'white',
+                borderBottom: location.pathname === '/projects' ? '2px solid red' : 'none',
+              }}
               component={Link}
-                    to='/projects'
+              to="/projects"
             >
               PROJECTS
             </Button>
             <Button
-                key='home'
+              key="manage-users"
               onClick={handleCloseNavMenu}
-                sx={{ my: 2, color: 'white', display: 'block' }}
+              sx={{
+                mx: 2,
+                color: 'white',
+                borderBottom: location.pathname === '/manage-users' ? '2px solid red' : 'none',
+              }}
               component={Link}
-                    to='/manage-users'
+              to="/manage-users"
             >
               MANAGE USERS
             </Button>
             <Button
-                key='home'
+              key="intranet-users"
               onClick={handleCloseNavMenu}
-                sx={{ my: 2, color: 'white', display: 'block' }}
+              sx={{
+                mx: 2,
+                color: 'white',
+                borderBottom: location.pathname === '/intranet-users' ? '2px solid red' : 'none',
+              }}
               component={Link}
-                    to='/intranet-users'
+              to="/intranet-users"
             >
               INTRANET USERS
             </Button>
           </Box>
 
-          <Box sx={{ flexGrow: 0 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <Tooltip title="Open settings">
+            <IconButton sx={{ p: 0 }}>
-              <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
               <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
-                 <Typography textAlign="center" sx={{fontWeight:700, marginLeft:2, color:'white'}}>Riveesh</Typography>
+              <Typography textAlign="center" sx={{ fontWeight: 700, marginLeft: 2, color: 'white' }}>Riveesh</Typography>
             </IconButton>
-            </Tooltip>
-            <Menu
-              sx={{ mt: '45px' }}
-              id="menu-appbar"
-              anchorEl={anchorElUser}
-              anchorOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-              }}
-              keepMounted
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'right',
-              }}
-              open={Boolean(anchorElUser)}
-              onClose={handleCloseUserMenu}
-            >
-              {settings.map((setting) => (
-                <MenuItem key={setting} onClick={handleCloseUserMenu}>
-                  <Typography textAlign="center">{setting}</Typography>
-                </MenuItem>
-              ))}
-            </Menu>
           </Box>
         </Toolbar>
       </Container>
     </AppBar>
   );
 }
+
 export default Header;