eigen/trackgo-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

feat: update sidebar layout to use 'sidebar-first' variant and enhance mobile menu header with CloseButton

Browse Source
This commit is contained in:
Firman Ramdhani
2026-07-03 14:56:53 +07:00
parent eed10fb4d2
commit e7b542e96c
2 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/apps/modules/layouts/module.layout.tsx
+2 -1
View File
@@ -5,7 +5,8 @@ import { MENU_ITEMS } from './data/menu.data';
export default function ModuleLayout({ children }: { children: React.ReactNode }) { export default function ModuleLayout({ children }: { children: React.ReactNode }) {
const configAppShell: CoreAppShellConfig = { const configAppShell: CoreAppShellConfig = {
variant: 'header-first', // variant: 'header-first',
variant: 'sidebar-first',
features: { features: {
desktopCollapseVariant: 'mini', desktopCollapseVariant: 'mini',
withUtilityBar: false, withUtilityBar: false,
packages/ui/src/components/core-app-shell/core-app-shell.tsx
+11 -6
View File
@@ -1,5 +1,5 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { AppShell, Flex, Box, Button } from '@mantine/core'; import { AppShell, Flex, Box, Text, CloseButton } from '@mantine/core';
import { CoreAppShellProvider, useCoreAppShell } from './core-app-shell-context'; import { CoreAppShellProvider, useCoreAppShell } from './core-app-shell-context';
import { CoreAppShellConfig, CoreAppShellSlots, CoreAppShellDimensions } from './types'; import { CoreAppShellConfig, CoreAppShellSlots, CoreAppShellDimensions } from './types';
@@ -142,11 +142,16 @@ function CoreAppShellInner({ slots = {}, children }: CoreAppShellInnerProps) {
<Box hiddenFrom="sm" h="100%"> <Box hiddenFrom="sm" h="100%">
<Flex direction="column" h="100%"> <Flex direction="column" h="100%">
{isSidebarFirst && ( {isSidebarFirst && (
<Box p="md" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}> <Flex
<Button fullWidth variant="default" onClick={toggleMobile}> align="center"
Close justify="space-between"
</Button> p="md"
</Box> pb="sm"
style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}
>
<Text fw={700}>Menu</Text>
<CloseButton onClick={toggleMobile} size="md" aria-label="Close menu" />
</Flex>
)} )}
<Box flex={1} style={{ overflowY: 'auto' }}> <Box flex={1} style={{ overflowY: 'auto' }}>
{slots.sidebarMobile || slots.sidebar} {slots.sidebarMobile || slots.sidebar}