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 && (