34 |
35 | {!open && (
36 |
37 |
38 |
39 | )}
40 |
41 |
42 |
64 |
71 |
72 |
73 | }
74 | sx={{ fontWeight: 'fontWeightBold' }}
75 | />
76 |
79 |
80 |
81 |
82 |
83 | );
84 | }
85 |
--------------------------------------------------------------------------------
/src/layouts/core/classes.ts:
--------------------------------------------------------------------------------
1 | import { createClasses } from 'src/theme/create-classes';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export const layoutClasses = {
6 | root: createClasses('layout__root'),
7 | main: createClasses('layout__main'),
8 | header: createClasses('layout__header'),
9 | nav: {
10 | root: createClasses('layout__nav__root'),
11 | mobile: createClasses('layout__nav__mobile'),
12 | vertical: createClasses('layout__nav__vertical'),
13 | horizontal: createClasses('layout__nav__horizontal'),
14 | },
15 | content: createClasses('layout__main__content'),
16 | sidebarContainer: createClasses('layout__sidebar__container'),
17 | };
18 |
--------------------------------------------------------------------------------
/src/layouts/core/css-vars.ts:
--------------------------------------------------------------------------------
1 | import type { Theme } from '@mui/material/styles';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export function layoutSectionVars(theme: Theme) {
6 | return {
7 | '--layout-nav-zIndex': theme.zIndex.drawer + 1,
8 | '--layout-nav-mobile-width': '288px',
9 | '--layout-header-blur': '8px',
10 | '--layout-header-zIndex': theme.zIndex.appBar + 1,
11 | '--layout-header-mobile-height': '64px',
12 | '--layout-header-desktop-height': '72px',
13 | };
14 | }
15 |
--------------------------------------------------------------------------------
/src/layouts/core/index.ts:
--------------------------------------------------------------------------------
1 | export * from './classes';
2 |
3 | export * from './css-vars';
4 |
5 | export * from './main-section';
6 |
7 | export * from './layout-section';
8 |
9 | export * from './header-section';
10 |
--------------------------------------------------------------------------------
/src/layouts/core/layout-section.tsx:
--------------------------------------------------------------------------------
1 | import type { Theme, SxProps, CSSObject } from '@mui/material/styles';
2 |
3 | import { mergeClasses } from 'minimal-shared/utils';
4 |
5 | import { styled } from '@mui/material/styles';
6 | import GlobalStyles from '@mui/material/GlobalStyles';
7 |
8 | import { layoutClasses } from './classes';
9 | import { layoutSectionVars } from './css-vars';
10 |
11 | // ----------------------------------------------------------------------
12 |
13 | export type LayoutSectionProps = React.ComponentProps<'div'> & {
14 | sx?: SxProps