Delete Second Navbar
This commit is contained in:
Tim
@@ -1,70 +0,0 @@
|
|||||||
/* Navbar styles */
|
|
||||||
.navbar {
|
|
||||||
background-color: #1976d2; /* Material-UI Primary Color */
|
|
||||||
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
height: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Logo styles */
|
|
||||||
.navbar-logo {
|
|
||||||
font-family: 'Roboto', sans-serif;
|
|
||||||
font-weight: bold;
|
|
||||||
color: white;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Menu styles */
|
|
||||||
.navbar-menu {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Search styles */
|
|
||||||
.search {
|
|
||||||
position: relative;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: rgba(255, 255, 255, 0.15);
|
|
||||||
}
|
|
||||||
.search:hover {
|
|
||||||
background-color: rgba(255, 255, 255, 0.25);
|
|
||||||
}
|
|
||||||
.search-icon-wrapper {
|
|
||||||
padding: 8px;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.search-input {
|
|
||||||
color: inherit;
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 8px 8px 40px;
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* User avatar styles */
|
|
||||||
.navbar-user {
|
|
||||||
margin-left: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Typography styles */
|
|
||||||
.navbar-typography {
|
|
||||||
font-family: 'monospace';
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: .3rem;
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Button styles */
|
|
||||||
.navbar-button {
|
|
||||||
margin: 2;
|
|
||||||
color: white;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
@@ -1,216 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import AppBar from '@mui/material/AppBar';
|
|
||||||
import Box from '@mui/material/Box';
|
|
||||||
import Toolbar from '@mui/material/Toolbar';
|
|
||||||
import IconButton from '@mui/material/IconButton';
|
|
||||||
import Typography from '@mui/material/Typography';
|
|
||||||
import Menu from '@mui/material/Menu';
|
|
||||||
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 { alpha, InputBase, styled } from '@mui/material';
|
|
||||||
import SearchIcon from '@mui/icons-material/Search';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
|
||||||
|
|
||||||
const pages = ['Categories', 'Checkout', 'Contact'];
|
|
||||||
const settings = ['Account', 'Orders', 'Logout'];
|
|
||||||
|
|
||||||
const Search = styled('div')(({ theme }) => ({
|
|
||||||
position: 'relative',
|
|
||||||
borderRadius: theme.shape.borderRadius,
|
|
||||||
backgroundColor: alpha(theme.palette.common.white, 0.15),
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: alpha(theme.palette.common.white, 0.25),
|
|
||||||
},
|
|
||||||
marginLeft: 0,
|
|
||||||
width: '100%',
|
|
||||||
[theme.breakpoints.up('sm')]: {
|
|
||||||
marginLeft: theme.spacing(1),
|
|
||||||
width: 'auto',
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
const SearchIconWrapper = styled('div')(({ theme }) => ({
|
|
||||||
padding: theme.spacing(0, 2),
|
|
||||||
height: '100%',
|
|
||||||
position: 'absolute',
|
|
||||||
pointerEvents: 'none',
|
|
||||||
display: 'flex',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'center',
|
|
||||||
}));
|
|
||||||
|
|
||||||
const StyledInputBase = styled(InputBase)(({ theme }) => ({
|
|
||||||
color: 'inherit',
|
|
||||||
width: '100%',
|
|
||||||
'& .MuiInputBase-input': {
|
|
||||||
padding: theme.spacing(1, 1, 1, 0),
|
|
||||||
// vertical padding + font size from searchIcon
|
|
||||||
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
|
|
||||||
transition: theme.transitions.create('width'),
|
|
||||||
[theme.breakpoints.up('sm')]: {
|
|
||||||
width: '12ch',
|
|
||||||
'&:focus': {
|
|
||||||
width: '20ch',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}));
|
|
||||||
|
|
||||||
export default function NavBar() {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const [anchorElNav, setAnchorElNav] = React.useState<null | HTMLElement>(null);
|
|
||||||
const [anchorElUser, setAnchorElUser] = React.useState<null | HTMLElement>(null);
|
|
||||||
|
|
||||||
const handleOpenNavMenu = (event: React.MouseEvent<HTMLElement>) => {
|
|
||||||
setAnchorElNav(event.currentTarget);
|
|
||||||
};
|
|
||||||
const handleOpenUserMenu = (event: React.MouseEvent<HTMLElement>) => {
|
|
||||||
setAnchorElUser(event.currentTarget);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCloseNavMenu = (link: string) => {
|
|
||||||
setAnchorElNav(null);
|
|
||||||
navigate(`/${link.toLowerCase()}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCloseUserMenu = () => {
|
|
||||||
setAnchorElUser(null);
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<AppBar>
|
|
||||||
<Container maxWidth="xl">
|
|
||||||
<Toolbar disableGutters>
|
|
||||||
<AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />
|
|
||||||
<Typography
|
|
||||||
variant="h6"
|
|
||||||
noWrap
|
|
||||||
component="a"
|
|
||||||
href="/"
|
|
||||||
sx={{
|
|
||||||
mr: 2,
|
|
||||||
display: { xs: 'none', md: 'flex' },
|
|
||||||
fontFamily: 'monospace',
|
|
||||||
fontWeight: 700,
|
|
||||||
letterSpacing: '.3rem',
|
|
||||||
color: 'inherit',
|
|
||||||
textDecoration: 'none',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Digitaler Produktionsshop
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
<Search>
|
|
||||||
<SearchIconWrapper>
|
|
||||||
<SearchIcon />
|
|
||||||
</SearchIconWrapper>
|
|
||||||
<StyledInputBase
|
|
||||||
placeholder="Search…"
|
|
||||||
inputProps={{ 'aria-label': 'search' }}
|
|
||||||
/>
|
|
||||||
</Search>
|
|
||||||
|
|
||||||
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
|
|
||||||
<IconButton
|
|
||||||
size="large"
|
|
||||||
aria-label="account of current user"
|
|
||||||
aria-controls="menu-appbar"
|
|
||||||
aria-haspopup="true"
|
|
||||||
onClick={handleOpenNavMenu}
|
|
||||||
color="inherit"
|
|
||||||
>
|
|
||||||
<MenuIcon />
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
id="menu-appbar"
|
|
||||||
anchorEl={anchorElNav}
|
|
||||||
anchorOrigin={{
|
|
||||||
vertical: 'bottom',
|
|
||||||
horizontal: 'left',
|
|
||||||
}}
|
|
||||||
keepMounted
|
|
||||||
transformOrigin={{
|
|
||||||
vertical: 'top',
|
|
||||||
horizontal: 'left',
|
|
||||||
}}
|
|
||||||
open={Boolean(anchorElNav)}
|
|
||||||
onClose={handleCloseNavMenu}
|
|
||||||
sx={{ display: { xs: 'block', md: 'none' } }}
|
|
||||||
>
|
|
||||||
{pages.map((page) => (
|
|
||||||
<MenuItem key={page} onClick={() => handleCloseNavMenu(page)}>
|
|
||||||
<Typography sx={{ textAlign: 'center' }}>{page}</Typography>
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
</Menu>
|
|
||||||
</Box>
|
|
||||||
<AdbIcon sx={{ display: { xs: 'flex', md: 'none' }, mr: 1 }} />
|
|
||||||
<Typography
|
|
||||||
variant="h5"
|
|
||||||
noWrap
|
|
||||||
component="a"
|
|
||||||
href="/"
|
|
||||||
sx={{
|
|
||||||
mr: 2,
|
|
||||||
display: { xs: 'flex', md: 'none' },
|
|
||||||
flexGrow: 1,
|
|
||||||
fontFamily: 'monospace',
|
|
||||||
fontWeight: 700,
|
|
||||||
letterSpacing: '.3rem',
|
|
||||||
color: 'inherit',
|
|
||||||
textDecoration: 'none',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
DPS
|
|
||||||
</Typography>
|
|
||||||
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
|
|
||||||
{pages.map((page) => (
|
|
||||||
<Button
|
|
||||||
key={page}
|
|
||||||
onClick={() => handleCloseNavMenu(page)}
|
|
||||||
sx={{ my: 2, color: 'white', display: 'block' }}
|
|
||||||
>
|
|
||||||
{page}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
</Box>
|
|
||||||
<Box sx={{ flexGrow: 0 }}>
|
|
||||||
<Tooltip title="Open settings">
|
|
||||||
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
|
||||||
<Avatar alt="Florian Speicher" src="/static/images/avatar/2.jpg" />
|
|
||||||
</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 sx={{ textAlign: 'center' }}>{setting}</Typography>
|
|
||||||
</MenuItem>
|
|
||||||
))}
|
|
||||||
</Menu>
|
|
||||||
</Box>
|
|
||||||
</Toolbar>
|
|
||||||
</Container>
|
|
||||||
</AppBar>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user