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

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
-          ? {
+      navbar={{
         width: navbarWidth,
         breakpoint: 'sm',
         collapsed: {
           mobile: !mobileOpened,
-                desktop: features?.desktopCollapseVariant === 'hide' ? !desktopOpened : false,
+          desktop: isTopNav ? true : (features?.desktopCollapseVariant === 'hide' ? !desktopOpened : false),
         },
-            }
-          : undefined
-      }
+      }}
       aside={
         showAside && dims.asideWidth
           ? {
@@ -105,9 +105,9 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
         </Flex>
       </AppShell.Header>
 
-      {!isTopNav && (
       <AppShell.Navbar
         zIndex={isFooterOffset ? 105 : 100}
+        maw={{ base: '100%', xs: dims.sidebarWidth, sm: 'none' }}
         style={
           isFooterOffset
             ? {
@@ -117,7 +117,7 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
             : undefined
         }
       >
-          <Box visibleFrom="sm" h="100%">
+        <Box visibleFrom="sm" h="100%" display={isTopNav ? 'none' : undefined}>
           {isDoubleSidebar ? (
             <Flex h="100%" direction="row" wrap="nowrap">
               <Box 
@@ -141,10 +141,18 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
           )}
         </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