This commit is contained in:
louiscklaw
2025-05-30 01:14:10 +08:00
parent 98bc3fe3ce
commit 834f58bde1
52 changed files with 624 additions and 604 deletions

View File

@@ -50,13 +50,7 @@ export type DashboardLayoutProps = LayoutBaseProps & {
};
};
export function DashboardLayout({
sx,
cssVars,
children,
slotProps,
layoutQuery = 'lg',
}: DashboardLayoutProps) {
export function DashboardLayout({ sx, cssVars, children, slotProps, layoutQuery = 'lg' }: DashboardLayoutProps) {
const theme = useTheme();
const { user } = useMockedUser();
@@ -73,8 +67,7 @@ export function DashboardLayout({
const isNavHorizontal = settings.state.navLayout === 'horizontal';
const isNavVertical = isNavMini || settings.state.navLayout === 'vertical';
const canDisplayItemByRole = (allowedRoles: NavItemProps['allowedRoles']): boolean =>
!allowedRoles?.includes(user?.role);
const canDisplayItemByRole = (allowedRoles: NavItemProps['allowedRoles']): boolean => !allowedRoles?.includes(user?.role);
const renderHeader = () => {
const headerSlotProps: HeaderSectionProps['slotProps'] = {
@@ -98,27 +91,13 @@ export function DashboardLayout({
</Alert>
),
bottomArea: isNavHorizontal ? (
<NavHorizontal
data={navData}
layoutQuery={layoutQuery}
cssVars={navVars.section}
checkPermissions={canDisplayItemByRole}
/>
<NavHorizontal data={navData} layoutQuery={layoutQuery} cssVars={navVars.section} checkPermissions={canDisplayItemByRole} />
) : null,
leftArea: (
<>
{/** @slot Nav mobile */}
<MenuButton
onClick={onOpen}
sx={{ mr: 1, ml: -1, [theme.breakpoints.up(layoutQuery)]: { display: 'none' } }}
/>
<NavMobile
data={navData}
open={open}
onClose={onClose}
cssVars={navVars.section}
checkPermissions={canDisplayItemByRole}
/>
<MenuButton onClick={onOpen} sx={{ mr: 1, ml: -1, [theme.breakpoints.up(layoutQuery)]: { display: 'none' } }} />
<NavMobile data={navData} open={open} onClose={onClose} cssVars={navVars.section} checkPermissions={canDisplayItemByRole} />
{/** @slot Logo */}
{isNavHorizontal && (
@@ -131,15 +110,10 @@ export function DashboardLayout({
)}
{/** @slot Divider */}
{isNavHorizontal && (
<VerticalDivider sx={{ [theme.breakpoints.up(layoutQuery)]: { display: 'flex' } }} />
)}
{isNavHorizontal && <VerticalDivider sx={{ [theme.breakpoints.up(layoutQuery)]: { display: 'flex' } }} />}
{/** @slot Workspace popover */}
<WorkspacesPopover
data={_workspaces}
sx={{ ...(isNavHorizontal && { color: 'var(--layout-nav-text-primary-color)' }) }}
/>
<WorkspacesPopover data={_workspaces} sx={{ ...(isNavHorizontal && { color: 'var(--layout-nav-text-primary-color)' }) }} />
</>
),
rightArea: (
@@ -184,12 +158,7 @@ export function DashboardLayout({
layoutQuery={layoutQuery}
cssVars={navVars.section}
checkPermissions={canDisplayItemByRole}
onToggleNav={() =>
settings.setField(
'navLayout',
settings.state.navLayout === 'vertical' ? 'mini' : 'vertical'
)
}
onToggleNav={() => settings.setField('navLayout', settings.state.navLayout === 'vertical' ? 'mini' : 'vertical')}
/>
);