seb/dashfront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
seb
2026-07-31 19:38:52 +02:00
parent d08cf7f2df
commit 7cd053ada6
9 changed files with 221 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/components/PageLayout.jsx
View File

@@ -1,6 +1,5 @@
import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import { useLocation, useNavigate } from 'react-router-dom';
import { artikelQueryPath } from '../pages/artikel/artikelQuery';
@@ -8,11 +7,10 @@ import { defaultCategoryPath, isKategorienPath } from '../pages/artikel/category
const SUB_NAV_WIDTH = 80;
function isSubNavActive(pathname, basePath, segment, knownSegments) {
function isSubNavActive(pathname, basePath, segment) {
if (!segment) {
if (pathname === basePath || pathname === `${basePath}/`) return true;
const rest = pathname.slice(basePath.length).replace(/^\//, '');
return Boolean(rest) && !rest.includes('/') && !knownSegments.has(rest);
if (isKategorienPath(pathname)) return false;
return pathname === basePath || pathname === `${basePath}/`;
}
if (segment === 'kategorien') {
return isKategorienPath(pathname);
@@ -25,7 +23,6 @@ export default function PageLayout({ title, showTitle = true, subNav, basePath,
const hasSubNav = subNav?.length > 0;
const navigate = useNavigate();
const { pathname } = useLocation();
const knownSegments = new Set((subNav ?? []).map((item) => item.segment).filter(Boolean));
return (
<Box sx={{ display: 'flex', gap: 2, minHeight: 0 }}>
@@ -43,42 +40,41 @@ export default function PageLayout({ title, showTitle = true, subNav, basePath,
>
{hasSubNav &&
subNav.map(({ segment, label, icon: Icon }) => {
const active = isSubNavActive(pathname, basePath, segment, knownSegments);
const active = isSubNavActive(pathname, basePath, segment);
return (
<Tooltip key={segment || 'index'} title={label} placement="right">
<IconButton
type="button"
aria-label={label}
aria-current={active ? 'page' : undefined}
disableRipple
onMouseDown={(e) => e.preventDefault()}
onClick={() => {
if (!segment && basePath === '/artikel') {
navigate(artikelQueryPath());
return;
}
if (segment === 'kategorien') {
navigate(defaultCategoryPath());
return;
}
navigate(segment ? `${basePath}/${segment}` : basePath);
}}
sx={(theme) => ({
width: 80,
height: 80,
borderRadius: '50%',
color: active ? theme.palette.primary.main : theme.palette.text.secondary,
bgcolor: 'transparent',
'&:hover': {
bgcolor: theme.palette.action.hover,
color: theme.palette.primary.main,
},
})}
>
<Icon sx={{ fontSize: 40 }} />
</IconButton>
</Tooltip>
<IconButton
key={segment || 'index'}
type="button"
aria-label={label}
aria-current={active ? 'page' : undefined}
disableRipple
onMouseDown={(e) => e.preventDefault()}
onClick={() => {
if (!segment && basePath === '/artikel') {
navigate(artikelQueryPath());
return;
}
if (segment === 'kategorien') {
navigate(defaultCategoryPath());
return;
}
navigate(segment ? `${basePath}/${segment}` : basePath);
}}
sx={(theme) => ({
width: 80,
height: 80,
borderRadius: '50%',
color: active ? theme.palette.primary.main : theme.palette.text.secondary,
bgcolor: 'transparent',
'&:hover': {
bgcolor: theme.palette.action.hover,
color: theme.palette.primary.main,
},
})}
>
<Icon sx={{ fontSize: 40 }} />
</IconButton>
);
})}
</Box>