text: import React from 'react';
  import {
    Avatar,
    Brand,
    Breadcrumb,
    BreadcrumbItem,
    Button,
    ButtonVariant,
    Card,
    CardBody,
    Dropdown,
    DropdownToggle,
    DropdownItem,
    DropdownSeparator,
    Gallery,
    GalleryItem,
    KebabToggle,
    Nav,
    NavItem,
    NavList,
    Page,
    PageHeader,
    PageSection,
    PageSectionVariants,
    PageSidebar,
    SkipToContent,
    TextContent,
    Text,
    Toolbar,
    ToolbarGroup,
    ToolbarItem
  } from '@patternfly/react-core';
  // make sure you've installed @patternfly/patternfly
  import accessibleStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
  import spacingStyles from '@patternfly/react-styles/css/utilities/Spacing/spacing';
  import { css } from '@patternfly/react-styles';
  import { BellIcon, CogIcon } from '@patternfly/react-icons';
  import imgBrand from './imgBrand.png';
  import imgAvatar from './imgAvatar.svg';
  
  class PageLayoutDefaultNav extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isDropdownOpen: false,
        isKebabDropdownOpen: false,
        activeItem: 0
      };
    }
  
    onDropdownToggle = isDropdownOpen => {
      this.setState({
        isDropdownOpen
      });
    }
  
    onDropdownSelect = event => {
      this.setState({
        isDropdownOpen: !this.state.isDropdownOpen
      });
    }
  
    onKebabDropdownToggle = isKebabDropdownOpen => {
      this.setState({
        isKebabDropdownOpen
      });
    }
  
    onKebabDropdownSelect = event => {
      this.setState({
        isKebabDropdownOpen: !this.state.isKebabDropdownOpen
      });
    }
  
    onNavSelect = result => {
      this.setState({
        activeItem: result.itemId
      });
    }
  
    render() {
      const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;
  
      const PageNav = (
        <Nav onSelect={this.onNavSelect} aria-label="Nav" theme="dark">
          <NavList>
            <NavItem itemId={0} isActive={activeItem === 0}>
              System Panel
            </NavItem>
            <NavItem itemId={1} isActive={activeItem === 1}>
              Policy
            </NavItem>
            <NavItem itemId={2} isActive={activeItem === 2}>
              Authentication
            </NavItem>
            <NavItem itemId={3} isActive={activeItem === 3}>
              Network Services
            </NavItem>
            <NavItem itemId={4} isActive={activeItem === 4}>
              Server
            </NavItem>
          </NavList>
        </Nav>
      );
      const kebabDropdownItems = [
        <DropdownItem>
          <BellIcon /> Notifications
        </DropdownItem>,
        <DropdownItem>
          <CogIcon /> Settings
        </DropdownItem>
      ];
      const userDropdownItems = [
        <DropdownItem>Link</DropdownItem>,
        <DropdownItem component="button">Action</DropdownItem>,
        <DropdownItem isDisabled>Disabled Link</DropdownItem>,
        <DropdownItem isDisabled component="button">
          Disabled Action
        </DropdownItem>,
        <DropdownSeparator />,
        <DropdownItem>Separated Link</DropdownItem>,
        <DropdownItem component="button">Separated Action</DropdownItem>
      ];
      const PageToolbar = (
        <Toolbar>
          <ToolbarGroup className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnLg)}>
            <ToolbarItem>
              <Button id="default-example-uid-01" aria-label="Notifications actions" variant={ButtonVariant.plain}>
                <BellIcon />
              </Button>
            </ToolbarItem>
            <ToolbarItem>
              <Button id="default-example-uid-02" aria-label="Settings actions" variant={ButtonVariant.plain}>
                <CogIcon />
              </Button>
            </ToolbarItem>
          </ToolbarGroup>
          <ToolbarGroup>
            <ToolbarItem className={css(accessibleStyles.hiddenOnLg, spacingStyles.mr_0)}>
              <Dropdown
                isPlain
                position="right"
                onSelect={this.onKebabDropdownSelect}
                toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
                isOpen={isKebabDropdownOpen}
                dropdownItems={kebabDropdownItems}
              />
            </ToolbarItem>
            <ToolbarItem className={css(accessibleStyles.screenReader, accessibleStyles.visibleOnMd)}>
              <Dropdown
                isPlain
                position="right"
                onSelect={this.onDropdownSelect}
                isOpen={isDropdownOpen}
                toggle={<DropdownToggle onToggle={this.onDropdownToggle}>Kyle Baker</DropdownToggle>}
                dropdownItems={userDropdownItems}
              />
            </ToolbarItem>
          </ToolbarGroup>
        </Toolbar>
      );
  
      const Header = (
        <PageHeader
          logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
          toolbar={PageToolbar}
          avatar={<Avatar src={imgAvatar} alt="Avatar image" />}
          showNavToggle
        />
      );
      const Sidebar = <PageSidebar nav={PageNav} theme="dark" />;
      const pageId = 'main-content-page-layout-default-nav';
      const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
  
      const PageBreadcrumb = (
        <Breadcrumb>
          <BreadcrumbItem>Section Home</BreadcrumbItem>
          <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
          <BreadcrumbItem to="#">Section Title</BreadcrumbItem>
          <BreadcrumbItem to="#" isActive>
            Section Landing
          </BreadcrumbItem>
        </Breadcrumb>
      );
  
      return (
        <React.Fragment>
          <Page
            header={Header}
            sidebar={Sidebar}
            isManagedSidebar
            skipToContent={PageSkipToContent}
            breadcrumb={PageBreadcrumb}
            mainContainerId={pageId}
          >
            <PageSection variant={PageSectionVariants.light}>
              <TextContent>
                <Text component="h1">Main Title</Text>
                <Text component="p">
                  Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
                  of it’s relative line height of 1.5.
                </Text>
              </TextContent>
            </PageSection>
            <PageSection>
              <Gallery gutter="md">
                {Array.apply(0, Array(10)).map((x, i) => (
                  <GalleryItem key={i}>
                    <Card>
                      <CardBody>This is a card</CardBody>
                    </Card>
                  </GalleryItem>
                ))}
              </Gallery>
            </PageSection>
          </Page>
        </React.Fragment>
      );
    }
  }
  
  export default PageLayoutDefaultNav;
  