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

feat: add conditional close button for sidebar-first variant in mobile navigation

Browse Source
This commit is contained in:
Firman Ramdhani
2026-06-22 18:18:21 +07:00
parent 4bf99f6cd9
commit fb1d360a46
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/core-app-shell/core-app-shell.tsx
+8 -3
View File
@@ -26,6 +26,7 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
const isDoubleSidebar = features?.withDoubleSidebar; const isDoubleSidebar = features?.withDoubleSidebar;
const isTopNav = variant === 'top-nav'; const isTopNav = variant === 'top-nav';
const isFooterOffset = variant === 'header-first'; const isFooterOffset = variant === 'header-first';
const isSidebarFirst = variant === 'sidebar-first';
// Calculate Navbar Width based on states // Calculate Navbar Width based on states
const navbarWidth = useMemo(() => { const navbarWidth = useMemo(() => {
@@ -142,14 +143,18 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
</Box> </Box>
<Box hiddenFrom="sm" h="100%"> <Box hiddenFrom="sm" h="100%">
<Flex direction="column" h="100%"> <Flex direction="column" h="100%">
<Box flex={1} style={{ overflowY: 'auto' }}> {
{slots.sidebarMobile || slots.sidebar} isSidebarFirst && (
</Box>
<Box p="md" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}> <Box p="md" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
<Button fullWidth variant="default" onClick={toggleMobile}> <Button fullWidth variant="default" onClick={toggleMobile}>
Close Close
</Button> </Button>
</Box> </Box>
)
}
<Box flex={1} style={{ overflowY: 'auto' }}>
{slots.sidebarMobile || slots.sidebar}
</Box>
</Flex> </Flex>
</Box> </Box>
</AppShell.Navbar> </AppShell.Navbar>