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() { ), header: , - navbarMobile: , - navbar: !withDoubleSidebar ? ( + sidebarMobile: , + sidebar: !withDoubleSidebar ? ( Mock Standard Navbar (bg="grape.1") @@ -151,7 +151,7 @@ export default function ShellDemo() { ) : undefined, - navbarRail: withDoubleSidebar ? ( + sidebarRail: withDoubleSidebar ? ( Mock Rail (bg="orange.1") @@ -161,7 +161,7 @@ export default function ShellDemo() { ) : undefined, - navbarPanel: withDoubleSidebar ? ( + sidebarPanel: withDoubleSidebar ? ( Mock Panel (bg="grape.1") 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 = { - 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 ? ( - {slots.navbarRail} + {slots.sidebarRail} {navbarPanelOpened && ( - {slots.navbarPanel} + {slots.sidebarPanel} )} ) : ( - slots.navbar + slots.sidebar )} - {slots.navbarMobile || slots.navbar} + {slots.sidebarMobile || slots.sidebar} )} @@ -168,7 +168,8 @@ function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) { {showFooter && (