From e7b542e96c992760aedc7e324a2d56a73ed8c997 Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Fri, 3 Jul 2026 14:56:53 +0700
Subject: [PATCH] feat: update sidebar layout to use 'sidebar-first' variant
 and enhance mobile menu header with CloseButton

---
 .../src/apps/modules/layouts/module.layout.tsx  |  3 ++-
 .../core-app-shell/core-app-shell.tsx           | 17 +++++++++++------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/apps/modules/layouts/module.layout.tsx b/apps/web/src/apps/modules/layouts/module.layout.tsx
index fa7c64d..6ec734c 100644
--- a/apps/web/src/apps/modules/layouts/module.layout.tsx
+++ b/apps/web/src/apps/modules/layouts/module.layout.tsx
@@ -5,7 +5,8 @@ import { MENU_ITEMS } from './data/menu.data';
 
 export default function ModuleLayout({ children }: { children: React.ReactNode }) {
   const configAppShell: CoreAppShellConfig = {
-    variant: 'header-first',
+    // variant: 'header-first',
+    variant: 'sidebar-first',
     features: {
       desktopCollapseVariant: 'mini',
       withUtilityBar: false,
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 ef81963..e97ec67 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, 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}