@micha.bigler/ui-core-micha 2.34.0 → 2.36.0

package/src/layout/SectionNav.jsx

@@ -0,0 +1,299 @@
+import { useId, useState } from 'react';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import {
+  Box,
+  ButtonBase,
+  Drawer,
+  List,
+  ListItemButton,
+  ListItemText,
+  Paper,
+  Stack,
+  Typography,
+} from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'react-i18next';
+
+const defaultZIndex = (theme) => theme.zIndex.drawer + 3;
+
+export const SECTION_NAV_DRAWER_PAPER_SX = {
+  borderTopLeftRadius: 18,
+  borderTopRightRadius: 18,
+  maxHeight: '78dvh',
+  p: 2,
+  pb: 'max(16px, env(safe-area-inset-bottom))',
+};
+
+export const SECTION_NAV_GROUP_PAPER_SX = {
+  overflow: 'hidden',
+};
+
+const SECTION_NAV_GRID_SX = {
+  display: 'grid',
+  gap: 4,
+  alignItems: 'start',
+};
+
+const SECTION_NAV_SIDEBAR_SX = {
+  position: 'sticky',
+  top: 'var(--SectionNav-headerOffset)',
+  alignSelf: 'start',
+};
+
+const SECTION_NAV_CONTENT_SX = {
+  minWidth: 0,
+};
+
+const SECTION_NAV_GROUP_HEADER_SX = {
+  px: 2,
+  py: 1.5,
+  borderBottom: '1px solid',
+  borderColor: 'divider',
+};
+
+const SECTION_NAV_TRIGGER_SX = {
+  width: '100%',
+  minHeight: 56,
+  mb: 2,
+  px: 1.75,
+  py: 1,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: 2,
+  textAlign: 'left',
+  border: '1px solid',
+  borderColor: 'divider',
+  borderRadius: 1,
+  backgroundColor: 'background.paper',
+  boxShadow: 1,
+  '&:hover': {
+    backgroundColor: 'action.hover',
+  },
+  '&.Mui-focusVisible': {
+    outline: '2px solid',
+    outlineColor: 'primary.main',
+    outlineOffset: 2,
+  },
+};
+
+const SECTION_NAV_TRIGGER_TEXT_SX = {
+  minWidth: 0,
+  display: 'flex',
+  flexDirection: 'column',
+};
+
+const SECTION_NAV_TRIGGER_VALUE_SX = {
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+};
+
+const SECTION_NAV_CHEVRON_SX = {
+  color: 'text.secondary',
+  transition: 'transform 0.18s ease',
+  flex: 'none',
+};
+
+const SECTION_NAV_DRAWER_TITLE_SX = {
+  mb: 2,
+};
+
+const SECTION_NAV_DRAWER_SCROLL_SX = {
+  overflowY: 'auto',
+};
+
+function SectionNavList({
+  groups,
+  activeKey,
+  rememberedKey,
+  overviewItem,
+  onSelect,
+  rememberedLabel,
+}) {
+  const headingId = useId();
+
+  return (
+    <Stack spacing={2}>
+      {overviewItem && (
+        <Paper variant="outlined" sx={SECTION_NAV_GROUP_PAPER_SX}>
+          <List disablePadding>
+            <ListItemButton
+              selected={activeKey == null}
+              aria-current={activeKey == null ? 'page' : undefined}
+              onClick={() => onSelect?.(null)}
+            >
+              <ListItemText primary={overviewItem.label} />
+            </ListItemButton>
+          </List>
+        </Paper>
+      )}
+
+      {groups.map((group, groupIndex) => {
+        const groupHeadingId = `${headingId}-${groupIndex}`;
+
+        return (
+          <Paper key={group.key} variant="outlined" sx={SECTION_NAV_GROUP_PAPER_SX}>
+            <Box id={groupHeadingId} sx={SECTION_NAV_GROUP_HEADER_SX}>
+              <Typography variant="subtitle2" fontWeight={700}>
+                {group.label}
+              </Typography>
+            </Box>
+            <List disablePadding aria-labelledby={groupHeadingId}>
+              {group.items.map((item) => {
+                const selected = item.key === activeKey;
+                return (
+                  <ListItemButton
+                    key={item.key}
+                    selected={selected}
+                    aria-current={selected ? 'page' : undefined}
+                    onClick={() => onSelect?.(item.key)}
+                  >
+                    <ListItemText
+                      primary={item.label}
+                      secondary={!selected && item.key === rememberedKey ? rememberedLabel : null}
+                    />
+                  </ListItemButton>
+                );
+              })}
+            </List>
+          </Paper>
+        );
+      })}
+    </Stack>
+  );
+}
+
+export function SectionNav({
+  mode,
+  groups,
+  activeKey = null,
+  onSelect,
+  open,
+  onOpen,
+  onClose,
+  title,
+  triggerEyebrow,
+  overviewItem,
+  rememberedKey,
+  headerOffset = 24,
+  // SHELL-3's bottom bar uses drawer + 2, so the drawer must stay above it.
+  zIndex = defaultZIndex,
+  sidebarWidth = 280,
+  children,
+}) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const drawerId = useId();
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = open !== undefined;
+  const drawerOpen = isControlled ? open : internalOpen;
+  const resolvedTitle = title ?? t('SectionNav.TITLE');
+  const resolvedEyebrow = triggerEyebrow ?? t('SectionNav.TRIGGER_EYEBROW');
+  const rememberedLabel = t('SectionNav.LAST_OPENED');
+  const resolvedZIndex = typeof zIndex === 'function' ? zIndex(theme) : zIndex;
+  const resolvedHeaderOffset = typeof headerOffset === 'number' ? `${headerOffset}px` : headerOffset;
+  const activeItem = activeKey == null
+    ? overviewItem
+    : groups.flatMap((group) => group.items).find((item) => item.key === activeKey);
+
+  const handleTriggerClick = () => {
+    if (isControlled) {
+      onOpen?.();
+    } else {
+      setInternalOpen(true);
+    }
+  };
+
+  const handleDrawerClose = () => {
+    if (!isControlled) setInternalOpen(false);
+    onClose?.();
+  };
+
+  const handleDrawerSelect = (key) => {
+    onSelect?.(key);
+    handleDrawerClose();
+  };
+
+  if (mode === 'desktop') {
+    return (
+      <Box
+        sx={{ ...SECTION_NAV_GRID_SX, gridTemplateColumns: `${sidebarWidth}px minmax(0, 1fr)` }}
+        data-section-nav-mode="desktop"
+      >
+        <Box
+          component="nav"
+          aria-label={resolvedTitle}
+          sx={SECTION_NAV_SIDEBAR_SX}
+          style={{ '--SectionNav-headerOffset': resolvedHeaderOffset }}
+        >
+          <SectionNavList
+            groups={groups}
+            activeKey={activeKey}
+            rememberedKey={rememberedKey}
+            overviewItem={overviewItem}
+            onSelect={onSelect}
+            rememberedLabel={rememberedLabel}
+          />
+        </Box>
+        <Box sx={SECTION_NAV_CONTENT_SX}>{children}</Box>
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      <ButtonBase
+        sx={SECTION_NAV_TRIGGER_SX}
+        onClick={handleTriggerClick}
+        aria-haspopup="dialog"
+        aria-expanded={drawerOpen}
+        aria-controls={drawerId}
+      >
+        <Box sx={SECTION_NAV_TRIGGER_TEXT_SX}>
+          <Typography variant="caption" color="text.secondary">
+            {resolvedEyebrow}
+          </Typography>
+          <Typography variant="subtitle1" sx={SECTION_NAV_TRIGGER_VALUE_SX}>
+            {activeItem?.label ?? resolvedTitle}
+          </Typography>
+        </Box>
+        <KeyboardArrowDownIcon
+          aria-hidden="true"
+          sx={SECTION_NAV_CHEVRON_SX}
+          style={{ transform: drawerOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}
+        />
+      </ButtonBase>
+
+      <Box sx={SECTION_NAV_CONTENT_SX}>{children}</Box>
+
+      <Drawer
+        anchor="bottom"
+        open={drawerOpen}
+        onClose={handleDrawerClose}
+        style={{ zIndex: resolvedZIndex }}
+        PaperProps={{
+          id: drawerId,
+          role: 'dialog',
+          'aria-modal': true,
+          'aria-labelledby': `${drawerId}-title`,
+          sx: SECTION_NAV_DRAWER_PAPER_SX,
+        }}
+      >
+        <Typography id={`${drawerId}-title`} variant="h6" sx={SECTION_NAV_DRAWER_TITLE_SX}>
+          {resolvedTitle}
+        </Typography>
+        <Box sx={SECTION_NAV_DRAWER_SCROLL_SX}>
+          <SectionNavList
+            groups={groups}
+            activeKey={activeKey}
+            rememberedKey={rememberedKey}
+            overviewItem={overviewItem}
+            onSelect={handleDrawerSelect}
+            rememberedLabel={rememberedLabel}
+          />
+        </Box>
+      </Drawer>
+    </>
+  );
+}

package/src/pages/AccountPage.jsx

@@ -2,15 +2,15 @@ import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useSearchParams } from 'react-router-dom';
 import { 
-  Tabs, 
-  Tab, 
   Box, 
   Typography, 
   Alert, 
   CircularProgress,
   Paper,
   Stack,
+  useMediaQuery,
 } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 
 // Internal context
@@ -20,6 +20,7 @@ export const ACCOUNT_PAGE_SECTION_PAPER_SX = { p: 2.5 };
 
 // Falls die Komponenten noch lokal sind:
 import { WidePage } from '../layout/PageLayout';
+import { SectionNav } from '../layout/SectionNav';
 import { ProfileComponent } from '../components/ProfileComponent';
 import { SecurityComponent } from '../components/SecurityComponent';
 import { UserListComponent } from '../components/UserListComponent';
@@ -57,6 +58,8 @@ export function AccountPage({
   const [searchParams, setSearchParams] = useSearchParams();
   const [authPolicy, setAuthPolicy] = useState(null);
   const [authPolicyError, setAuthPolicyError] = useState('');
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
 
   // 1. URL State Management
   const currentTabRaw = searchParams.get('tab') || 'profile';
@@ -159,6 +162,49 @@ export function AccountPage({
     return list;
   }, [user, perms, t, isSuperUser, extraTabs, canViewUsers, canViewInvite]);
 
+  const groups = useMemo(() => {
+    const groupDefinitions = [
+      {
+        key: 'my-account',
+        label: t('Account.GROUP_MY_ACCOUNT', 'My account'),
+        values: new Set(['profile', 'security']),
+      },
+      {
+        key: 'management',
+        label: t('Account.GROUP_MANAGEMENT', 'Management'),
+        values: new Set(['users', 'invite']),
+      },
+      {
+        key: 'help',
+        label: t('Account.GROUP_HELP', 'Help'),
+        values: new Set(['support']),
+      },
+    ];
+    const assignedValues = new Set(
+      groupDefinitions.flatMap((group) => [...group.values]),
+    );
+    const mappedGroups = groupDefinitions.map((group) => ({
+      key: group.key,
+      label: group.label,
+      items: tabs
+        .filter((tab) => group.values.has(tab.value))
+        .map((tab) => ({ key: tab.value, label: tab.label })),
+    }));
+    const extraItems = tabs
+      .filter((tab) => !assignedValues.has(tab.value))
+      .map((tab) => ({ key: tab.value, label: tab.label }));
+
+    if (extraItems.length > 0) {
+      mappedGroups.push({
+        key: 'more',
+        label: t('Account.GROUP_MORE', 'More'),
+        items: extraItems,
+      });
+    }
+
+    return mappedGroups.filter((group) => group.items.length > 0);
+  }, [tabs, t]);
+
   // 4. Loading & Auth Checks
   if (loading) {
     return (
@@ -193,19 +239,13 @@ export function AccountPage({
         <title>{t('Account.PAGE_TITLE', 'Account')} – {user.email}</title>
       </Helmet>
 
-      <Tabs
-        value={safeTab}
-        onChange={handleTabChange}
-        variant="scrollable"
-        scrollButtons="auto"
-        sx={{ mb: 3, borderBottom: 1, borderColor: 'divider' }}
+      <SectionNav
+        mode={isMobile ? 'mobile' : 'desktop'}
+        groups={groups}
+        activeKey={safeTab}
+        onSelect={(key) => handleTabChange(null, key)}
       >
-        {tabs.map((tab) => (
-          <Tab key={tab.value} label={tab.label} value={tab.value} />
-        ))}
-      </Tabs>
-
-      {/* --- TAB CONTENT --- */}
+        {/* --- TAB CONTENT --- */}
 
       {safeTab === 'profile' && (
         <Box sx={{ mt: 2 }}>
@@ -347,6 +387,7 @@ export function AccountPage({
           {activeExtraTab.render?.({ user, perms, isSuperUser, t })}
         </Box>
       )}
+      </SectionNav>
     </WidePage>
   );
 }

package/src/theme/index.js

@@ -3,6 +3,7 @@ export {
   assertThemeComplete,
   assertKitSxDisjoint,
   calculateContrastRatio,
+  reportOffPaletteColours,
   reportKitSxBypasses,
   reportThemeAdoption,
   THEME_COMPLETENESS_SURFACES,

package/src/theme/kitSxRegistry.js

@@ -56,6 +56,10 @@ import {
 } from '../components/UserListComponent';
 import { CHART_FRAME_ALERT_SX, CHART_FRAME_ROOT_SX } from '../components/charts/ChartFrame';
 import { PAGE_LAYOUT_CONTAINER_SX } from '../layout/PageLayout';
+import {
+  SECTION_NAV_DRAWER_PAPER_SX,
+  SECTION_NAV_GROUP_PAPER_SX,
+} from '../layout/SectionNav';
 import {
   ATTACHMENT_LIST_ALERT_SX,
   ATTACHMENT_LIST_LIGHTBOX_ACTION_SX,
@@ -142,6 +146,8 @@ const SX_EXPORTS = {
   REGISTRATION_METHODS_INFO_SX,
   SECURITY_ALERT_SX,
   SECURITY_DIVIDER_SX,
+  SECTION_NAV_DRAWER_PAPER_SX,
+  SECTION_NAV_GROUP_PAPER_SX,
   SIGNUP_CONFIRM_PAGE_ALERT_SX,
   SIGN_UP_PAGE_ALERT_SX,
   SUPPORT_RECOVERY_AGENT_BUTTON_SX,
@@ -161,10 +167,11 @@ const SX_EXPORT_NAMES = new Map(
   Object.entries(SX_EXPORTS).map(([name, sx]) => [sx, name]),
 );
 
-const entry = (component, muiComponent, sx) => ({
+const entry = (component, muiComponent, sx, slots) => ({
   component,
   muiComponent,
   sx,
+  slots,
   exportName: SX_EXPORT_NAMES.get(sx),
 });
 
@@ -219,6 +226,9 @@ export const KIT_COMPONENT_SX_REGISTRY = [
   entry('ChartFrame.root', 'MuiPaper', CHART_FRAME_ROOT_SX),
   entry('ChartFrame.alert', 'MuiAlert', CHART_FRAME_ALERT_SX),
   entry('PageLayout.container', 'MuiContainer', PAGE_LAYOUT_CONTAINER_SX),
+  entry('SectionNav.drawerPaper', 'MuiDrawer', SECTION_NAV_DRAWER_PAPER_SX, ['paper']),
+  entry('SectionNav.drawerPaperBase', 'MuiPaper', SECTION_NAV_DRAWER_PAPER_SX),
+  entry('SectionNav.groupPaper', 'MuiPaper', SECTION_NAV_GROUP_PAPER_SX),
   entry('AttachmentList.lightboxAction', 'MuiIconButton', ATTACHMENT_LIST_LIGHTBOX_ACTION_SX),
   entry('AttachmentList.alert', 'MuiAlert', ATTACHMENT_LIST_ALERT_SX),
   entry('Composer.emojiAction', 'MuiIconButton', COMPOSER_EMOJI_BUTTON_SX),