From 4bf99f6cd990cbe08c8fb55d8726b3997edc54f2 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Mon, 22 Jun 2026 17:49:25 +0700
Subject: [PATCH] refactor: update AppShell navbar layout to support responsive
 widths and add mobile close button

---
 .../core-app-shell/core-app-shell.tsx         | 126 ++++++++++--------
 1 file changed, 67 insertions(+), 59 deletions(-)

diff --git a/packages/ui/src/components/core-app-shell/core-app-shell.tsx b/packages/ui/src/components/core-app-shell/core-app-shell.tsx
index 6a11df1..a4806cc 100644
--- a/packages/ui/src/components/core-app-shell/core-app-shell.tsx
+++ b/packages/ui/src/components/core-app-shell/core-app-shell.tsx
@@ -1,5 +1,5 @@
 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 { CoreAppShellConfig, CoreAppShellSlots, CoreAppShellDimensions } from './types';
 
@@ -19,7 +19,7 @@ interface 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 dims = { ...DEFAULT_DIMENSIONS, ...dimensions };
 
@@ -29,14 +29,18 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
   
   // Calculate Navbar Width based on states
   const navbarWidth = useMemo(() => {
-    if (isTopNav) return 0;
+    let desktopWidth = dims.sidebarWidth;
     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 dims.sidebarWidth;
+
+    return {
+      base: '100%',
+      xs: dims.sidebarWidth,
+      sm: isTopNav ? 0 : desktopWidth,
+    };
   }, [sidebarVariant, dims, isTopNav, isDoubleSidebar, navbarPanelOpened]);
 
   // Determine AppShell Layout
@@ -64,18 +68,14 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
       disabled={features?.disabled}
       zIndex={features?.zIndex ?? 200}
       header={{ height: totalHeaderHeight }}
-      navbar={
-        !isTopNav
-          ? {
-              width: navbarWidth,
-              breakpoint: 'sm',
-              collapsed: {
-                mobile: !mobileOpened,
-                desktop: features?.desktopCollapseVariant === 'hide' ? !desktopOpened : false,
-              },
-            }
-          : undefined
-      }
+      navbar={{
+        width: navbarWidth,
+        breakpoint: 'sm',
+        collapsed: {
+          mobile: !mobileOpened,
+          desktop: isTopNav ? true : (features?.desktopCollapseVariant === 'hide' ? !desktopOpened : false),
+        },
+      }}
       aside={
         showAside && dims.asideWidth
           ? {
@@ -105,46 +105,54 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
         </Flex>
       </AppShell.Header>
 
-      {!isTopNav && (
-        <AppShell.Navbar
-          zIndex={isFooterOffset ? 105 : 100}
-          style={
-            isFooterOffset
-              ? {
-                  bottom: 0,
-                  height: 'calc(100dvh - var(--app-shell-header-offset, 0px))',
-                }
-              : undefined
-          }
-        >
-          <Box visibleFrom="sm" h="100%">
-            {isDoubleSidebar ? (
-              <Flex h="100%" direction="row" wrap="nowrap">
-                <Box 
-                  w={dims.sidebarRailWidth} 
-                  h="100%" 
-                  style={{ 
-                    flexShrink: 0,
-                    borderRight: '1px solid var(--mantine-color-default-border)' 
-                  }}
-                >
-                  {slots.sidebarRail}
+      <AppShell.Navbar
+        zIndex={isFooterOffset ? 105 : 100}
+        maw={{ base: '100%', xs: dims.sidebarWidth, sm: 'none' }}
+        style={
+          isFooterOffset
+            ? {
+                bottom: 0,
+                height: 'calc(100dvh - var(--app-shell-header-offset, 0px))',
+              }
+            : undefined
+        }
+      >
+        <Box visibleFrom="sm" h="100%" display={isTopNav ? 'none' : undefined}>
+          {isDoubleSidebar ? (
+            <Flex h="100%" direction="row" wrap="nowrap">
+              <Box 
+                w={dims.sidebarRailWidth} 
+                h="100%" 
+                style={{ 
+                  flexShrink: 0,
+                  borderRight: '1px solid var(--mantine-color-default-border)' 
+                }}
+              >
+                {slots.sidebarRail}
+              </Box>
+              {navbarPanelOpened && (
+                <Box flex={1} h="100%" style={{ overflow: 'hidden' }}>
+                  {slots.sidebarPanel}
                 </Box>
-                {navbarPanelOpened && (
-                  <Box flex={1} h="100%" style={{ overflow: 'hidden' }}>
-                    {slots.sidebarPanel}
-                  </Box>
-                )}
-              </Flex>
-            ) : (
-              slots.sidebar
-            )}
-          </Box>
-          <Box hiddenFrom="sm" h="100%">
-            {slots.sidebarMobile || slots.sidebar}
-          </Box>
-        </AppShell.Navbar>
-      )}
+              )}
+            </Flex>
+          ) : (
+            slots.sidebar
+          )}
+        </Box>
+        <Box hiddenFrom="sm" h="100%">
+          <Flex direction="column" h="100%">
+            <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>
 
       {showAside && (
         <AppShell.Aside