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

refactor: update AppShell navbar layout to support responsive widths and add mobile close button

Browse Source
This commit is contained in:
Firman Ramdhani
2026-06-22 17:49:25 +07:00
parent edc4e15325
commit 4bf99f6cd9
1 changed files with 67 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/core-app-shell/core-app-shell.tsx
+67 -59
View File
@@ -1,5 +1,5 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import { AppShell, Flex, Box } from '@mantine/core'; import { AppShell, Flex, Box, Button } 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';
@@ -19,7 +19,7 @@ interface CoreAppShellInnerProps {
} }
function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) { function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
const { mobileOpened, desktopOpened, sidebarVariant, asideOpened, navbarPanelOpened, config } = useCoreAppShell(); const { mobileOpened, desktopOpened, sidebarVariant, asideOpened, navbarPanelOpened, config, toggleMobile } = useCoreAppShell();
const { variant, dimensions, features } = config; const { variant, dimensions, features } = config;
const dims = { ...DEFAULT_DIMENSIONS, ...dimensions }; const dims = { ...DEFAULT_DIMENSIONS, ...dimensions };
@@ -29,14 +29,18 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
// Calculate Navbar Width based on states // Calculate Navbar Width based on states
const navbarWidth = useMemo(() => { const navbarWidth = useMemo(() => {
if (isTopNav) return 0; let desktopWidth = dims.sidebarWidth;
if (isDoubleSidebar) { if (isDoubleSidebar) {
return navbarPanelOpened ? dims.sidebarWidth : dims.sidebarRailWidth; desktopWidth = navbarPanelOpened ? dims.sidebarWidth : dims.sidebarRailWidth;
} else if (sidebarVariant === 'mini' && dims.sidebarMiniWidth) {
desktopWidth = dims.sidebarMiniWidth;
} }
if (sidebarVariant === 'mini' && dims.sidebarMiniWidth) {
return dims.sidebarMiniWidth; return {
} base: '100%',
return dims.sidebarWidth; xs: dims.sidebarWidth,
sm: isTopNav ? 0 : desktopWidth,
};
}, [sidebarVariant, dims, isTopNav, isDoubleSidebar, navbarPanelOpened]); }, [sidebarVariant, dims, isTopNav, isDoubleSidebar, navbarPanelOpened]);
// Determine AppShell Layout // Determine AppShell Layout
@@ -64,18 +68,14 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
disabled={features?.disabled} disabled={features?.disabled}
zIndex={features?.zIndex ?? 200} zIndex={features?.zIndex ?? 200}
header={{ height: totalHeaderHeight }} header={{ height: totalHeaderHeight }}
navbar={ navbar={{
!isTopNav width: navbarWidth,
? { breakpoint: 'sm',
width: navbarWidth, collapsed: {
breakpoint: 'sm', mobile: !mobileOpened,
collapsed: { desktop: isTopNav ? true : (features?.desktopCollapseVariant === 'hide' ? !desktopOpened : false),
mobile: !mobileOpened, },
desktop: features?.desktopCollapseVariant === 'hide' ? !desktopOpened : false, }}
},
}
: undefined
}
aside={ aside={
showAside && dims.asideWidth showAside && dims.asideWidth
? { ? {
@@ -105,46 +105,54 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
</Flex> </Flex>
</AppShell.Header> </AppShell.Header>
{!isTopNav && ( <AppShell.Navbar
<AppShell.Navbar zIndex={isFooterOffset ? 105 : 100}
zIndex={isFooterOffset ? 105 : 100} maw={{ base: '100%', xs: dims.sidebarWidth, sm: 'none' }}
style={ style={
isFooterOffset isFooterOffset
? { ? {
bottom: 0, bottom: 0,
height: 'calc(100dvh - var(--app-shell-header-offset, 0px))', height: 'calc(100dvh - var(--app-shell-header-offset, 0px))',
} }
: undefined : undefined
} }
> >
<Box visibleFrom="sm" h="100%"> <Box visibleFrom="sm" h="100%" display={isTopNav ? 'none' : undefined}>
{isDoubleSidebar ? ( {isDoubleSidebar ? (
<Flex h="100%" direction="row" wrap="nowrap"> <Flex h="100%" direction="row" wrap="nowrap">
<Box <Box
w={dims.sidebarRailWidth} w={dims.sidebarRailWidth}
h="100%" h="100%"
style={{ style={{
flexShrink: 0, flexShrink: 0,
borderRight: '1px solid var(--mantine-color-default-border)' borderRight: '1px solid var(--mantine-color-default-border)'
}} }}
> >
{slots.sidebarRail} {slots.sidebarRail}
</Box>
{navbarPanelOpened && (
<Box flex={1} h="100%" style={{ overflow: 'hidden' }}>
{slots.sidebarPanel}
</Box> </Box>
{navbarPanelOpened && ( )}
<Box flex={1} h="100%" style={{ overflow: 'hidden' }}> </Flex>
{slots.sidebarPanel} ) : (
</Box> slots.sidebar
)} )}
</Flex> </Box>
) : ( <Box hiddenFrom="sm" h="100%">
slots.sidebar <Flex direction="column" h="100%">
)} <Box flex={1} style={{ overflowY: 'auto' }}>
</Box> {slots.sidebarMobile || slots.sidebar}
<Box hiddenFrom="sm" h="100%"> </Box>
{slots.sidebarMobile || slots.sidebar} <Box p="md" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
</Box> <Button fullWidth variant="default" onClick={toggleMobile}>
</AppShell.Navbar> Close
)} </Button>
</Box>
</Flex>
</Box>
</AppShell.Navbar>
{showAside && ( {showAside && (
<AppShell.Aside <AppShell.Aside