edited navbar
This commit is contained in:
Laura Dolibois
@@ -6,7 +6,6 @@ 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';
|
||||
@@ -46,17 +45,12 @@ const SearchIconWrapper = styled('div')(({ theme }) => ({
|
||||
|
||||
const StyledInputBase = styled(InputBase)(({ theme }) => ({
|
||||
color: 'white',
|
||||
width: '100%',
|
||||
flexGrow: 1,
|
||||
maxWidth: '100%',
|
||||
'& .MuiInputBase-input': {
|
||||
padding: theme.spacing(1, 1, 1, 0),
|
||||
paddingLeft: `calc(1em + ${theme.spacing(4)})`,
|
||||
transition: theme.transitions.create('width'),
|
||||
[theme.breakpoints.up('sm')]: {
|
||||
width: '12ch',
|
||||
'&:focus': {
|
||||
width: '20ch',
|
||||
},
|
||||
},
|
||||
paddingLeft: `calc(1em + ${theme.spacing(3)})`,
|
||||
transition: "none"
|
||||
},
|
||||
}));
|
||||
|
||||
@@ -92,136 +86,106 @@ export default function NavBar() {
|
||||
|
||||
return (
|
||||
<AppBar className="navbar">
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters>
|
||||
<AdbIcon className='navbar-logo' />
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
component="a"
|
||||
href="/"
|
||||
sx={{
|
||||
mr: 2,
|
||||
display: { xs: 'none', md: 'flex' },
|
||||
fontFamily: 'monospace',
|
||||
fontWeight: 700,
|
||||
letterSpacing: '.3rem',
|
||||
color: 'white',
|
||||
textDecoration: 'none',
|
||||
}}
|
||||
>
|
||||
Digitaler Produktionsshop
|
||||
</Typography>
|
||||
<Toolbar
|
||||
disableGutters
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
px: 3
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex", alignItems: "center", minWidth: "0px" }}>
|
||||
<AdbIcon className='navbar-logo' />
|
||||
<Typography
|
||||
variant="h6"
|
||||
noWrap
|
||||
component="a"
|
||||
href="/"
|
||||
sx={{
|
||||
fontFamily: "monospace",
|
||||
fontWeight: 700,
|
||||
letterSpacing: ".3rem",
|
||||
color: "white",
|
||||
textDecoration: "none",
|
||||
ml: 1,
|
||||
}}
|
||||
>
|
||||
Digitaler Produktionsshop
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Search>
|
||||
<SearchIconWrapper>
|
||||
<SearchIcon sx={{color: 'white'}}/>
|
||||
</SearchIconWrapper>
|
||||
<StyledInputBase
|
||||
placeholder={t('search') + "..."}
|
||||
inputProps={{ 'aria-label': t('search')}}
|
||||
/>
|
||||
</Search>
|
||||
<Box sx={{ flexGrow: 1, display: "flex", justifyContent: "center", px: 3 }}>
|
||||
<Search sx={{ flexGrow: 1, minWidth: "150px", maxWidth: "600px" }}>
|
||||
<SearchIconWrapper>
|
||||
<SearchIcon sx={{ color: "white" }} />
|
||||
</SearchIconWrapper>
|
||||
<StyledInputBase
|
||||
placeholder={t('search') + "..."}
|
||||
inputProps={{ "aria-label": t('search') }}
|
||||
sx={{ width: "100%" }}
|
||||
/>
|
||||
</Search>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
|
||||
<Box sx={{ display: "flex", alignItems: "center", gap: 2, marginLeft: 'auto' }}>
|
||||
<Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
|
||||
{pages.map(({ key, label }) => (
|
||||
<Button
|
||||
key={key}
|
||||
onClick={() => handleCloseNavMenu(key)}
|
||||
sx={{ color: "white", fontWeight: 500 }}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: { xs: "flex", md: "none" } }}>
|
||||
<IconButton
|
||||
size="large"
|
||||
aria-label={t('currentAccount')}
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
aria-label="menu"
|
||||
onClick={handleOpenNavMenu}
|
||||
color="inherit"
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElNav}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
anchorOrigin={{ vertical: "top", horizontal: "right" }}
|
||||
transformOrigin={{ vertical: "top", horizontal: "right" }}
|
||||
open={Boolean(anchorElNav)}
|
||||
onClose={handleCloseNavMenu}
|
||||
sx={{ display: { xs: 'block', md: 'none' } }}
|
||||
onClose={() => setAnchorElNav(null)}
|
||||
>
|
||||
{pages.map(({ key, label }) => (
|
||||
<MenuItem key={key} onClick={() => handleCloseNavMenu(key)}>
|
||||
<Typography sx={{ textAlign: 'center' }}>{label}</Typography>
|
||||
<Typography>{label}</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',
|
||||
}}
|
||||
{/* Theme Toggle & Avatar (immer sichtbar) */}
|
||||
<ThemeToggle />
|
||||
<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-user"
|
||||
anchorEl={anchorElUser}
|
||||
open={Boolean(anchorElUser)}
|
||||
onClose={() => setAnchorElUser(null)}
|
||||
>
|
||||
DPS
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
|
||||
{pages.map((page) => (
|
||||
<Button
|
||||
key={page.key}
|
||||
onClick={() => handleCloseNavMenu(page.key)}
|
||||
sx={{ my: 2, color: 'white', display: 'block' }}
|
||||
>
|
||||
{page.label}
|
||||
</Button>
|
||||
{settings.map(({ key, label }) => (
|
||||
<MenuItem key={key} onClick={() => handleCloseUserMenu(key)}>
|
||||
<Typography sx={{ textAlign: "center" }}>{label}</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ flexGrow: 0, display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<ThemeToggle />
|
||||
<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-user"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
open={Boolean(anchorElUser)}
|
||||
onClose={handleCloseUserMenu}
|
||||
>
|
||||
{settings.map(({ key, label }) => (
|
||||
<MenuItem key={key} onClick={() => handleCloseUserMenu(key)}>
|
||||
<Typography sx={{ textAlign: 'center' }}>{label}</Typography>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Menu>
|
||||
</Box>
|
||||
</Menu>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user