import React from 'react'; import { Card, CardBody, Content, Gallery, GalleryItem, Nav, NavExpandable, NavItem, NavList, Page, PageSection, PageSidebar, PageSidebarBody, SkipToContent } from '@patternfly/react-core'; import { DashboardBreadcrumb } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader'; export const NavExpandableDemo: React.FunctionComponent = () => { const [activeGroup, setActiveGroup] = React.useState('grp-1'); const [activeItem, setActiveItem] = React.useState('grp-1_itm-1'); const onNavSelect = ( _event: React.FormEvent, selectedItem: { groupId: number | string; itemId: number | string; to: string; } ) => { setActiveItem(selectedItem.itemId); setActiveGroup(selectedItem.groupId); }; const PageNav = (
); const Sidebar = ( {PageNav} ); const pageId = 'main-content-page-layout-expandable-nav'; const handleClick = (event) => { event.preventDefault(); const mainContentElement = document.getElementById(pageId); if (mainContentElement) { mainContentElement.focus(); } }; const PageSkipToContent = ( Skip to content ); return ( } sidebar={Sidebar} isManagedSidebar skipToContent={PageSkipToContent} breadcrumb={DashboardBreadcrumb} mainContainerId={pageId} >

# Main title

Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because
of its relative line height of 1.5.

{Array.from({ length: 10 }).map((_value, index) => ( This is a card ))} ); };