From 1198fcc20e6498eead10751b0b8ddc30623c1f67 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Thu, 1 Jun 2023 18:03:38 -0400
Subject: [PATCH 1/5] chore(docs): Updated the Navigation demos to use the
 masthead instead of the page header

---
 .../src/components/Page/examples/Page.md      |   4 -
 packages/react-core/src/demos/Nav.md          | 611 +++++++++++-------
 2 files changed, 379 insertions(+), 236 deletions(-)

diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md
index 2cc85a40c00..531c61bebd3 100644
--- a/packages/react-core/src/components/Page/examples/Page.md
+++ b/packages/react-core/src/components/Page/examples/Page.md
@@ -16,10 +16,6 @@ propComponents:
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import {
-PageHeader,
-PageHeaderTools
-} from '@patternfly/react-core/deprecated';
 import './page.css';
 
 ## Examples
diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index 543b34edcb1..a15348357dc 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -3,20 +3,14 @@ id: Navigation
 section: components
 ---
 
-import {
-PageHeader,
-PageHeaderTools,
-PageHeaderToolsGroup,
-PageHeaderToolsItem
-} from '@patternfly/react-core/deprecated';
-
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 import imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 
@@ -387,6 +381,10 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
+  Masthead,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
   MenuToggle,
   Nav,
   NavItem,
@@ -396,21 +394,19 @@ import {
   PageSectionVariants,
   SkipToContent,
   TextContent,
-  Text
+  Text,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
 } from '@patternfly/react-core';
-
-import {
-  PageHeader,
-  PageHeaderTools,
-  PageHeaderToolsGroup,
-  PageHeaderToolsItem
-} from '@patternfly/react-core/deprecated';
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
 
 class PageLayoutHorizontalNav extends React.Component {
@@ -419,6 +415,7 @@ class PageLayoutHorizontalNav extends React.Component {
     this.state = {
       isDropdownOpen: false,
       isKebabDropdownOpen: false,
+      isFullKebabDropdownOpen: false,
       activeItem: 0
     };
 
@@ -446,6 +443,12 @@ class PageLayoutHorizontalNav extends React.Component {
       });
     };
 
+    this.onFullKebabToggle = () => {
+      this.setState((prevState) => ({
+        isFullKebabDropdownOpen: !prevState.isFullKebabDropdownOpen
+      }));
+    };
+
     this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
@@ -454,7 +457,7 @@ class PageLayoutHorizontalNav extends React.Component {
   }
 
   render() {
-    const { isDropdownOpen, isKebabDropdownOpen, activeItem } = this.state;
+    const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen, activeItem } = this.state;
 
     const PageNav = (
       <Nav onSelect={this.onNavSelect} aria-label="Nav" variant="horizontal">
@@ -494,54 +497,82 @@ class PageLayoutHorizontalNav extends React.Component {
         <DropdownItem key="group 2 logout">Logout</DropdownItem>
       </>
     );
-    const headerTools = (
-      <PageHeaderTools>
-        <PageHeaderToolsGroup
-          visibility={{
-            default: 'hidden',
-            lg: 'visible'
-          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
-        >
-          <PageHeaderToolsItem>
-            <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
-              <CogIcon />
-            </Button>
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem>
-            <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-              <QuestionCircleIcon />
-            </Button>
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-        <PageHeaderToolsGroup>
-          <PageHeaderToolsItem
-            visibility={{
-              lg: 'hidden'
-            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
-          >
-            <Dropdown
-              isOpen={isKebabDropdownOpen}
-              onSelect={this.onKebabDropdownSelect}
-              onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })}
-              popperProps={{ position: 'right' }}
-              toggle={(toggleRef) => (
-                <MenuToggle
-                  ref={toggleRef}
-                  isExpanded={isKebabDropdownOpen}
-                  onClick={this.onKebabDropdownToggle}
-                  variant="plain"
-                  aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
-              )}
-            >
-              <DropdownList>{kebabDropdownItems}</DropdownList>
-            </Dropdown>
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem
-            visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
+    
+    const headerToolbar = (
+      <Toolbar id="toolbar" isFullHeight isStatic>
+        <ToolbarContent>
+          <ToolbarItem>
+            {PageNav}
+          </ToolbarItem>
+          <ToolbarGroup
+            variant="icon-button-group"
+            align={{ default: 'alignRight' }}
+            spacer={{ default: 'spacerNone', md: 'spacerMd' }}
           >
+            <ToolbarItem>
+              <Button
+                aria-label="Notifications"
+                variant={ButtonVariant.plain}
+                icon={<BellIcon />}
+                onClick={() => {}}
+              />
+            </ToolbarItem>
+            <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+              <ToolbarItem>
+                <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+              </ToolbarItem>
+              <ToolbarItem>
+                <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+              </ToolbarItem>
+            </ToolbarGroup>
+            <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+              <Dropdown
+                isOpen={isKebabDropdownOpen}
+                onSelect={this.onKebabDropdownSelect}
+                onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isKebabDropdownOpen}
+                    onClick={this.onKebabDropdownToggle}
+                    variant="plain"
+                    aria-label="Settings and help"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>{kebabDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+            <ToolbarItem visibility={{ md: 'hidden' }}>
+              <Dropdown
+                isOpen={isFullKebabDropdownOpen}
+                onSelect={this.onFullKebabSelect}
+                onOpenChange={(isOpen) => this.setState({ isFullKebabDropdownOpen: isOpen })}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isFullKebabDropdownOpen}
+                    onClick={this.onFullKebabToggle}
+                    variant="plain"
+                    aria-label="Toolbar menu"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+              >
+                <DropdownGroup key="group 2" aria-label="User actions">
+                  <DropdownList>{userDropdownItems}</DropdownList>
+                </DropdownGroup>
+                <Divider />
+                <DropdownList>{kebabDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
             <Dropdown
               isOpen={isDropdownOpen}
               onSelect={this.onDropdownSelect}
@@ -555,19 +586,32 @@ class PageLayoutHorizontalNav extends React.Component {
                   icon={<Avatar src={imgAvatar} alt="" />}
                   isFullHeight
                 >
-                  John Smith
+                  Ned Username
                 </MenuToggle>
               )}
             >
               <DropdownList>{userDropdownItems}</DropdownList>
             </Dropdown>
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-      </PageHeaderTools>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
     );
-
     const Header = (
-      <PageHeader logo={<Brand src={imgBrand} alt="Patternfly Logo" />} headerTools={headerTools} topNav={PageNav} />
+      <Masthead>
+        <MastheadMain>
+          <MastheadBrand>
+            <Brand
+              widths={{ default: '180px', md: '180px', '2xl': '220px' }}
+              src={imgColorBrand}
+              alt="Fallback patternFly default logo"
+            >
+              <source media="(min-width: 768px)" srcSet={imgColorBrand} />
+              <source srcSet={imgColorBrand} />
+            </Brand>
+          </MastheadBrand>
+        </MastheadMain>
+        <MastheadContent>{headerToolbar}</MastheadContent>
+      </Masthead>
     );
 
     const pageId = 'main-content-page-layout-horizontal-nav';
@@ -773,6 +817,10 @@ import {
   Gallery,
   GalleryItem,
   MenuToggle,
+  Masthead,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
   Nav,
   NavItem,
   NavList,
@@ -782,18 +830,18 @@ import {
   PageSectionTypes,
   SkipToContent,
   TextContent,
-  Text
-} from '@patternfly/react-core';
-import {
-  PageHeader,
-  PageHeaderTools,
-  PageHeaderToolsItem,
-  PageHeaderToolsGroup
-} from '@patternfly/react-core/deprecated';
+  Text,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
+  } from '@patternfly/react-core';
 import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
@@ -804,6 +852,7 @@ class HorizontalNavWithSubnav extends React.Component {
     this.state = {
       isDropdownOpen: false,
       isKebabDropdownOpen: false,
+      isFullKebabDropdownOpen: false,
       activeItem: 0,
       activeSubNavItem: 7
     };
@@ -832,6 +881,12 @@ class HorizontalNavWithSubnav extends React.Component {
       });
     };
 
+    this.onFullKebabToggle = () => {
+      this.setState((prevState) => ({
+        isFullKebabDropdownOpen: !prevState.isFullKebabDropdownOpen
+      }));
+    };
+
     this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
@@ -846,7 +901,7 @@ class HorizontalNavWithSubnav extends React.Component {
   }
 
   render() {
-    const { isDropdownOpen, isKebabDropdownOpen, activeItem, activeSubNavItem } = this.state;
+    const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen, activeItem, activeSubNavItem } = this.state;
 
     const PageNav = (
       <Nav onSelect={this.onNavSelect} aria-label="Nav" variant="horizontal">
@@ -892,90 +947,8 @@ class HorizontalNavWithSubnav extends React.Component {
         <DropdownItem key="group 2 logout">Logout</DropdownItem>
       </>
     );
-    const headerTools = (
-      <PageHeaderTools>
-        <PageHeaderToolsGroup
-          visibility={{
-            default: 'hidden',
-            lg: 'visible'
-          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
-        >
-          <PageHeaderToolsItem>
-            <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
-              <CogIcon />
-            </Button>
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem>
-            <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-              <QuestionCircleIcon />
-            </Button>
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-        <PageHeaderToolsGroup>
-          <PageHeaderToolsItem
-            visibility={{
-              lg: 'hidden'
-            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
-          >
-            <Dropdown
-              isOpen={isKebabDropdownOpen}
-              onSelect={this.onKebabDropdownSelect}
-              onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })}
-              popperProps={{ position: 'right' }}
-              toggle={(toggleRef) => (
-                <MenuToggle
-                  ref={toggleRef}
-                  isExpanded={isKebabDropdownOpen}
-                  onClick={this.onKebabDropdownToggle}
-                  variant="plain"
-                  aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
-              )}
-            >
-              <DropdownList>{kebabDropdownItems}</DropdownList>
-            </Dropdown>
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem
-            visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
-          >
-            <Dropdown
-              isOpen={isDropdownOpen}
-              onSelect={this.onDropdownSelect}
-              onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })}
-              popperProps={{ position: 'right' }}
-              toggle={(toggleRef) => (
-                <MenuToggle
-                  ref={toggleRef}
-                  isExpanded={isDropdownOpen}
-                  onClick={this.onDropdownToggle}
-                  icon={<Avatar src={imgAvatar} alt="" />}
-                  isFullHeight
-                >
-                  John Smith
-                </MenuToggle>
-              )}
-            >
-              <DropdownList>{userDropdownItems}</DropdownList>
-            </Dropdown>
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-      </PageHeaderTools>
-    );
-
-    const Header = (
-      <PageHeader
-        logo={<Brand src={imgColorBrand} alt="Patternfly Logo" />}
-        headerTools={headerTools}
-        topNav={PageNav}
-      />
-    );
-
-    const pageId = 'main-content-page-layout-horizontal-nav';
-    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
 
-    const SubNav = (
+     const SubNav = (
       <Nav onSelect={this.onSubNavSelect} aria-label="Nav" variant="horizontal-subnav">
         <NavList>
           <NavItem itemId={7} isActive={activeSubNavItem === 7} to="#">
@@ -1003,6 +976,131 @@ class HorizontalNavWithSubnav extends React.Component {
       </Nav>
     );
 
+    const headerToolbar = (
+      <Toolbar id="toolbar" isFullHeight isStatic>
+        <ToolbarContent>
+          <ToolbarItem>
+            {PageNav}
+          </ToolbarItem>
+          <ToolbarGroup
+            variant="icon-button-group"
+            align={{ default: 'alignRight' }}
+            spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          >
+            <ToolbarItem>
+              <Button
+                aria-label="Notifications"
+                variant={ButtonVariant.plain}
+                icon={<BellIcon />}
+                onClick={() => {}}
+              />
+            </ToolbarItem>
+            <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+              <ToolbarItem>
+                <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+              </ToolbarItem>
+              <ToolbarItem>
+                <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+              </ToolbarItem>
+            </ToolbarGroup>
+            <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+              <Dropdown
+                isOpen={isKebabDropdownOpen}
+                onSelect={this.onKebabDropdownSelect}
+                onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isKebabDropdownOpen}
+                    onClick={this.onKebabDropdownToggle}
+                    variant="plain"
+                    aria-label="Settings and help"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>{kebabDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+            <ToolbarItem visibility={{ md: 'hidden' }}>
+              <Dropdown
+                isOpen={isFullKebabDropdownOpen}
+                onSelect={this.onFullKebabSelect}
+                onOpenChange={(isOpen) => this.setState({ isFullKebabDropdownOpen: isOpen })}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isFullKebabDropdownOpen}
+                    onClick={this.onFullKebabToggle}
+                    variant="plain"
+                    aria-label="Toolbar menu"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+              >
+                <DropdownGroup key="group 2" aria-label="User actions">
+                  <DropdownList>{userDropdownItems}</DropdownList>
+                </DropdownGroup>
+                <Divider />
+                <DropdownList>{kebabDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+            <Dropdown
+              isOpen={isDropdownOpen}
+              onSelect={this.onDropdownSelect}
+              onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={isDropdownOpen}
+                  onClick={this.onDropdownToggle}
+                  icon={<Avatar src={imgAvatar} alt="" />}
+                  isFullHeight
+                >
+                  Ned Username
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>{userDropdownItems}</DropdownList>
+            </Dropdown>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    const Header = (
+      <Masthead>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadMain>
+          <MastheadBrand>
+            <Brand
+              widths={{ default: '180px', md: '180px', '2xl': '220px' }}
+              src={imgColorBrand}
+              alt="Fallback patternFly default logo"
+            >
+              <source media="(min-width: 768px)" srcSet={imgColorBrand} />
+              <source srcSet={imgColorBrand} />
+            </Brand>
+          </MastheadBrand>
+        </MastheadMain>
+        <MastheadContent>{headerToolbar}</MastheadContent>
+      </Masthead>
+    );
+
+
+    const pageId = 'main-content-page-layout-horizontal-nav';
+    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
     return (
       <React.Fragment>
         <Page header={Header} skipToContent={PageSkipToContent} mainContainerId={pageId}>
@@ -1263,6 +1361,10 @@ import {
   DropdownList,
   Gallery,
   GalleryItem,
+  Masthead,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
   MenuToggle,
   Nav,
   NavItem,
@@ -1274,20 +1376,21 @@ import {
   PageSidebarBody,
   SkipToContent,
   TextContent,
-  Text
+  Text,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
 } from '@patternfly/react-core';
-import {
-  PageHeader,
-  PageHeaderTools,
-  PageHeaderToolsItem,
-  PageHeaderToolsGroup
-} from '@patternfly/react-core/deprecated';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgBrand from '@patternfly/react-core/src/components/Brand/examples/pfLogo.svg';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
+
 
 class PageLayoutManualNav extends React.Component {
   constructor(props) {
@@ -1295,6 +1398,7 @@ class PageLayoutManualNav extends React.Component {
     this.state = {
       isDropdownOpen: false,
       isKebabDropdownOpen: false,
+      isFullKebabDropdownOpen: false,
       activeItem: 0,
       isMobileView: false,
       isNavOpenDesktop: true,
@@ -1325,6 +1429,12 @@ class PageLayoutManualNav extends React.Component {
       });
     };
 
+    this.onFullKebabToggle = () => {
+      this.setState((prevState) => ({
+        isFullKebabDropdownOpen: !prevState.isFullKebabDropdownOpen
+      }));
+    };
+
     this.onNavSelect = (_event, result) => {
       this.setState({
         activeItem: result.itemId
@@ -1351,7 +1461,7 @@ class PageLayoutManualNav extends React.Component {
   }
 
   render() {
-    const { isDropdownOpen, isKebabDropdownOpen, activeItem, isNavOpenDesktop, isNavOpenMobile, isMobileView } =
+    const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen, activeItem, isNavOpenDesktop, isNavOpenMobile, isMobileView } =
       this.state;
 
     const PageNav = (
@@ -1392,54 +1502,79 @@ class PageLayoutManualNav extends React.Component {
         <DropdownItem key="group 2 logout">Logout</DropdownItem>
       </>
     );
-    const headerTools = (
-      <PageHeaderTools>
-        <PageHeaderToolsGroup
-          visibility={{
-            default: 'hidden',
-            lg: 'visible'
-          }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
-        >
-          <PageHeaderToolsItem>
-            <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
-              <CogIcon />
-            </Button>
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem>
-            <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-              <QuestionCircleIcon />
-            </Button>
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-        <PageHeaderToolsGroup>
-          <PageHeaderToolsItem
-            visibility={{
-              lg: 'hidden'
-            }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
-          >
-            <Dropdown
-              isOpen={isKebabDropdownOpen}
-              onSelect={this.onKebabDropdownSelect}
-              onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })}
-              popperProps={{ position: 'right' }}
-              toggle={(toggleRef) => (
-                <MenuToggle
-                  ref={toggleRef}
-                  isExpanded={isKebabDropdownOpen}
-                  onClick={this.onKebabDropdownToggle}
-                  variant="plain"
-                  aria-label="Settings and help"
-                >
-                  <EllipsisVIcon aria-hidden="true" />
-                </MenuToggle>
-              )}
-            >
-              <DropdownList>{kebabDropdownItems}</DropdownList>
-            </Dropdown>
-          </PageHeaderToolsItem>
-          <PageHeaderToolsItem
-            visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
+    
+     const headerToolbar = (
+      <Toolbar id="toolbar" isFullHeight isStatic>
+        <ToolbarContent>
+          <ToolbarGroup
+            variant="icon-button-group"
+            align={{ default: 'alignRight' }}
+            spacer={{ default: 'spacerNone', md: 'spacerMd' }}
           >
+            <ToolbarItem>
+              <Button
+                aria-label="Notifications"
+                variant={ButtonVariant.plain}
+                icon={<BellIcon />}
+                onClick={() => {}}
+              />
+            </ToolbarItem>
+            <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+              <ToolbarItem>
+                <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+              </ToolbarItem>
+              <ToolbarItem>
+                <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+              </ToolbarItem>
+            </ToolbarGroup>
+            <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+              <Dropdown
+                isOpen={isKebabDropdownOpen}
+                onSelect={this.onKebabDropdownSelect}
+                onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isKebabDropdownOpen}
+                    onClick={this.onKebabDropdownToggle}
+                    variant="plain"
+                    aria-label="Settings and help"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+              >
+                <DropdownList>{kebabDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+            <ToolbarItem visibility={{ md: 'hidden' }}>
+              <Dropdown
+                isOpen={isFullKebabDropdownOpen}
+                onSelect={this.onFullKebabSelect}
+                onOpenChange={(isOpen) => this.setState({ isFullKebabDropdownOpen: isOpen })}
+                popperProps={{ position: 'right' }}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    isExpanded={isFullKebabDropdownOpen}
+                    onClick={this.onFullKebabToggle}
+                    variant="plain"
+                    aria-label="Toolbar menu"
+                  >
+                    <EllipsisVIcon aria-hidden="true" />
+                  </MenuToggle>
+                )}
+              >
+                <DropdownGroup key="group 2" aria-label="User actions">
+                  <DropdownList>{userDropdownItems}</DropdownList>
+                </DropdownGroup>
+                <Divider />
+                <DropdownList>{kebabDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
             <Dropdown
               isOpen={isDropdownOpen}
               onSelect={this.onDropdownSelect}
@@ -1453,26 +1588,39 @@ class PageLayoutManualNav extends React.Component {
                   icon={<Avatar src={imgAvatar} alt="" />}
                   isFullHeight
                 >
-                  John Smith
+                  Ned Username
                 </MenuToggle>
               )}
             >
               <DropdownList>{userDropdownItems}</DropdownList>
             </Dropdown>
-          </PageHeaderToolsItem>
-        </PageHeaderToolsGroup>
-      </PageHeaderTools>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
     );
-
     const Header = (
-      <PageHeader
-        logo={<Brand src={imgBrand} alt="Patternfly Logo" />}
-        headerTools={headerTools}
-        showNavToggle
-        onNavToggle={isMobileView ? this.onNavToggleMobile : this.onNavToggleDesktop}
-        isNavOpen={isMobileView ? isNavOpenMobile : isNavOpenDesktop}
-      />
+      <Masthead>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadMain>
+          <MastheadBrand>
+            <Brand
+              widths={{ default: '180px', md: '180px', '2xl': '220px' }}
+              src={imgColorBrand}
+              alt="Fallback patternFly default logo"
+            >
+              <source media="(min-width: 768px)" srcSet={imgColorBrand} />
+              <source srcSet={imgColorBrand} />
+            </Brand>
+          </MastheadBrand>
+        </MastheadMain>
+        <MastheadContent>{headerToolbar}</MastheadContent>
+      </Masthead>
     );
+
     const Sidebar = (
       <PageSidebar isSidebarOpen={isMobileView ? isNavOpenMobile : isNavOpenDesktop}>
         <PageSidebarBody>{PageNav}</PageSidebarBody>
@@ -1535,7 +1683,6 @@ import {
   MenuList,
   MenuItem
 } from '@patternfly/react-core';
-import { PageHeader, PageHeaderTools } from '@patternfly/react-core';
 import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
 
 class VerticalPage extends React.Component {

From f265e282d9246d4ab0e0a8215444d16e2a5d9d3f Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Tue, 6 Jun 2023 10:46:08 -0400
Subject: [PATCH 2/5] Updates from comments and added suport for toolbar
 item/group overflow container

---
 .../react-core/src/components/Toolbar/ToolbarGroup.tsx |  4 ++++
 .../react-core/src/components/Toolbar/ToolbarItem.tsx  |  4 ++++
 .../components/Toolbar/__tests__/ToolbarGroup.test.tsx | 10 ++++++++++
 .../components/Toolbar/__tests__/ToolbarItem.test.tsx  |  7 ++++++-
 packages/react-core/src/demos/Nav.md                   |  4 ++--
 5 files changed, 26 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx

diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
index 1c5bbcce61d..36bf5a0cccb 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
@@ -53,6 +53,8 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   };
   /** Content to be rendered inside the data toolbar group */
   children?: React.ReactNode;
+  /** Flag that modifies the toolbar item to hide overflow and respond to available space. Used for horizontal navigation. */
+  isOverflowContainer?: boolean;
   /** @hide Reference to pass to this group if it has .pf-m-chip-container modifier */
   innerRef?: React.RefObject<any>;
 }
@@ -69,6 +71,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
       className,
       variant,
       children,
+      isOverflowContainer,
       innerRef,
       ...props
     } = this.props;
@@ -88,6 +91,7 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
               alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
               alignSelf === 'center' && styles.modifiers.alignSelfCenter,
               alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline,
+              isOverflowContainer && styles.modifiers.overflowContainer,
               className
             )}
             {...props}
diff --git a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
index bf46dc7ca1e..5f7c91d7240 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
@@ -70,6 +70,8 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   id?: string;
   /** Flag indicating if the expand-all variant is expanded or not */
   isAllExpanded?: boolean;
+  /** Flag that modifies the toolbar item to hide overflow and respond to available space. Used for horizontal navigation. */
+  isOverflowContainer?: boolean;
   /** Content to be rendered inside the data toolbar item */
   children?: React.ReactNode;
 }
@@ -85,6 +87,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   id,
   children,
   isAllExpanded,
+  isOverflowContainer,
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
@@ -116,6 +119,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
                   | 'chipGroup'
               ],
             isAllExpanded && styles.modifiers.expanded,
+            isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
             formatBreakpointMods(align, styles, '', getBreakpoint(width)),
             formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
diff --git a/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx
new file mode 100644
index 00000000000..9c34c0a99b2
--- /dev/null
+++ b/packages/react-core/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ToolbarGroup } from '../ToolbarGroup';
+
+describe('ToolbarItem', () => {
+  it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
+    render(<ToolbarGroup data-testid="toolbargroup" isOverflowContainer>Test</ToolbarGroup>);
+    expect(screen.getByTestId('toolbargroup')).toHaveClass('pf-m-overflow-container');
+  });
+});
diff --git a/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx b/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx
index 4d958bb81b6..af810124f1d 100644
--- a/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx
+++ b/packages/react-core/src/components/Toolbar/__tests__/ToolbarItem.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { ToolbarItem } from '../ToolbarItem';
 
 describe('ToolbarItem', () => {
@@ -16,4 +16,9 @@ describe('ToolbarItem', () => {
     const { asFragment } = render(<ToolbarItem widths={widths}>Test</ToolbarItem>);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render with pf-m-overflow-container when isOverflowContainer is set', () => {
+    render(<ToolbarItem data-testid="toolbaritem" isOverflowContainer>Test</ToolbarItem>);
+    expect(screen.getByTestId('toolbaritem')).toHaveClass('pf-m-overflow-container');
+  });
 });
diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index a15348357dc..a8597c910e3 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -501,7 +501,7 @@ class PageLayoutHorizontalNav extends React.Component {
     const headerToolbar = (
       <Toolbar id="toolbar" isFullHeight isStatic>
         <ToolbarContent>
-          <ToolbarItem>
+          <ToolbarItem isOverflowContainer>
             {PageNav}
           </ToolbarItem>
           <ToolbarGroup
@@ -979,7 +979,7 @@ class HorizontalNavWithSubnav extends React.Component {
     const headerToolbar = (
       <Toolbar id="toolbar" isFullHeight isStatic>
         <ToolbarContent>
-          <ToolbarItem>
+          <ToolbarItem isOverflowContainer>
             {PageNav}
           </ToolbarItem>
           <ToolbarGroup

From 6136e4d9eb8c1c91e0cd66b445ca7304533c9f97 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Tue, 6 Jun 2023 14:16:38 -0400
Subject: [PATCH 3/5] update comments from review

---
 packages/react-core/src/components/Toolbar/ToolbarGroup.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
index 36bf5a0cccb..f2257a3b63f 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
@@ -53,7 +53,7 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   };
   /** Content to be rendered inside the data toolbar group */
   children?: React.ReactNode;
-  /** Flag that modifies the toolbar item to hide overflow and respond to available space. Used for horizontal navigation. */
+  /** Flag that modifies the toolbar group to hide overflow and respond to available space. Used for horizontal navigation. */
   isOverflowContainer?: boolean;
   /** @hide Reference to pass to this group if it has .pf-m-chip-container modifier */
   innerRef?: React.RefObject<any>;

From 431066bff15ada8a27ab607425d80776c2a75cab Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Tue, 6 Jun 2023 17:07:47 -0400
Subject: [PATCH 4/5] remove legacy refs

---
 packages/react-core/src/demos/Nav.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index a8597c910e3..cb369f14153 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -1137,7 +1137,7 @@ class HorizontalNavWithSubnav extends React.Component {
 }
 ```
 
-### Legacy tertiary nav
+### Tertiary nav (deprecated)
 
 ```js isFullscreen
 import React from 'react';
@@ -1239,7 +1239,7 @@ class PageLayoutTertiaryNav extends React.Component {
 }
 ```
 
-### Legacy/Light Nav
+### Light Nav (deprecated)
 
 ```js isFullscreen
 import React from 'react';

From 56d740ee84984e23c97b81201c6c623db9e27fa4 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Tue, 6 Jun 2023 17:24:23 -0400
Subject: [PATCH 5/5] fix sentence case

---
 packages/react-core/src/demos/Nav.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index cb369f14153..6480dc67c23 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -1239,7 +1239,7 @@ class PageLayoutTertiaryNav extends React.Component {
 }
 ```
 
-### Light Nav (deprecated)
+### Light nav (deprecated)
 
 ```js isFullscreen
 import React from 'react';