import React, { useState } from 'react'; import { Breadcrumb, BreadcrumbItem, Content, Nav, NavItem, NavList, Page, PageProps, PageSection, PageSidebar, PageSidebarBody, SkipToContent } 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, banner, breadcrumb, masthead, 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 defaultContainerId = 'main-content-page-layout-default-nav'; const handleClick = (event: React.MouseEvent) => { event.preventDefault(); const mainContentElement = document.getElementById(mainContainerId ?? defaultContainerId); if (mainContentElement) { mainContentElement.focus(); } }; const PageSkipToContent = ( Skip to content ); return ( } sidebar={sidebar ?? _sidebar} isManagedSidebar skipToContent={PageSkipToContent} banner={banner} breadcrumb={renderedBreadcrumb} mainContainerId={mainContainerId ?? defaultContainerId} 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';