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

This commit is contained in:
Firman Ramdhani
2026-06-22 18:18:21 +07:00
parent 4bf99f6cd9
commit fb1d360a46
@@ -26,6 +26,7 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
const isDoubleSidebar = features?.withDoubleSidebar;
const isTopNav = variant === 'top-nav';
const isFooterOffset = variant === 'header-first';
const isSidebarFirst = variant === 'sidebar-first';
// Calculate Navbar Width based on states
const navbarWidth = useMemo(() => {
@@ -142,14 +143,18 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
</Box>
<Box hiddenFrom="sm" h="100%">
<Flex direction="column" h="100%">
{
isSidebarFirst && (
<Box p="md" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
<Button fullWidth variant="default" onClick={toggleMobile}>
Close
</Button>
</Box>
)
}
<Box flex={1} style={{ overflowY: 'auto' }}>
{slots.sidebarMobile || slots.sidebar}
</Box>
<Box p="md" style={{ borderTop: '1px solid var(--mantine-color-default-border)' }}>
<Button fullWidth variant="default" onClick={toggleMobile}>
Close
</Button>
</Box>
</Flex>
</Box>
</AppShell.Navbar>