From edc4e153254b4122d03fd4885c8ecb7e4f36f25e Mon Sep 17 00:00:00 2001
From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com>
Date: Mon, 22 Jun 2026 16:42:32 +0700
Subject: [PATCH] refactor: rename navbar components and dimensions to sidebar
 for improved semantic consistency

---
 apps/web/src/apps/shell-demo/index.tsx        |  8 ++---
 .../core-app-shell/core-app-shell.tsx         | 29 ++++++++++---------
 .../ui/src/components/core-app-shell/types.ts | 14 ++++-----
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/apps/web/src/apps/shell-demo/index.tsx b/apps/web/src/apps/shell-demo/index.tsx
index 5adc886..a263ed0 100644
--- a/apps/web/src/apps/shell-demo/index.tsx
+++ b/apps/web/src/apps/shell-demo/index.tsx
@@ -139,8 +139,8 @@ export default function ShellDemo() {
               </Group>
             ),
             header: <MockHeader />,
-            navbarMobile: <MockMobileDrawer />,
-            navbar: !withDoubleSidebar ? (
+            sidebarMobile: <MockMobileDrawer />,
+            sidebar: !withDoubleSidebar ? (
               <Box p="md" h="100%" bg="grape.1" c="grape.9" style={{ borderRight: '1px solid var(--mantine-color-grape-3)' }}>
                 <Text fw={700} mb="sm">Mock Standard Navbar (bg="grape.1")</Text>
                 <Stack gap="xs">
@@ -151,7 +151,7 @@ export default function ShellDemo() {
                 </Stack>
               </Box>
             ) : undefined,
-            navbarRail: withDoubleSidebar ? (
+            sidebarRail: withDoubleSidebar ? (
               <Stack align="center" gap="lg" pt="md" h="100%" bg="orange.1" c="orange.9">
                 <Text size="xs" fw={700} style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>
                   Mock Rail (bg="orange.1")
@@ -161,7 +161,7 @@ export default function ShellDemo() {
                 <SettingsIcon size={24} />
               </Stack>
             ) : undefined,
-            navbarPanel: withDoubleSidebar ? (
+            sidebarPanel: withDoubleSidebar ? (
               <Box p="md" h="100%" bg="grape.1" c="grape.9" style={{ borderRight: '1px solid var(--mantine-color-grape-3)' }}>
                 <Text fw={700} mb="sm">Mock Panel (bg="grape.1")</Text>
                 <Stack gap="xs">
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 50ab8e1..6a11df1 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
@@ -5,11 +5,11 @@ import { CoreAppShellConfig, CoreAppShellSlots, CoreAppShellDimensions } from '.
 
 
 const DEFAULT_DIMENSIONS: Required<CoreAppShellDimensions> = {
-  headerHeight: 60,
-  navbarWidth: 260,
-  navbarMiniWidth: 80,
-  navbarRailWidth: 54,
   utilityBarHeight: 32,
+  headerHeight: 60,
+  sidebarWidth: 260,
+  sidebarMiniWidth: 80,
+  sidebarRailWidth: 54,
   asideWidth: 260,
 };
 
@@ -31,12 +31,12 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
   const navbarWidth = useMemo(() => {
     if (isTopNav) return 0;
     if (isDoubleSidebar) {
-      return navbarPanelOpened ? dims.navbarWidth : dims.navbarRailWidth;
+      return navbarPanelOpened ? dims.sidebarWidth : dims.sidebarRailWidth;
     }
-    if (sidebarVariant === 'mini' && dims.navbarMiniWidth) {
-      return dims.navbarMiniWidth;
+    if (sidebarVariant === 'mini' && dims.sidebarMiniWidth) {
+      return dims.sidebarMiniWidth;
     }
-    return dims.navbarWidth;
+    return dims.sidebarWidth;
   }, [sidebarVariant, dims, isTopNav, isDoubleSidebar, navbarPanelOpened]);
 
   // Determine AppShell Layout
@@ -121,27 +121,27 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
             {isDoubleSidebar ? (
               <Flex h="100%" direction="row" wrap="nowrap">
                 <Box 
-                  w={dims.navbarRailWidth} 
+                  w={dims.sidebarRailWidth} 
                   h="100%" 
                   style={{ 
                     flexShrink: 0,
                     borderRight: '1px solid var(--mantine-color-default-border)' 
                   }}
                 >
-                  {slots.navbarRail}
+                  {slots.sidebarRail}
                 </Box>
                 {navbarPanelOpened && (
                   <Box flex={1} h="100%" style={{ overflow: 'hidden' }}>
-                    {slots.navbarPanel}
+                    {slots.sidebarPanel}
                   </Box>
                 )}
               </Flex>
             ) : (
-              slots.navbar
+              slots.sidebar
             )}
           </Box>
           <Box hiddenFrom="sm" h="100%">
-            {slots.navbarMobile || slots.navbar}
+            {slots.sidebarMobile || slots.sidebar}
           </Box>
         </AppShell.Navbar>
       )}
@@ -168,7 +168,8 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
 
       {showFooter && (
         <AppShell.Footer
-          zIndex={isFooterOffset ? 100 : 105}
+          // zIndex={isFooterOffset ? 100 : 105}
+          zIndex={100}
           style={
             isFooterOffset
               ? {
diff --git a/packages/ui/src/components/core-app-shell/types.ts b/packages/ui/src/components/core-app-shell/types.ts
index 9b44e5c..2dbc37e 100644
--- a/packages/ui/src/components/core-app-shell/types.ts
+++ b/packages/ui/src/components/core-app-shell/types.ts
@@ -7,9 +7,9 @@ export type DesktopCollapseVariant = 'hide' | 'mini';
 export interface CoreAppShellDimensions {
   utilityBarHeight?: number | string;
   headerHeight?: number | string;
-  navbarWidth?: number | string;
-  navbarMiniWidth?: number | string;
-  navbarRailWidth?: number | string;
+  sidebarWidth?: number | string;
+  sidebarMiniWidth?: number | string;
+  sidebarRailWidth?: number | string;
   asideWidth?: number | string;
 }
 
@@ -33,10 +33,10 @@ export interface CoreAppShellConfig {
 export interface CoreAppShellSlots {
   utilityBar?: ReactNode;
   header?: ReactNode;
-  navbar?: ReactNode;
-  navbarMobile?: ReactNode;
-  navbarRail?: ReactNode;
-  navbarPanel?: ReactNode;
+  sidebar?: ReactNode;
+  sidebarMobile?: ReactNode;
+  sidebarRail?: ReactNode;
+  sidebarPanel?: ReactNode;
   aside?: ReactNode;
   footer?: ReactNode;
 }