feat: update sidebar layout to use 'sidebar-first' variant and enhance mobile menu header with CloseButton

packages/ui/src/components/core-app-shell/core-app-shell.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { AppShell, Flex, Box, Button } from '@mantine/core';
+import { AppShell, Flex, Box, Text, CloseButton } from '@mantine/core';
 import { CoreAppShellProvider, useCoreAppShell } from './core-app-shell-context';
 import { CoreAppShellConfig, CoreAppShellSlots, CoreAppShellDimensions } from './types';
 
@@ -142,11 +142,16 @@ function CoreAppShellInner({ slots = {}, children }: CoreAppShellInnerProps) {
         <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>
+              <Flex
+                align="center"
+                justify="space-between"
+                p="md"
+                pb="sm"
+                style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}
+              >
+                <Text fw={700}>Menu</Text>
+                <CloseButton onClick={toggleMobile} size="md" aria-label="Close menu" />
+              </Flex>
             )}
             <Box flex={1} style={{ overflowY: 'auto' }}>
               {slots.sidebarMobile || slots.sidebar}