@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/page/react-demos.js

@@ -0,0 +1,149 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { useState, useRef, useEffect } from 'react';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon';
+import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
+import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
+import srcImportcontextselectorperspectiveswitcherinsidebar from './react-demos/context-selectorperspective-switcher-in-sidebar.png';
+import srcImportdefaultnav from './react-demos/default-nav.png';
+import srcImportexpandablenav from './react-demos/expandable-nav.png';
+import srcImportgroupednav from './react-demos/grouped-nav.png';
+import srcImporthorizontalnav from './react-demos/horizontal-nav.png';
+import srcImportlegacylightnav from './react-demos/legacylight-nav.png';
+import srcImportmanualnav from './react-demos/manual-nav.png';
+import srcImportstickysectionbreadcrumbwithbreakpoints from './react-demos/sticky-section-breadcrumb-with-breakpoints.png';
+import srcImportstickysectiongroupalternatesyntaxandusingpageheader from './react-demos/sticky-section-group-alternate-syntax-and-using-pageheader.png';
+import srcImportstickysectiongroupalternatesyntax from './react-demos/sticky-section-group-alternate-syntax.png';
+import srcImportstickysectiongroupusingpageheader from './react-demos/sticky-section-group-using-pageheader.png';
+import srcImportstickysectiongroup from './react-demos/sticky-section-group.png';
+import srcImporttertiarynav from './react-demos/tertiary-nav.png';
+const pageData = {
+  "id": "Page",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-demos",
+  "tabName": null,
+  "slug": "/components/page/react-demos",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/demos/Page.md",
+  "relPath": "packages/react-core/src/demos/Page.md",
+  "fullscreenExamples": [
+    "Sticky section group",
+    "Sticky section group (alternate syntax)",
+    "Sticky section breadcrumb (with breakpoints)",
+    "Context selector/perspective switcher in sidebar"
+  ]
+};
+pageData.liveContext = {
+  useState,
+  useRef,
+  useEffect,
+  RhUiNotificationFillIcon,
+  RhUiSettingsFillIcon,
+  HelpIcon,
+  RhUiQuestionMarkCircleFillIcon,
+  imgAvatar,
+  RhUiMenuBarsIcon,
+  LightbulbIcon,
+  RhUiEllipsisVerticalFillIcon,
+  CubeIcon,
+  FolderIcon,
+  CloudIcon,
+  pfLogo,
+  pfIconLogo
+};
+pageData.examples = {
+  'Sticky section group': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportstickysectiongroup} {...{"code":"import { useState } from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Content,\n  Divider,\n  Dropdown,\n  DropdownGroup,\n  DropdownItem,\n  DropdownList,\n  Gallery,\n  GalleryItem,\n  Masthead,\n  MastheadMain,\n  MastheadLogo,\n  MastheadContent,\n  MastheadBrand,\n  MastheadToggle,\n  MenuToggle,\n  MenuToggleElement,\n  Nav,\n  NavItem,\n  NavList,\n  NotificationBadge,\n  NotificationBadgeVariant,\n  Page,\n  PageSection,\n  PageSidebar,\n  PageSidebarBody,\n  PageToggleButton,\n  SkipToContent,\n  Toolbar,\n  ToolbarContent,\n  ToolbarGroup,\n  ToolbarItem\n} from '@patternfly/react-core';\nimport RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';\nimport pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';\ninterface NavOnSelectProps {\n  groupId: number | string;\n  itemId: number | string;\n  to: string;\n}\n\nexport const PageStickySectionGroup: React.FunctionComponent = () => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);\n  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);\n  const [activeItem, setActiveItem] = useState(1);\n\n  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {\n    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);\n  };\n\n  const onDropdownToggle = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onDropdownSelect = () => {\n    setIsDropdownOpen(false);\n  };\n\n  const onKebabDropdownToggle = () => {\n    setIsKebabDropdownOpen(!isKebabDropdownOpen);\n  };\n\n  const onKebabDropdownSelect = () => {\n    setIsKebabDropdownOpen(false);\n  };\n\n  const onFullKebabDropdownToggle = () => {\n    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);\n  };\n\n  const onFullKebabDropdownSelect = () => {\n    setIsFullKebabDropdownOpen(false);\n  };\n\n  const dashboardBreadcrumb = (\n    <Breadcrumb>\n      <BreadcrumbItem>Section home</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\" isActive>\n        Section landing\n      </BreadcrumbItem>\n    </Breadcrumb>\n  );\n\n  const kebabDropdownItems = (\n    <>\n      <DropdownItem>\n        <RhUiSettingsFillIcon /> Settings\n      </DropdownItem>\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    </>\n  );\n  const userDropdownItems = (\n    <>\n      <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n      <DropdownItem key=\"group 2 user\">User management</DropdownItem>\n      <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n    </>\n  );\n\n  const headerToolbar = (\n    <Toolbar id=\"toolbar\" isStatic>\n      <ToolbarContent>\n        <ToolbarGroup\n          variant=\"action-group-plain\"\n          align={{ default: 'alignEnd' }}\n          gap={{ default: 'gapNone', md: 'gapMd' }}\n        >\n          <ToolbarItem>\n            <NotificationBadge aria-label=\"Notifications\" variant={NotificationBadgeVariant.read} onClick={() => {}} />\n          </ToolbarItem>\n          <ToolbarGroup variant=\"action-group-plain\" visibility={{ default: 'hidden', lg: 'visible' }}>\n            <ToolbarItem>\n              <Button aria-label=\"Settings\" isSettings variant=\"plain\" />\n            </ToolbarItem>\n            <ToolbarItem>\n              <Button aria-label=\"Help\" variant={ButtonVariant.plain} icon={<RhUiQuestionMarkCircleFillIcon />} />\n            </ToolbarItem>\n          </ToolbarGroup>\n          <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>\n            <Dropdown\n              isOpen={isKebabDropdownOpen}\n              onSelect={onKebabDropdownSelect}\n              onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}\n              popperProps={{ position: 'right' }}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={onKebabDropdownToggle}\n                  isExpanded={isKebabDropdownOpen}\n                  variant=\"plain\"\n                  aria-label=\"Settings and help\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n            >\n              <DropdownList>{kebabDropdownItems}</DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n          <ToolbarItem visibility={{ md: 'hidden' }}>\n            <Dropdown\n              isOpen={isFullKebabDropdownOpen}\n              onSelect={onFullKebabDropdownSelect}\n              onOpenChange={(isOpen: boolean) => setIsFullKebabDropdownOpen(isOpen)}\n              popperProps={{ position: 'right' }}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={onFullKebabDropdownToggle}\n                  isExpanded={isFullKebabDropdownOpen}\n                  variant=\"plain\"\n                  aria-label=\"Toolbar menu\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n            >\n              <DropdownGroup key=\"group 2\" aria-label=\"User actions\">\n                <DropdownList>{userDropdownItems}</DropdownList>\n              </DropdownGroup>\n              <Divider />\n              <DropdownList>{kebabDropdownItems}</DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n        </ToolbarGroup>\n        <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>\n          <Dropdown\n            isOpen={isDropdownOpen}\n            onSelect={onDropdownSelect}\n            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}\n            popperProps={{ position: 'right' }}\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={onDropdownToggle}\n                isExpanded={isDropdownOpen}\n                icon={<Avatar src={imgAvatar} alt=\"\" size=\"sm\" />}\n              >\n                Ned Username\n              </MenuToggle>\n            )}\n          >\n            <DropdownList>{userDropdownItems}</DropdownList>\n          </Dropdown>\n        </ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton isHamburgerButton aria-label=\"Global navigation\" />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo>\n            <Brand src={pfLogo} alt=\"PatternFly\" heights={{ default: '36px' }} />\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const pageNav = (\n    <Nav onSelect={onNavSelect}>\n      <NavList>\n        <NavItem itemId={0} isActive={activeItem === 0} to=\"#system-panel\">\n          System panel\n        </NavItem>\n        <NavItem itemId={1} isActive={activeItem === 1} to=\"#policy\">\n          Policy\n        </NavItem>\n        <NavItem itemId={2} isActive={activeItem === 2} to=\"#auth\">\n          Authentication\n        </NavItem>\n        <NavItem itemId={3} isActive={activeItem === 3} to=\"#network\">\n          Network services\n        </NavItem>\n        <NavItem itemId={4} isActive={activeItem === 4} to=\"#server\">\n          Server\n        </NavItem>\n      </NavList>\n    </Nav>\n  );\n\n  const sidebar = (\n    <PageSidebar>\n      <PageSidebarBody>{pageNav}</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  const mainContainerId = 'main-content';\n\n  const handleClick = (event) => {\n    event.preventDefault();\n\n    const mainContentElement = document.getElementById(mainContainerId);\n    if (mainContentElement) {\n      mainContentElement.focus();\n    }\n  };\n\n  const pageSkipToContent = (\n    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>\n      Skip to content\n    </SkipToContent>\n  );\n\n  return (\n    <Page\n      masthead={masthead}\n      sidebar={sidebar}\n      isManagedSidebar\n      skipToContent={pageSkipToContent}\n      breadcrumb={dashboardBreadcrumb}\n      mainContainerId={mainContainerId}\n      isBreadcrumbWidthLimited\n      isBreadcrumbGrouped\n      additionalGroupedContent={\n        <PageSection isWidthLimited aria-labelledby=\"main-title\">\n          <Content>\n            <h1 id=\"main-title\">Main title</h1>\n            <p>This is a full page demo.</p>\n          </Content>\n        </PageSection>\n      }\n      groupProps={{\n        stickyOnBreakpoint: { default: 'top' }\n      }}\n    >\n      <PageSection aria-label=\"Card gallery\">\n        <Gallery hasGutter>\n          {Array.from({ length: 50 }).map((_value, index) => (\n            <GalleryItem key={index}>\n              <Card>\n                <CardBody>This is a card</CardBody>\n              </Card>\n            </GalleryItem>\n          ))}\n        </Gallery>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Sticky section group","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Sticky section group (alternate syntax)': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportstickysectiongroupalternatesyntax} {...{"code":"import { useState } from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Content,\n  Divider,\n  Dropdown,\n  DropdownGroup,\n  DropdownItem,\n  DropdownList,\n  Gallery,\n  GalleryItem,\n  Masthead,\n  MastheadMain,\n  MastheadLogo,\n  MastheadContent,\n  MastheadBrand,\n  MastheadToggle,\n  MenuToggle,\n  MenuToggleElement,\n  Nav,\n  NavItem,\n  NavList,\n  NotificationBadge,\n  NotificationBadgeVariant,\n  Page,\n  PageBreadcrumb,\n  PageGroup,\n  PageSection,\n  PageSidebar,\n  PageSidebarBody,\n  PageToggleButton,\n  SkipToContent,\n  Toolbar,\n  ToolbarContent,\n  ToolbarGroup,\n  ToolbarItem\n} from '@patternfly/react-core';\nimport RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';\nimport pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';\n\ninterface NavOnSelectProps {\n  groupId: number | string;\n  itemId: number | string;\n  to: string;\n}\n\nexport const PageStickySectionGroupAlternate: React.FunctionComponent = () => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);\n  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);\n  const [activeItem, setActiveItem] = useState(1);\n\n  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {\n    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);\n  };\n\n  const onDropdownToggle = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onDropdownSelect = () => {\n    setIsDropdownOpen(false);\n  };\n\n  const onKebabDropdownToggle = () => {\n    setIsKebabDropdownOpen(!isKebabDropdownOpen);\n  };\n\n  const onKebabDropdownSelect = () => {\n    setIsKebabDropdownOpen(false);\n  };\n\n  const onFullKebabDropdownToggle = () => {\n    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);\n  };\n\n  const onFullKebabDropdownSelect = () => {\n    setIsFullKebabDropdownOpen(false);\n  };\n\n  const kebabDropdownItems = (\n    <>\n      <DropdownItem>\n        <RhUiSettingsFillIcon /> Settings\n      </DropdownItem>\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    </>\n  );\n  const userDropdownItems = (\n    <>\n      <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n      <DropdownItem key=\"group 2 user\">User management</DropdownItem>\n      <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n    </>\n  );\n\n  const headerToolbar = (\n    <Toolbar id=\"toolbar\" isStatic>\n      <ToolbarContent>\n        <ToolbarGroup\n          variant=\"action-group-plain\"\n          align={{ default: 'alignEnd' }}\n          gap={{ default: 'gapNone', md: 'gapMd' }}\n        >\n          <ToolbarItem>\n            <NotificationBadge aria-label=\"Notifications\" variant={NotificationBadgeVariant.read} onClick={() => {}} />\n          </ToolbarItem>\n          <ToolbarGroup variant=\"action-group-plain\" visibility={{ default: 'hidden', lg: 'visible' }}>\n            <ToolbarItem>\n              <Button aria-label=\"Settings\" isSettings variant=\"plain\" />\n            </ToolbarItem>\n            <ToolbarItem>\n              <Button aria-label=\"Help\" variant={ButtonVariant.plain} icon={<RhUiQuestionMarkCircleFillIcon />} />\n            </ToolbarItem>\n          </ToolbarGroup>\n          <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>\n            <Dropdown\n              isOpen={isKebabDropdownOpen}\n              onSelect={onKebabDropdownSelect}\n              onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}\n              popperProps={{ position: 'right' }}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={onKebabDropdownToggle}\n                  isExpanded={isKebabDropdownOpen}\n                  variant=\"plain\"\n                  aria-label=\"Settings and help\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n            >\n              <DropdownList>{kebabDropdownItems}</DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n          <ToolbarItem visibility={{ md: 'hidden' }}>\n            <Dropdown\n              isOpen={isFullKebabDropdownOpen}\n              onSelect={onFullKebabDropdownSelect}\n              onOpenChange={(isOpen: boolean) => setIsFullKebabDropdownOpen(isOpen)}\n              popperProps={{ position: 'right' }}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={onFullKebabDropdownToggle}\n                  isExpanded={isFullKebabDropdownOpen}\n                  variant=\"plain\"\n                  aria-label=\"Toolbar menu\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n            >\n              <DropdownGroup key=\"group 2\" aria-label=\"User actions\">\n                <DropdownList>{userDropdownItems}</DropdownList>\n              </DropdownGroup>\n              <Divider />\n              <DropdownList>{kebabDropdownItems}</DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n        </ToolbarGroup>\n        <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>\n          <Dropdown\n            isOpen={isDropdownOpen}\n            onSelect={onDropdownSelect}\n            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}\n            popperProps={{ position: 'right' }}\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={onDropdownToggle}\n                isExpanded={isDropdownOpen}\n                icon={<Avatar src={imgAvatar} alt=\"\" size=\"sm\" />}\n              >\n                Ned Username\n              </MenuToggle>\n            )}\n          >\n            <DropdownList>{userDropdownItems}</DropdownList>\n          </Dropdown>\n        </ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton isHamburgerButton aria-label=\"Global navigation\" />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo>\n            <Brand src={pfLogo} alt=\"PatternFly\" heights={{ default: '36px' }} />\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const pageNav = (\n    <Nav onSelect={onNavSelect}>\n      <NavList>\n        <NavItem itemId={0} isActive={activeItem === 0} to=\"#system-panel\">\n          System panel\n        </NavItem>\n        <NavItem itemId={1} isActive={activeItem === 1} to=\"#policy\">\n          Policy\n        </NavItem>\n        <NavItem itemId={2} isActive={activeItem === 2} to=\"#auth\">\n          Authentication\n        </NavItem>\n        <NavItem itemId={3} isActive={activeItem === 3} to=\"#network\">\n          Network services\n        </NavItem>\n        <NavItem itemId={4} isActive={activeItem === 4} to=\"#server\">\n          Server\n        </NavItem>\n      </NavList>\n    </Nav>\n  );\n\n  const sidebar = (\n    <PageSidebar>\n      <PageSidebarBody>{pageNav}</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  const mainContainerId = 'main-content';\n\n  const handleClick = (event) => {\n    event.preventDefault();\n\n    const mainContentElement = document.getElementById(mainContainerId);\n    if (mainContentElement) {\n      mainContentElement.focus();\n    }\n  };\n\n  const pageSkipToContent = (\n    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>\n      Skip to content\n    </SkipToContent>\n  );\n\n  return (\n    <Page\n      masthead={masthead}\n      sidebar={sidebar}\n      isManagedSidebar\n      skipToContent={pageSkipToContent}\n      mainContainerId={mainContainerId}\n    >\n      <PageGroup stickyOnBreakpoint={{ default: 'top' }}>\n        <PageBreadcrumb>\n          <Breadcrumb>\n            <BreadcrumbItem>Section home</BreadcrumbItem>\n            <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n            <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n            <BreadcrumbItem to=\"#\" isActive>\n              Section landing\n            </BreadcrumbItem>\n          </Breadcrumb>\n        </PageBreadcrumb>\n        <PageSection isWidthLimited aria-labelledby=\"main-title\">\n          <Content>\n            <h1 id=\"main-title\">Main title</h1>\n            <p>This is a full page demo.</p>\n          </Content>\n        </PageSection>{' '}\n      </PageGroup>\n      <PageSection aria-label=\"Card gallery\">\n        <Gallery hasGutter>\n          {Array.from({ length: 50 }).map((_value, index) => (\n            <GalleryItem key={index}>\n              <Card>\n                <CardBody>This is a card</CardBody>\n              </Card>\n            </GalleryItem>\n          ))}\n        </Gallery>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Sticky section group (alternate syntax)","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Sticky section breadcrumb (with breakpoints)': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportstickysectionbreadcrumbwithbreakpoints} {...{"code":"import { useState } from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Content,\n  Divider,\n  Dropdown,\n  DropdownGroup,\n  DropdownItem,\n  DropdownList,\n  Gallery,\n  GalleryItem,\n  Masthead,\n  MastheadMain,\n  MastheadLogo,\n  MastheadContent,\n  MastheadBrand,\n  MastheadToggle,\n  MenuToggle,\n  MenuToggleElement,\n  Nav,\n  NavItem,\n  NavList,\n  NotificationBadge,\n  NotificationBadgeVariant,\n  Page,\n  PageSection,\n  PageSidebar,\n  PageSidebarBody,\n  PageToggleButton,\n  SkipToContent,\n  Toolbar,\n  ToolbarContent,\n  ToolbarGroup,\n  ToolbarItem\n} from '@patternfly/react-core';\nimport RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';\nimport pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';\ninterface NavOnSelectProps {\n  groupId: number | string;\n  itemId: number | string;\n  to: string;\n}\n\nexport const PageStickySectionBreadcrumb: React.FunctionComponent = () => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);\n  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);\n  const [activeItem, setActiveItem] = useState(1);\n\n  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {\n    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);\n  };\n\n  const onDropdownToggle = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onDropdownSelect = () => {\n    setIsDropdownOpen(false);\n  };\n\n  const onKebabDropdownToggle = () => {\n    setIsKebabDropdownOpen(!isKebabDropdownOpen);\n  };\n\n  const onKebabDropdownSelect = () => {\n    setIsKebabDropdownOpen(false);\n  };\n\n  const onFullKebabDropdownToggle = () => {\n    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);\n  };\n\n  const onFullKebabDropdownSelect = () => {\n    setIsFullKebabDropdownOpen(false);\n  };\n\n  const dashboardBreadcrumb = (\n    <Breadcrumb>\n      <BreadcrumbItem>Section home</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\" isActive>\n        Section landing\n      </BreadcrumbItem>\n    </Breadcrumb>\n  );\n\n  const kebabDropdownItems = (\n    <>\n      <DropdownItem>\n        <RhUiSettingsFillIcon /> Settings\n      </DropdownItem>\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    </>\n  );\n  const userDropdownItems = (\n    <>\n      <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n      <DropdownItem key=\"group 2 user\">User management</DropdownItem>\n      <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n    </>\n  );\n\n  const headerToolbar = (\n    <Toolbar id=\"toolbar\" isStatic>\n      <ToolbarContent>\n        <ToolbarGroup\n          variant=\"action-group-plain\"\n          align={{ default: 'alignEnd' }}\n          gap={{ default: 'gapNone', md: 'gapMd' }}\n        >\n          <ToolbarItem>\n            <NotificationBadge aria-label=\"Notifications\" variant={NotificationBadgeVariant.read} onClick={() => {}} />\n          </ToolbarItem>\n          <ToolbarGroup variant=\"action-group-plain\" visibility={{ default: 'hidden', lg: 'visible' }}>\n            <ToolbarItem>\n              <Button aria-label=\"Settings\" isSettings variant=\"plain\" />\n            </ToolbarItem>\n            <ToolbarItem>\n              <Button aria-label=\"Help\" variant={ButtonVariant.plain} icon={<RhUiQuestionMarkCircleFillIcon />} />\n            </ToolbarItem>\n          </ToolbarGroup>\n          <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>\n            <Dropdown\n              isOpen={isKebabDropdownOpen}\n              onSelect={onKebabDropdownSelect}\n              onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}\n              popperProps={{ position: 'right' }}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={onKebabDropdownToggle}\n                  isExpanded={isKebabDropdownOpen}\n                  variant=\"plain\"\n                  aria-label=\"Settings and help\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n            >\n              <DropdownList>{kebabDropdownItems}</DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n          <ToolbarItem visibility={{ md: 'hidden' }}>\n            <Dropdown\n              isOpen={isFullKebabDropdownOpen}\n              onSelect={onFullKebabDropdownSelect}\n              onOpenChange={(isOpen: boolean) => setIsFullKebabDropdownOpen(isOpen)}\n              popperProps={{ position: 'right' }}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={onFullKebabDropdownToggle}\n                  isExpanded={isFullKebabDropdownOpen}\n                  variant=\"plain\"\n                  aria-label=\"Toolbar menu\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n            >\n              <DropdownGroup key=\"group 2\" aria-label=\"User actions\">\n                <DropdownList>{userDropdownItems}</DropdownList>\n              </DropdownGroup>\n              <Divider />\n              <DropdownList>{kebabDropdownItems}</DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n        </ToolbarGroup>\n        <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>\n          <Dropdown\n            isOpen={isDropdownOpen}\n            onSelect={onDropdownSelect}\n            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}\n            popperProps={{ position: 'right' }}\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={onDropdownToggle}\n                isExpanded={isDropdownOpen}\n                icon={<Avatar src={imgAvatar} alt=\"\" size=\"sm\" />}\n              >\n                Ned Username\n              </MenuToggle>\n            )}\n          >\n            <DropdownList>{userDropdownItems}</DropdownList>\n          </Dropdown>\n        </ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton isHamburgerButton aria-label=\"Global navigation\" />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo>\n            <Brand src={pfLogo} alt=\"PatternFly\" heights={{ default: '36px' }} />\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const pageNav = (\n    <Nav onSelect={onNavSelect}>\n      <NavList>\n        <NavItem itemId={0} isActive={activeItem === 0} to=\"#system-panel\">\n          System panel\n        </NavItem>\n        <NavItem itemId={1} isActive={activeItem === 1} to=\"#policy\">\n          Policy\n        </NavItem>\n        <NavItem itemId={2} isActive={activeItem === 2} to=\"#auth\">\n          Authentication\n        </NavItem>\n        <NavItem itemId={3} isActive={activeItem === 3} to=\"#network\">\n          Network services\n        </NavItem>\n        <NavItem itemId={4} isActive={activeItem === 4} to=\"#server\">\n          Server\n        </NavItem>\n      </NavList>\n    </Nav>\n  );\n\n  const sidebar = (\n    <PageSidebar>\n      <PageSidebarBody>{pageNav}</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  const mainContainerId = 'main-content';\n\n  const handleClick = (event) => {\n    event.preventDefault();\n\n    const mainContentElement = document.getElementById(mainContainerId);\n    if (mainContentElement) {\n      mainContentElement.focus();\n    }\n  };\n\n  const pageSkipToContent = (\n    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>\n      Skip to content\n    </SkipToContent>\n  );\n\n  return (\n    <Page\n      masthead={masthead}\n      sidebar={sidebar}\n      isManagedSidebar\n      skipToContent={pageSkipToContent}\n      breadcrumb={dashboardBreadcrumb}\n      mainContainerId={mainContainerId}\n      isBreadcrumbWidthLimited\n      breadcrumbProps={{\n        stickyOnBreakpoint: {\n          md: 'top'\n        }\n      }}\n    >\n      <PageSection isWidthLimited aria-labelledby=\"main-title\">\n        <Content>\n          <h1 id=\"main-title\">Main title</h1>\n          <p>This is a full page demo.</p>\n        </Content>\n      </PageSection>\n      <PageSection isWidthLimited aria-label=\"Card gallery\">\n        <Gallery hasGutter>\n          {Array.from({ length: 50 }).map((_value, index) => (\n            <GalleryItem key={index}>\n              <Card>\n                <CardBody>This is a card</CardBody>\n              </Card>\n            </GalleryItem>\n          ))}\n        </Gallery>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Sticky section breadcrumb (with breakpoints)","lang":"ts","isFullscreen":true,"className":""}}>
+      
+    </Example>,
+  'Context selector/perspective switcher in sidebar': props => 
+    <Example {...pageData} {...props} thumbnail={srcImportcontextselectorperspectiveswitcherinsidebar} {...{"code":"import { useState } from 'react';\nimport {\n  Avatar,\n  Brand,\n  Breadcrumb,\n  BreadcrumbItem,\n  Button,\n  ButtonVariant,\n  Card,\n  CardBody,\n  Divider,\n  Dropdown,\n  DropdownGroup,\n  DropdownItem,\n  DropdownList,\n  Gallery,\n  GalleryItem,\n  Masthead,\n  MastheadMain,\n  MastheadLogo,\n  MastheadContent,\n  MastheadBrand,\n  MastheadToggle,\n  MenuToggle,\n  MenuToggleElement,\n  Nav,\n  NavItem,\n  NavList,\n  NotificationBadge,\n  NotificationBadgeVariant,\n  Page,\n  PageSection,\n  PageSidebar,\n  PageSidebarBody,\n  PageToggleButton,\n  SkipToContent,\n  Content,\n  Toolbar,\n  ToolbarContent,\n  ToolbarGroup,\n  ToolbarItem\n} from '@patternfly/react-core';\nimport RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';\nimport pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';\ninterface NavOnSelectProps {\n  groupId: number | string;\n  itemId: number | string;\n  to: string;\n}\n\nexport const PageStickySectionBreadcrumb: React.FunctionComponent = () => {\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);\n  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);\n  const [isContextSelectorOpen, setIsContextSelectorOpen] = useState(false);\n  const [activeItem, setActiveItem] = useState(1);\n  const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n  const onSidebarToggle = () => {\n    setIsSidebarOpen(!isSidebarOpen);\n  };\n\n  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {\n    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);\n  };\n\n  const onDropdownToggle = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onDropdownSelect = () => {\n    setIsDropdownOpen(false);\n  };\n\n  const onKebabDropdownToggle = () => {\n    setIsKebabDropdownOpen(!isKebabDropdownOpen);\n  };\n\n  const onKebabDropdownSelect = () => {\n    setIsKebabDropdownOpen(false);\n  };\n\n  const onFullKebabDropdownToggle = () => {\n    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);\n  };\n\n  const onFullKebabDropdownSelect = () => {\n    setIsFullKebabDropdownOpen(false);\n  };\n\n  const onContextSelectorToggle = () => {\n    setIsContextSelectorOpen(!isContextSelectorOpen);\n  };\n\n  const onContextSelectorSelect = () => {\n    setIsContextSelectorOpen(false);\n  };\n\n  const dashboardBreadcrumb = (\n    <Breadcrumb>\n      <BreadcrumbItem>Section home</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n      <BreadcrumbItem to=\"#\" isActive>\n        Section landing\n      </BreadcrumbItem>\n    </Breadcrumb>\n  );\n\n  const kebabDropdownItems = (\n    <>\n      <DropdownItem>\n        <RhUiSettingsFillIcon /> Settings\n      </DropdownItem>\n      <DropdownItem>\n        <HelpIcon /> Help\n      </DropdownItem>\n    </>\n  );\n\n  const contextSelectorDropdownItems = (\n    <>\n      <DropdownItem>Developer</DropdownItem>\n      <DropdownItem>Admin</DropdownItem>\n    </>\n  );\n\n  const userDropdownItems = (\n    <>\n      <DropdownItem key=\"group 2 profile\">My profile</DropdownItem>\n      <DropdownItem key=\"group 2 user\">User management</DropdownItem>\n      <DropdownItem key=\"group 2 logout\">Logout</DropdownItem>\n    </>\n  );\n\n  const headerToolbar = (\n    <Toolbar id=\"toolbar\" isStatic>\n      <ToolbarContent>\n        <ToolbarGroup\n          variant=\"action-group-plain\"\n          align={{ default: 'alignEnd' }}\n          gap={{ default: 'gapNone', md: 'gapMd' }}\n        >\n          <ToolbarItem>\n            <NotificationBadge aria-label=\"Notifications\" variant={NotificationBadgeVariant.read} onClick={() => {}} />\n          </ToolbarItem>\n          <ToolbarGroup variant=\"action-group-plain\" visibility={{ default: 'hidden', lg: 'visible' }}>\n            <ToolbarItem>\n              <Button aria-label=\"Settings\" isSettings variant=\"plain\" />\n            </ToolbarItem>\n            <ToolbarItem>\n              <Button aria-label=\"Help\" variant={ButtonVariant.plain} icon={<RhUiQuestionMarkCircleFillIcon />} />\n            </ToolbarItem>\n          </ToolbarGroup>\n          <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>\n            <Dropdown\n              isOpen={isKebabDropdownOpen}\n              onSelect={onKebabDropdownSelect}\n              onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}\n              popperProps={{ position: 'right' }}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={onKebabDropdownToggle}\n                  isExpanded={isKebabDropdownOpen}\n                  variant=\"plain\"\n                  aria-label=\"Settings and help\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n            >\n              <DropdownList>{kebabDropdownItems}</DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n          <ToolbarItem visibility={{ md: 'hidden' }}>\n            <Dropdown\n              isOpen={isFullKebabDropdownOpen}\n              onSelect={onFullKebabDropdownSelect}\n              onOpenChange={(isOpen: boolean) => setIsFullKebabDropdownOpen(isOpen)}\n              popperProps={{ position: 'right' }}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  onClick={onFullKebabDropdownToggle}\n                  isExpanded={isFullKebabDropdownOpen}\n                  variant=\"plain\"\n                  aria-label=\"Toolbar menu\"\n                  icon={<RhUiEllipsisVerticalFillIcon />}\n                />\n              )}\n            >\n              <DropdownGroup key=\"group 2\" aria-label=\"User actions\">\n                <DropdownList>{userDropdownItems}</DropdownList>\n              </DropdownGroup>\n              <Divider />\n              <DropdownList>{kebabDropdownItems}</DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n        </ToolbarGroup>\n        <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>\n          <Dropdown\n            isOpen={isDropdownOpen}\n            onSelect={onDropdownSelect}\n            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}\n            popperProps={{ position: 'right' }}\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={onDropdownToggle}\n                isExpanded={isDropdownOpen}\n                icon={<Avatar src={imgAvatar} alt=\"\" size=\"sm\" />}\n              >\n                Ned Username\n              </MenuToggle>\n            )}\n          >\n            <DropdownList>{userDropdownItems}</DropdownList>\n          </Dropdown>\n        </ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  );\n\n  const masthead = (\n    <Masthead>\n      <MastheadMain>\n        <MastheadToggle>\n          <PageToggleButton\n            isHamburgerButton\n            aria-label=\"Global navigation\"\n            isSidebarOpen={isSidebarOpen}\n            onSidebarToggle={onSidebarToggle}\n          />\n        </MastheadToggle>\n        <MastheadBrand>\n          <MastheadLogo>\n            <Brand src={pfLogo} alt=\"PatternFly\" heights={{ default: '36px' }} />\n          </MastheadLogo>\n        </MastheadBrand>\n      </MastheadMain>\n      <MastheadContent>{headerToolbar}</MastheadContent>\n    </Masthead>\n  );\n\n  const pageNav = (\n    <Nav onSelect={onNavSelect}>\n      <NavList>\n        <NavItem itemId={0} isActive={activeItem === 0} to=\"#system-panel\">\n          System panel\n        </NavItem>\n        <NavItem itemId={1} isActive={activeItem === 1} to=\"#policy\">\n          Policy\n        </NavItem>\n        <NavItem itemId={2} isActive={activeItem === 2} to=\"#auth\">\n          Authentication\n        </NavItem>\n        <NavItem itemId={3} isActive={activeItem === 3} to=\"#network\">\n          Network services\n        </NavItem>\n        <NavItem itemId={4} isActive={activeItem === 4} to=\"#server\">\n          Server\n        </NavItem>\n      </NavList>\n    </Nav>\n  );\n\n  const pageContextSelector = (\n    <Dropdown\n      isOpen={isContextSelectorOpen}\n      onSelect={onContextSelectorSelect}\n      onOpenChange={(isOpen: boolean) => setIsContextSelectorOpen(isOpen)}\n      toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n        <MenuToggle\n          tabIndex={isSidebarOpen ? undefined : -1}\n          ref={toggleRef}\n          onClick={onContextSelectorToggle}\n          isExpanded={isContextSelectorOpen}\n          isFullWidth\n        >\n          Developer\n        </MenuToggle>\n      )}\n    >\n      <DropdownList>{contextSelectorDropdownItems}</DropdownList>\n    </Dropdown>\n  );\n\n  const sidebar = (\n    <PageSidebar isSidebarOpen={isSidebarOpen}>\n      <PageSidebarBody isContextSelector>{pageContextSelector}</PageSidebarBody>\n      <PageSidebarBody>{pageNav}</PageSidebarBody>\n    </PageSidebar>\n  );\n\n  const mainContainerId = 'main-content';\n\n  const handleClick = (event) => {\n    event.preventDefault();\n\n    const mainContentElement = document.getElementById(mainContainerId);\n    if (mainContentElement) {\n      mainContentElement.focus();\n    }\n  };\n\n  const pageSkipToContent = (\n    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>\n      Skip to content\n    </SkipToContent>\n  );\n\n  return (\n    <Page\n      masthead={masthead}\n      sidebar={sidebar}\n      skipToContent={pageSkipToContent}\n      breadcrumb={dashboardBreadcrumb}\n      mainContainerId={mainContainerId}\n      isBreadcrumbWidthLimited\n    >\n      <PageSection isWidthLimited aria-labelledby=\"main-title\">\n        <Content>\n          <Content component=\"h1\" id=\"main-title\">\n            Main title\n          </Content>\n          <Content component=\"p\">This is a full page demo.</Content>\n        </Content>\n      </PageSection>\n      <PageSection isWidthLimited aria-label=\"Card gallery\">\n        <Gallery hasGutter>\n          {Array.from({ length: 50 }).map((_value, index) => (\n            <GalleryItem key={index}>\n              <Card>\n                <CardBody>This is a card</CardBody>\n              </Card>\n            </GalleryItem>\n          ))}\n        </Gallery>\n      </PageSection>\n    </Page>\n  );\n};\n","title":"Context selector/perspective switcher in sidebar","lang":"ts","isFullscreen":true,"className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When adding a context selector/perspective switcher in a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`PageSidebar`}
+        </code>
+        {`, you must manually control the open state of the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`PageSidebar`}
+        </code>
+        {` as well as ensure any interactive menu toggles or buttons cannot receive focus. This demo adds a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tabIndex`}
+        </code>
+        {` of `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`-1`}
+        </code>
+        {` when the sidebar is not expanded to achieve this.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+      <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+        {`All examples set the `}
+        <code {...{"className":"ws-code "}}>
+          {`isManagedSidebar`}
+        </code>
+        {` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `}
+        <code {...{"className":"ws-code "}}>
+          {`isManagedSidebar`}
+        </code>
+        {` prop and instead:`}
+        <ol {...{"className":"pf-v6-c-content--ol pf-m-editorial ws-ol "}}>
+          <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+            {`Add an onNavToggle callback to PageHeader`}
+          </li>
+          <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+            {`Pass a boolean into the isNavOpen prop to PageSidebar`}
+          </li>
+        </ol>
+      </li>
+    </ul>
+    <AutoLinkHeader {...{"id":"layouts","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Layouts`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`This demonstrates a variety of navigation patterns in the context of a full page layout. These can be used as a basis for choosing the most appropriate page template for your application.`}
+    </p>
+    {React.createElement(pageData.examples["Sticky section group"])}
+    {React.createElement(pageData.examples["Sticky section group (alternate syntax)"])}
+    {React.createElement(pageData.examples["Sticky section breadcrumb (with breakpoints)"])}
+    {React.createElement(pageData.examples["Context selector/perspective switcher in sidebar"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsPageReactDemosDocs';
+Component.pageData = pageData;
+
+export default Component;