u
This commit is contained in:
seb
@@ -87,8 +87,8 @@ class AppSidebar extends PureComponent {
|
||||
disablePadding
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'row', lg: 'column' },
|
||||
display: { xs: 'flex', lg: 'block' },
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
height: { xs: '100%', lg: 'auto' },
|
||||
overflowX: { xs: 'auto', lg: 'visible' },
|
||||
@@ -104,6 +104,8 @@ class AppSidebar extends PureComponent {
|
||||
<ListItemButton
|
||||
key={path}
|
||||
type="button"
|
||||
aria-label={label}
|
||||
title={label}
|
||||
selected={active}
|
||||
onMouseDown={(e) => e.preventDefault()}
|
||||
onClick={() => {
|
||||
@@ -131,7 +133,7 @@ class AppSidebar extends PureComponent {
|
||||
borderRadius: { xs: 1, lg: 0 },
|
||||
width: { xs: 'auto', lg: '100%' },
|
||||
height: { xs: '100%', lg: 'auto' },
|
||||
px: { xs: 1.25, sm: 1.5 },
|
||||
px: { xs: active ? 1.25 : 1, sm: active ? 1.5 : 1.25, md: 1.5 },
|
||||
py: { xs: 0.75, sm: 1, lg: 1.25 },
|
||||
borderLeft: { xs: 'none', lg: '3px solid transparent' },
|
||||
borderBottom: { xs: '3px solid transparent', lg: 'none' },
|
||||
@@ -141,7 +143,8 @@ class AppSidebar extends PureComponent {
|
||||
'& .MuiListItemIcon-root': {
|
||||
color: 'inherit',
|
||||
minWidth: { xs: 'auto', lg: 36 },
|
||||
mr: { xs: 0.75, lg: 0 },
|
||||
mr: active ? { xs: 0.75, lg: 0 } : { xs: 0, md: 0.75, lg: 0 },
|
||||
justifyContent: 'center',
|
||||
},
|
||||
'&:hover': {
|
||||
bgcolor: theme.nav.itemHover,
|
||||
@@ -172,7 +175,10 @@ class AppSidebar extends PureComponent {
|
||||
fontWeight: active ? 600 : 500,
|
||||
noWrap: true,
|
||||
}}
|
||||
sx={{ m: 0 }}
|
||||
sx={{
|
||||
m: { xs: 0, lg: 'initial' },
|
||||
display: active ? 'block' : { xs: 'none', md: 'block' },
|
||||
}}
|
||||
/>
|
||||
</ListItemButton>
|
||||
);
|
||||
@@ -239,25 +245,34 @@ class AppSubNav extends PureComponent {
|
||||
<Box
|
||||
component="nav"
|
||||
aria-label="Unternavigation"
|
||||
sx={{
|
||||
width: { xs: 60, sm: 72, md: SUB_NAV_WIDTH },
|
||||
sx={(theme) => ({
|
||||
width: { xs: '100%', sm: 72, md: SUB_NAV_WIDTH },
|
||||
flexShrink: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexDirection: { xs: 'row', sm: 'column' },
|
||||
alignItems: 'center',
|
||||
gap: 1.5,
|
||||
gap: { xs: 1, sm: 1.5 },
|
||||
position: 'sticky',
|
||||
top: { xs: 52, sm: 56, lg: 0 },
|
||||
zIndex: { xs: 1090, sm: 'auto' },
|
||||
alignSelf: 'flex-start',
|
||||
height: {
|
||||
xs: 'calc(var(--df-vh, 100vh) - 52px)',
|
||||
xs: 'auto',
|
||||
sm: 'calc(var(--df-vh, 100vh) - 56px)',
|
||||
lg: 'var(--df-vh, 100vh)',
|
||||
},
|
||||
py: { xs: 2, lg: 4 },
|
||||
ml: { xs: 1, sm: 2, lg: 3 },
|
||||
mr: { xs: 1, sm: 1.5, lg: 2 },
|
||||
}}
|
||||
py: { xs: 0.75, sm: 2, lg: 4 },
|
||||
px: { xs: 1.5, sm: 0 },
|
||||
ml: { xs: 0, sm: 2, lg: 3 },
|
||||
mr: { xs: 0, sm: 1.5, lg: 2 },
|
||||
overflowX: { xs: 'auto', sm: 'visible' },
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': { display: 'none' },
|
||||
bgcolor: { xs: theme.nav?.mainBackground || 'background.default', sm: 'transparent' },
|
||||
borderBottom: { xs: '1px solid', sm: 'none' },
|
||||
borderColor: { xs: 'divider', sm: 'transparent' },
|
||||
boxSizing: 'border-box',
|
||||
})}
|
||||
>
|
||||
{subNav.map(({ segment, label, title, help, icon: Icon }) => {
|
||||
const active = segment === activeSub;
|
||||
@@ -266,6 +281,7 @@ class AppSubNav extends PureComponent {
|
||||
<ButtonBase
|
||||
key={segment || 'index'}
|
||||
type="button"
|
||||
title={label}
|
||||
aria-label={label}
|
||||
aria-current={active ? 'page' : undefined}
|
||||
disableRipple
|
||||
@@ -290,15 +306,17 @@ class AppSubNav extends PureComponent {
|
||||
navigate(segment ? `${activeNav}/${segment}` : activeNav);
|
||||
}}
|
||||
sx={(theme) => ({
|
||||
width: { xs: 60, sm: 72, md: SUB_NAV_WIDTH },
|
||||
py: 1,
|
||||
px: 0.5,
|
||||
width: { xs: 'auto', sm: 72, md: SUB_NAV_WIDTH },
|
||||
py: { xs: 0.5, sm: 1 },
|
||||
px: { xs: active ? 1.25 : 0.75, sm: 0.5 },
|
||||
borderRadius: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
flexDirection: { xs: 'row', sm: 'column' },
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 0.5,
|
||||
gap: { xs: active ? 0.75 : 0, sm: 0.5 },
|
||||
flexShrink: 0,
|
||||
whiteSpace: 'nowrap',
|
||||
color: active
|
||||
? theme.nav?.itemActiveAccent || NAV_ITEM_ACTIVE_ACCENT
|
||||
: theme.palette.text.secondary,
|
||||
@@ -314,18 +332,19 @@ class AppSubNav extends PureComponent {
|
||||
})}
|
||||
>
|
||||
<HelpBadge title={title || label} help={help} placement="right">
|
||||
<Icon sx={{ fontSize: { xs: 24, sm: 28, md: 32 } }} />
|
||||
<Icon sx={{ fontSize: { xs: 20, sm: 28, md: 32 } }} />
|
||||
</HelpBadge>
|
||||
{label ? (
|
||||
<Typography
|
||||
variant="caption"
|
||||
noWrap
|
||||
sx={{
|
||||
fontSize: { xs: '0.62rem', sm: '0.68rem' },
|
||||
fontSize: { xs: '0.75rem', sm: '0.68rem' },
|
||||
fontWeight: 500,
|
||||
lineHeight: 1.2,
|
||||
textAlign: 'center',
|
||||
maxWidth: '100%',
|
||||
display: active ? 'block' : { xs: 'none', sm: 'block' },
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
@@ -358,7 +377,7 @@ export default function AppShell() {
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexDirection: { xs: 'column', sm: 'row' },
|
||||
flexGrow: 1,
|
||||
minWidth: 0,
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user