feat: implement CoreAppShell component with flexible layout configurations and state management context
This commit is contained in:
Firman Ramdhani
@@ -0,0 +1,70 @@
|
||||
import { createContext, useContext, useState, ReactNode } from 'react';
|
||||
import { useLocalStorage } from '@mantine/hooks';
|
||||
import { CoreAppShellConfig, SidebarVariant } from './types';
|
||||
|
||||
interface CoreAppShellContextValue {
|
||||
mobileOpened: boolean;
|
||||
desktopOpened: boolean;
|
||||
sidebarVariant: SidebarVariant;
|
||||
asideOpened: boolean;
|
||||
navbarPanelOpened: boolean;
|
||||
config: CoreAppShellConfig;
|
||||
toggleMobile: () => void;
|
||||
toggleDesktop: () => void;
|
||||
toggleAside: () => void;
|
||||
toggleNavbarPanel: () => void;
|
||||
setSidebarVariant: (variant: SidebarVariant) => void;
|
||||
}
|
||||
|
||||
const CoreAppShellContext = createContext<CoreAppShellContextValue | null>(null);
|
||||
|
||||
interface CoreAppShellProviderProps {
|
||||
children: ReactNode;
|
||||
config: CoreAppShellConfig;
|
||||
}
|
||||
|
||||
export function CoreAppShellProvider({ children, config }: CoreAppShellProviderProps) {
|
||||
const [mobileOpened, setMobileOpened] = useState(false);
|
||||
const [desktopOpened, setDesktopOpened] = useState(true);
|
||||
const [asideOpened, setAsideOpened] = useState(false);
|
||||
const [navbarPanelOpened, setNavbarPanelOpened] = useState(true);
|
||||
|
||||
const [sidebarVariant, setSidebarVariant] = useLocalStorage<SidebarVariant>({
|
||||
key: 'core-app-shell-sidebar-variant',
|
||||
defaultValue: 'expanded',
|
||||
getInitialValueInEffect: !config.features?.persistState,
|
||||
});
|
||||
|
||||
const toggleMobile = () => setMobileOpened((o) => !o);
|
||||
const toggleDesktop = () => setDesktopOpened((o) => !o);
|
||||
const toggleAside = () => setAsideOpened((o) => !o);
|
||||
const toggleNavbarPanel = () => setNavbarPanelOpened((o) => !o);
|
||||
|
||||
return (
|
||||
<CoreAppShellContext.Provider
|
||||
value={{
|
||||
mobileOpened,
|
||||
desktopOpened,
|
||||
sidebarVariant,
|
||||
asideOpened,
|
||||
navbarPanelOpened,
|
||||
config,
|
||||
toggleMobile,
|
||||
toggleDesktop,
|
||||
toggleAside,
|
||||
toggleNavbarPanel,
|
||||
setSidebarVariant,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</CoreAppShellContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useCoreAppShell() {
|
||||
const context = useContext(CoreAppShellContext);
|
||||
if (!context) {
|
||||
throw new Error('useCoreAppShell must be used within CoreAppShellProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -0,0 +1,205 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { AppShell, Flex, Box } from '@mantine/core';
|
||||
import { CoreAppShellProvider, useCoreAppShell } from './core-app-shell-context';
|
||||
import { CoreAppShellConfig, CoreAppShellSlots, CoreAppShellDimensions } from './types';
|
||||
|
||||
|
||||
const DEFAULT_DIMENSIONS: Required<CoreAppShellDimensions> = {
|
||||
headerHeight: 60,
|
||||
navbarWidth: 260,
|
||||
navbarMiniWidth: 80,
|
||||
navbarRailWidth: 54,
|
||||
utilityBarHeight: 32,
|
||||
asideWidth: 260,
|
||||
};
|
||||
|
||||
interface CoreAppShellInnerProps {
|
||||
slots: CoreAppShellSlots;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
function CoreAppShellInner({ slots, children }: CoreAppShellInnerProps) {
|
||||
const { mobileOpened, desktopOpened, sidebarVariant, asideOpened, navbarPanelOpened, config } = useCoreAppShell();
|
||||
const { variant, dimensions, features } = config;
|
||||
const dims = { ...DEFAULT_DIMENSIONS, ...dimensions };
|
||||
|
||||
const isDoubleSidebar = features?.withDoubleSidebar;
|
||||
const isTopNav = variant === 'top-nav';
|
||||
const isFooterOffset = variant === 'header-first';
|
||||
|
||||
// Calculate Navbar Width based on states
|
||||
const navbarWidth = useMemo(() => {
|
||||
if (isTopNav) return 0;
|
||||
if (isDoubleSidebar) {
|
||||
return navbarPanelOpened ? dims.navbarWidth : dims.navbarRailWidth;
|
||||
}
|
||||
if (sidebarVariant === 'mini' && dims.navbarMiniWidth) {
|
||||
return dims.navbarMiniWidth;
|
||||
}
|
||||
return dims.navbarWidth;
|
||||
}, [sidebarVariant, dims, isTopNav, isDoubleSidebar, navbarPanelOpened]);
|
||||
|
||||
// Determine AppShell Layout
|
||||
const appShellLayout = variant === 'sidebar-first' ? 'alt' : 'default';
|
||||
|
||||
// Smart defaults for slots
|
||||
const showUtilityBar = (features?.withUtilityBar ?? Boolean(slots.utilityBar)) && Boolean(slots.utilityBar);
|
||||
const showAside = (features?.withAside ?? Boolean(slots.aside)) && Boolean(slots.aside);
|
||||
const showFooter = (features?.withFooter ?? Boolean(slots.footer)) && Boolean(slots.footer);
|
||||
|
||||
|
||||
// Header height needs to account for utility bar if present
|
||||
const totalHeaderHeight = useMemo(() => {
|
||||
if (!showUtilityBar) return dims.headerHeight;
|
||||
// Basic summation assuming pixel values or numeric equivalents if both are numbers
|
||||
if (typeof dims.headerHeight === 'number' && typeof dims.utilityBarHeight === 'number') {
|
||||
return dims.headerHeight + dims.utilityBarHeight;
|
||||
}
|
||||
return `calc(${dims.headerHeight}${typeof dims.headerHeight === 'number' ? 'px' : ''} + ${dims.utilityBarHeight}${typeof dims.utilityBarHeight === 'number' ? 'px' : ''})`;
|
||||
}, [dims.headerHeight, dims.utilityBarHeight, showUtilityBar]);
|
||||
|
||||
return (
|
||||
<AppShell
|
||||
layout={appShellLayout}
|
||||
disabled={features?.disabled}
|
||||
zIndex={features?.zIndex ?? 200}
|
||||
header={{ height: totalHeaderHeight }}
|
||||
navbar={
|
||||
!isTopNav
|
||||
? {
|
||||
width: navbarWidth,
|
||||
breakpoint: 'sm',
|
||||
collapsed: {
|
||||
mobile: !mobileOpened,
|
||||
desktop: features?.desktopCollapseVariant === 'hide' ? !desktopOpened : false,
|
||||
},
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
aside={
|
||||
showAside && dims.asideWidth
|
||||
? {
|
||||
width: dims.asideWidth,
|
||||
breakpoint: 'sm',
|
||||
collapsed: { mobile: !asideOpened, desktop: !asideOpened },
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
footer={
|
||||
showFooter
|
||||
? { height: 60 } // Example default footer height
|
||||
: undefined
|
||||
}
|
||||
padding="md"
|
||||
>
|
||||
<AppShell.Header>
|
||||
<Flex direction="column" h="100%">
|
||||
{showUtilityBar && (
|
||||
<Box h={dims.utilityBarHeight} display={{ base: 'none', sm: 'block' }}>
|
||||
{slots.utilityBar}
|
||||
</Box>
|
||||
)}
|
||||
<Box flex={1}>
|
||||
{slots.header}
|
||||
</Box>
|
||||
</Flex>
|
||||
</AppShell.Header>
|
||||
|
||||
{!isTopNav && (
|
||||
<AppShell.Navbar
|
||||
zIndex={isFooterOffset ? 105 : 100}
|
||||
style={
|
||||
isFooterOffset
|
||||
? {
|
||||
bottom: 0,
|
||||
height: 'calc(100dvh - var(--app-shell-header-offset, 0px))',
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<Box visibleFrom="sm" h="100%">
|
||||
{isDoubleSidebar ? (
|
||||
<Flex h="100%" direction="row" wrap="nowrap">
|
||||
<Box
|
||||
w={dims.navbarRailWidth}
|
||||
h="100%"
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
borderRight: '1px solid var(--mantine-color-default-border)'
|
||||
}}
|
||||
>
|
||||
{slots.navbarRail}
|
||||
</Box>
|
||||
{navbarPanelOpened && (
|
||||
<Box flex={1} h="100%" style={{ overflow: 'hidden' }}>
|
||||
{slots.navbarPanel}
|
||||
</Box>
|
||||
)}
|
||||
</Flex>
|
||||
) : (
|
||||
slots.navbar
|
||||
)}
|
||||
</Box>
|
||||
<Box hiddenFrom="sm" h="100%">
|
||||
{slots.navbarMobile || slots.navbar}
|
||||
</Box>
|
||||
</AppShell.Navbar>
|
||||
)}
|
||||
|
||||
{showAside && (
|
||||
<AppShell.Aside
|
||||
zIndex={isFooterOffset ? 105 : 100}
|
||||
style={
|
||||
isFooterOffset
|
||||
? {
|
||||
bottom: 0,
|
||||
height: 'calc(100dvh - var(--app-shell-header-offset, 0px))',
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
{slots.aside}
|
||||
</AppShell.Aside>
|
||||
)}
|
||||
|
||||
<AppShell.Main>
|
||||
{children}
|
||||
</AppShell.Main>
|
||||
|
||||
{showFooter && (
|
||||
<AppShell.Footer
|
||||
zIndex={isFooterOffset ? 100 : 105}
|
||||
style={
|
||||
isFooterOffset
|
||||
? {
|
||||
left: 'var(--app-shell-navbar-offset, 0px)',
|
||||
right: 'var(--app-shell-aside-offset, 0px)',
|
||||
}
|
||||
: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
}
|
||||
}
|
||||
>
|
||||
{slots.footer}
|
||||
</AppShell.Footer>
|
||||
)}
|
||||
</AppShell>
|
||||
);
|
||||
}
|
||||
|
||||
export interface CoreAppShellProps {
|
||||
config: CoreAppShellConfig;
|
||||
slots: CoreAppShellSlots;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export function CoreAppShell({ config, slots, children }: CoreAppShellProps) {
|
||||
return (
|
||||
<CoreAppShellProvider config={config}>
|
||||
<CoreAppShellInner slots={slots}>
|
||||
{children}
|
||||
</CoreAppShellInner>
|
||||
</CoreAppShellProvider>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import { ReactNode } from 'react';
|
||||
import { Box, Container, Stack, ContainerProps } from '@mantine/core';
|
||||
|
||||
export interface CorePageContainerProps extends ContainerProps {
|
||||
headerSlot?: ReactNode;
|
||||
children: ReactNode;
|
||||
stickyHeader?: boolean;
|
||||
}
|
||||
|
||||
export function CorePageContainer({
|
||||
headerSlot,
|
||||
stickyHeader = false,
|
||||
children,
|
||||
px = "md",
|
||||
py = "md",
|
||||
...others
|
||||
}: CorePageContainerProps) {
|
||||
return (
|
||||
<Box m="calc(var(--mantine-spacing-md) * -1)">
|
||||
<Stack gap={0}>
|
||||
{headerSlot && (
|
||||
<Box
|
||||
style={{
|
||||
position: stickyHeader ? 'sticky' : 'static',
|
||||
top: stickyHeader ? 'var(--app-shell-header-offset, 0px)' : undefined,
|
||||
zIndex: stickyHeader ? 10 : undefined,
|
||||
backgroundColor: 'var(--mantine-color-body)',
|
||||
borderBottom: '1px solid var(--mantine-color-default-border)',
|
||||
}}
|
||||
>
|
||||
<Container fluid px={px} py={py}>
|
||||
{headerSlot}
|
||||
</Container>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Container fluid px={px} py={py} w="100%" {...others}>
|
||||
{children}
|
||||
</Container>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
export * from './types';
|
||||
export * from './core-app-shell-context';
|
||||
export * from './core-app-shell';
|
||||
export * from './core-page-container';
|
||||
@@ -0,0 +1,42 @@
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
export type LayoutVariant = 'header-first' | 'sidebar-first' | 'top-nav';
|
||||
export type SidebarVariant = 'expanded' | 'mini' | 'hidden';
|
||||
export type DesktopCollapseVariant = 'hide' | 'mini';
|
||||
|
||||
export interface CoreAppShellDimensions {
|
||||
utilityBarHeight?: number | string;
|
||||
headerHeight?: number | string;
|
||||
navbarWidth?: number | string;
|
||||
navbarMiniWidth?: number | string;
|
||||
navbarRailWidth?: number | string;
|
||||
asideWidth?: number | string;
|
||||
}
|
||||
|
||||
export interface CoreAppShellFeatures {
|
||||
desktopCollapseVariant?: DesktopCollapseVariant;
|
||||
withUtilityBar?: boolean;
|
||||
withAside?: boolean;
|
||||
withFooter?: boolean;
|
||||
withDoubleSidebar?: boolean;
|
||||
persistState?: boolean;
|
||||
zIndex?: number;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export interface CoreAppShellConfig {
|
||||
variant: LayoutVariant;
|
||||
dimensions?: CoreAppShellDimensions;
|
||||
features?: CoreAppShellFeatures;
|
||||
}
|
||||
|
||||
export interface CoreAppShellSlots {
|
||||
utilityBar?: ReactNode;
|
||||
header?: ReactNode;
|
||||
navbar?: ReactNode;
|
||||
navbarMobile?: ReactNode;
|
||||
navbarRail?: ReactNode;
|
||||
navbarPanel?: ReactNode;
|
||||
aside?: ReactNode;
|
||||
footer?: ReactNode;
|
||||
}
|
||||
@@ -9,3 +9,4 @@ export * from './system-pages/coming-soon';
|
||||
export * from './system-pages/forbidden';
|
||||
export * from './system-pages/maintenance';
|
||||
export * from './system-pages/not-found';
|
||||
export * from './core-app-shell';
|
||||
|
||||
Reference in New Issue
Block a user