Header alignment , style and optimization
This commit is contained in:
Sonika
parent
53daf96caa
commit
b6b3a7d422
@ -1,4 +1,5 @@
|
|||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
import AppBar from '@mui/material/AppBar';
|
import AppBar from '@mui/material/AppBar';
|
||||||
import Box from '@mui/material/Box';
|
import Box from '@mui/material/Box';
|
||||||
import Toolbar from '@mui/material/Toolbar';
|
import Toolbar from '@mui/material/Toolbar';
|
||||||
@ -9,58 +10,42 @@ import MenuIcon from '@mui/icons-material/Menu';
|
|||||||
import Container from '@mui/material/Container';
|
import Container from '@mui/material/Container';
|
||||||
import Avatar from '@mui/material/Avatar';
|
import Avatar from '@mui/material/Avatar';
|
||||||
import Button from '@mui/material/Button';
|
import Button from '@mui/material/Button';
|
||||||
import Tooltip from '@mui/material/Tooltip';
|
|
||||||
import MenuItem from '@mui/material/MenuItem';
|
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() {
|
function Header() {
|
||||||
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
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);
|
setAnchorElNav(event.currentTarget);
|
||||||
};
|
};
|
||||||
const handleOpenUserMenu = (event:any) => {
|
|
||||||
setAnchorElUser(event.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCloseNavMenu = () => {
|
const handleCloseNavMenu = () => {
|
||||||
setAnchorElNav(null);
|
setAnchorElNav(null);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleCloseUserMenu = () => {
|
|
||||||
setAnchorElUser(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppBar position="static" sx={{bgcolor:'#0d0d0d', height:'94px'}}>
|
<AppBar position="static" sx={{ bgcolor: '#0d0d0d', height: '94px' }}>
|
||||||
<Container maxWidth="xl">
|
<Container maxWidth="xl">
|
||||||
|
<Toolbar disableGutters sx={{ marginTop: '10px', display: 'flex', justifyContent: 'space-between' }}>
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
noWrap
|
||||||
|
component="a"
|
||||||
|
sx={{
|
||||||
|
mr: 2,
|
||||||
|
display: { xs: 'none', md: 'flex' },
|
||||||
|
fontFamily: 'monospace',
|
||||||
|
fontWeight: 700,
|
||||||
|
letterSpacing: '.3rem',
|
||||||
|
color: 'inherit',
|
||||||
|
textDecoration: 'none',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img src='sonymusic_logo1.png' width="70" height="70" alt="logo"></img>
|
||||||
|
</Typography>
|
||||||
|
|
||||||
<Toolbar disableGutters sx={{marginTop:'10px'}}>
|
|
||||||
<Typography
|
|
||||||
variant="h6"
|
|
||||||
noWrap
|
|
||||||
component="a"
|
|
||||||
// href="#app-bar-with-responsive-menu"
|
|
||||||
sx={{
|
|
||||||
mr: 2,
|
|
||||||
display: { xs: 'none', md: 'flex' },
|
|
||||||
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: 'flex', md: 'none' } }}>
|
|
||||||
<IconButton
|
<IconButton
|
||||||
size="large"
|
size="large"
|
||||||
aria-label="account of current user"
|
aria-label="account of current user"
|
||||||
@ -68,6 +53,7 @@ function Header() {
|
|||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
onClick={handleOpenNavMenu}
|
onClick={handleOpenNavMenu}
|
||||||
color="inherit"
|
color="inherit"
|
||||||
|
sx={{ display: { xs: 'flex', md: 'none' } }}
|
||||||
>
|
>
|
||||||
<MenuIcon />
|
<MenuIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
@ -89,130 +75,75 @@ function Header() {
|
|||||||
display: { xs: 'block', md: 'none' },
|
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>
|
</Menu>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||||
<Typography
|
|
||||||
variant="h5"
|
|
||||||
noWrap
|
|
||||||
component="a"
|
|
||||||
// href="#app-bar-with-responsive-menu"
|
|
||||||
sx={{
|
|
||||||
mr: 2,
|
|
||||||
display: { xs: 'flex', md: 'none' },
|
|
||||||
flexGrow: 1,
|
|
||||||
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
|
<Button
|
||||||
key='home'
|
key="home"
|
||||||
onClick={handleCloseNavMenu}
|
onClick={handleCloseNavMenu}
|
||||||
sx={{ my: 2, color: 'white', display: 'block' }}
|
sx={{
|
||||||
component={Link}
|
mx: 2,
|
||||||
to='/'
|
color: 'white',
|
||||||
>
|
borderBottom: location.pathname === '/' ? '2px solid red' : 'none',
|
||||||
HOME
|
}}
|
||||||
</Button>
|
component={Link}
|
||||||
<Button
|
to="/"
|
||||||
key='home'
|
>
|
||||||
onClick={handleCloseNavMenu}
|
HOME
|
||||||
sx={{ my: 2, color: 'white', display: 'block' }}
|
</Button>
|
||||||
component={Link}
|
<Button
|
||||||
to='/projects'
|
key="projects"
|
||||||
>
|
onClick={handleCloseNavMenu}
|
||||||
PROJECTS
|
sx={{
|
||||||
</Button>
|
mx: 2,
|
||||||
<Button
|
color: 'white',
|
||||||
key='home'
|
borderBottom: location.pathname === '/projects' ? '2px solid red' : 'none',
|
||||||
onClick={handleCloseNavMenu}
|
}}
|
||||||
sx={{ my: 2, color: 'white', display: 'block' }}
|
component={Link}
|
||||||
component={Link}
|
to="/projects"
|
||||||
to='/manage-users'
|
>
|
||||||
>
|
PROJECTS
|
||||||
MANAGE USERS
|
</Button>
|
||||||
</Button>
|
<Button
|
||||||
<Button
|
key="manage-users"
|
||||||
key='home'
|
onClick={handleCloseNavMenu}
|
||||||
onClick={handleCloseNavMenu}
|
sx={{
|
||||||
sx={{ my: 2, color: 'white', display: 'block' }}
|
mx: 2,
|
||||||
component={Link}
|
color: 'white',
|
||||||
to='/intranet-users'
|
borderBottom: location.pathname === '/manage-users' ? '2px solid red' : 'none',
|
||||||
>
|
}}
|
||||||
INTRANET USERS
|
component={Link}
|
||||||
</Button>
|
to="/manage-users"
|
||||||
|
>
|
||||||
|
MANAGE USERS
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
key="intranet-users"
|
||||||
|
onClick={handleCloseNavMenu}
|
||||||
|
sx={{
|
||||||
|
mx: 2,
|
||||||
|
color: 'white',
|
||||||
|
borderBottom: location.pathname === '/intranet-users' ? '2px solid red' : 'none',
|
||||||
|
}}
|
||||||
|
component={Link}
|
||||||
|
to="/intranet-users"
|
||||||
|
>
|
||||||
|
INTRANET USERS
|
||||||
|
</Button>
|
||||||
</Box>
|
</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" />
|
||||||
<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>
|
||||||
</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>
|
</Box>
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</Container>
|
</Container>
|
||||||
</AppBar>
|
</AppBar>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
export default Header;
|
|
||||||
|
export default Header;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user