import React, { useState } from 'react'; import { Breadcrumb, BreadcrumbItem, Nav, NavItem, NavList, Page, PageProps, PageSection, PageSidebar, PageSidebarBody, SkipToContent, Text, TextContent } from '../components'; import { DashboardHeader } from './DashboardHeader'; interface DashboardWrapperProps extends Omit { /** Programmatically manage if the sidebar nav is shown */ sidebarNavOpen?: boolean; /** Flag to render sample breadcrumb if custom breadcrumb not passed */ hasDefaultBreadcrumb?: boolean; /** Flag to render sample page title if custom title not passed */ hasPageTemplateTitle?: boolean; } export const DashboardBreadcrumb = ( Section home Section title Section title Section landing ); const PageTemplateTitle = ( Main title This is a full page demo. ); export const DashboardWrapper: React.FC = ({ children, mainContainerId, breadcrumb, header, sidebar, sidebarNavOpen, onPageResize, hasDefaultBreadcrumb, notificationDrawer, isNotificationDrawerExpanded, hasPageTemplateTitle, ...pageProps }: DashboardWrapperProps) => { const [activeItem, setActiveItem] = useState(1); const onNavSelect = (_event: React.FormEvent, result: any) => { setActiveItem(result.itemId); }; let renderedBreadcrumb; if (!hasDefaultBreadcrumb) { renderedBreadcrumb = breadcrumb ?? DashboardBreadcrumb; } const PageNav = (
); const _sidebar = ( {PageNav} ); const PageSkipToContent = ( Skip to content ); return ( } sidebar={sidebar ?? _sidebar} isManagedSidebar skipToContent={PageSkipToContent} breadcrumb={renderedBreadcrumb} mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'} notificationDrawer={notificationDrawer} isNotificationDrawerExpanded={isNotificationDrawerExpanded} {...(typeof onPageResize === 'function' && { onPageResize: (event: MouseEvent | TouchEvent | React.KeyboardEvent, resizeObject: any) => onPageResize(event, resizeObject) })} {...pageProps} > {hasPageTemplateTitle && PageTemplateTitle} {children} ); }; DashboardWrapper.displayName = 'DashboardWrapper';