import React from 'react'; import { Card, CardBody, Gallery, GalleryItem, Nav, NavItem, NavList, Page, PageSection, PageSectionTypes, PageSectionVariants, PageSidebar, PageSidebarBody, SkipToContent, TextContent, Text } from '@patternfly/react-core'; import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/DashboardWrapper'; import { DashboardHeader } from '@patternfly/react-core/src/demos/DashboardHeader'; export const NavWithSubnav: React.FunctionComponent = () => { const [activeItem, setActiveItem] = React.useState(0); const [activeSubNavItem, setActiveSubNavItem] = React.useState(7); const onNavSelect = ( _event: React.FormEvent, selectedItem: { groupId: number | string; itemId: number | string; to: string; } ) => setActiveItem(selectedItem.itemId); const onSubNavSelect = ( _event: React.FormEvent, selectedItem: { groupId: number | string; itemId: number | string; to: string; } ) => setActiveSubNavItem(selectedItem.itemId); const PageNav = (
); const Sidebar = ( {PageNav} ); const pageId = 'main-content-page-layout-default-nav'; const PageSkipToContent = Skip to content; const SubNav = (
); return ( } sidebar={Sidebar} isManagedSidebar skipToContent={PageSkipToContent} mainContainerId={pageId} > {SubNav} {DashboardBreadcrumb} Main title Body text should be Overpass Regular at 16px. It should have leading of 24px because
of it’s relative line height of 1.5. {Array.from({ length: 10 }).map((_value, index) => ( This is a card ))} ); };