Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x 10x | /**
* @file MenuSectionsRenderer.tsx
* @module app/HamburgerMenu/MenuContent/MenuSectionsRenderer
*
* @summary
* Renders all menu sections with dividers between them.
* Separates menu content rendering from menu state management.
*
* @example
* ```tsx
* <MenuSectionsRenderer
* themeMode="dark"
* onThemeModeChange={handleTheme}
* locale="en"
* onLocaleChange={handleLocale}
* onClose={handleClose}
* />
* ```
*/
import { Box, Divider } from '@mui/material';
import ProfileMenuSection from '../ProfileMenuSection';
import AppearanceMenuSection from '../AppearanceMenuSection';
import LanguageRegionMenuSection from '../LanguageRegionMenuSection';
import NotificationsMenuSection from '../NotificationsMenuSection';
import HelpDocsMenuSection from '../HelpDocsMenuSection';
import SystemInfoMenuSection from '../SystemInfoMenuSection';
import type { SupportedLocale } from '../../../theme';
interface MenuSectionsRendererProps {
/** Current theme mode (light or dark) */
themeMode: 'light' | 'dark';
/** Callback when theme mode changes */
onThemeModeChange: (mode: 'light' | 'dark') => void;
/** Current locale setting */
locale: SupportedLocale;
/** Callback when locale changes */
onLocaleChange: (locale: SupportedLocale) => void;
/** Callback to close menu */
onClose: () => void;
}
/**
* Menu sections renderer component.
*
* Orchestrates rendering of all menu sections with dividers.
* Handles section layout and spacing consistently.
*
* @param props - Component props
* @returns JSX element rendering all menu sections
*/
export default function MenuSectionsRenderer({
themeMode,
onThemeModeChange,
locale,
onLocaleChange,
onClose,
}: MenuSectionsRendererProps) {
return (
<>
{/* Profile Section */}
<Box onClick={onClose}>
<ProfileMenuSection />
</Box>
<Divider />
{/* Appearance Section */}
<Box onClick={onClose}>
<AppearanceMenuSection themeMode={themeMode} onThemeModeChange={onThemeModeChange} />
</Box>
<Divider />
{/* Language & Region Section */}
<Box onClick={onClose}>
<LanguageRegionMenuSection locale={locale} onLocaleChange={onLocaleChange} />
</Box>
<Divider />
{/* Notifications Section */}
<Box onClick={onClose}>
<NotificationsMenuSection />
</Box>
<Divider />
{/* Help & Docs Section */}
<Box onClick={onClose}>
<HelpDocsMenuSection />
</Box>
<Divider />
{/* System Info Section */}
<Box onClick={onClose}>
<SystemInfoMenuSection />
</Box>
<Divider />
</>
);
}
|