@patternfly/react-core 5.0.0-alpha.82 → 5.0.0-alpha.84

package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap

@@ -91,11 +91,7 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -155,11 +151,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -317,11 +309,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -479,11 +467,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -757,11 +741,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -1042,11 +1022,7 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -1233,11 +1209,7 @@ exports[`Page Check page to verify skip to content points to main content region
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       id="main-content-page-layout-test-nav"
@@ -1457,11 +1429,7 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -1619,11 +1587,7 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -1781,11 +1745,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"
@@ -1943,11 +1903,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
       aria-hidden="false"
       class="pf-c-page__sidebar pf-m-expanded"
       id="page-sidebar"
-    >
-      <div
-        class="pf-c-page__sidebar-body"
-      />
-    </div>
+    />
     <main
       class="pf-c-page__main"
       tabindex="-1"

package/src/components/Page/__tests__/__snapshots__/PageSidebarBody.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-page__sidebar-body"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

package/src/components/Page/examples/Page.md

@@ -6,6 +6,7 @@ propComponents:
   [
     'Page',
     'PageSidebar',
+    'PageSidebarBody',
     'PageSection',
     'PageGroup',
     'PageBreadcrumb',
@@ -16,8 +17,8 @@ propComponents:
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import {
-  PageHeader,
-  PageHeaderTools
+PageHeader,
+PageHeaderTools
 } from '@patternfly/react-core/deprecated';
 import './page.css';
 
@@ -25,20 +26,35 @@ import './page.css';
 
 ### Basic page components
 
-A page will typically contain the following components: 
+A page will typically contain the following components:
 
 - A `<Page>` with a `header` that often contains a [masthead](/components/masthead)
-  - Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`. 
-- A `<PageSidebar>` for vertical navigation 
+  - Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`.
+- 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components
 
 ### Vertical navigation
 
-To add a vertical sidebar to a `<Page>`, pass a `<PageSidebar>` component into the `sidebar` property. To render navigation in the sidebar, use the `nav` property of the `<PageSidebar>`. 
+To add a vertical sidebar to a `<Page>`, pass a `<PageSidebar>` component into the `sidebar` property. To render navigation in the sidebar, pass a `<PageSidebarBody>` component to `<PageSidebar>`.
 
-The `isNavOpen` property helps facilitate the opening and closing of the sidebar and should be 'true' when the navigation sidebar is visible. 
+The `isSidebarOpen` property helps facilitate the opening and closing of the sidebar and should be 'true' when the sidebar is visible.
 
 ```ts file="./PageVerticalNav.tsx"
+
+```
+
+### Multiple sidebar body
+
+You can have multiple `<PageSidebarBody>` components inside the `<PageSidebar>` for more customization. You can modify the `<PageSidebarBody>` further by passing the following properties:
+
+- `usePageInsets` will modify the component's insets to match page insets
+- `isFilled={true}` will cause the component to grow to fill the available vertical space
+- `isFilled={false}` will cause the component to **not** grow to fill the available vertical space
+
+By default, the last `<PageSidebarBody>` will grow to fill the available vertical space. This can be changed by passing `isFilled={false}` as demonstrated in the following example.
+
+```ts file="./PageMultipleSidebarBody.tsx"
+
 ```
 
 ### Horizontal navigation
@@ -46,22 +62,25 @@ The `isNavOpen` property helps facilitate the opening and closing of the sidebar
 To add horizontal navigation to the top of a `<Page>`, add the navigation inside of a `<ToolbarItem>` in the `<Toolbar>` that is passed to the `<MastheadContent>` of the `<Masthead>`.
 
 ```ts file="./PageHorizontalNav.tsx"
+
 ```
 
 ### Legacy tertiary navigation
 
-[Horizontal sub-navigation](/components/navigation#horizontal-subnav) is now recommended instead of tertiary-level navigation. 
+[Horizontal sub-navigation](/components/navigation#horizontal-subnav) is now recommended instead of tertiary-level navigation.
 
 Tertiary navigation allows you to add an additional navigation menu alongside vertical or horizontal navigation. To create tertiary navigation, use the `tertiaryNav` property. The following example passes `tertiaryNav="Navigation"` into a `<Page>` component.
 
 ```ts file="./PageTertiaryNav.tsx"
+
 ```
 
 ### Uncontrolled navigation
 
-When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isNavOpen` into the `<PageSidebar>` and `onNavToggle` into the `<PageToggleButton>`.
+When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isSidebarOpen` into the `<PageSidebar>` and `onSidebarToggle` into the `<PageToggleButton>`.
 
 ```ts file="./PageUncontrolledNav.tsx"
+
 ```
 
 ### Filled page sections
@@ -71,44 +90,47 @@ By default, the last page section is "filled", meaning it fills the available ve
 To change the default behavior, use the `isFilled` property. To make other page sections "filled", set `isFilled` equal to "true". To disable the last page section from being "filled", set `isFilled` equal to "false".
 
 ```ts file="./PageWithOrWithoutFill.tsx"
+
 ```
 
 ### Main section padding
 
-To adjust the padding of a `<PageSection>`, you can pass in different values to the `padding` property. These values should be aligned to a specific breakpoint: 'default', 'sm', 'md', 'lg', 'xl', and '2xl'. Each breakpoint passed into the property should be given a value of either ‘padding’ or ‘noPadding’. 
+To adjust the padding of a `<PageSection>`, you can pass in different values to the `padding` property. These values should be aligned to a specific breakpoint: 'default', 'sm', 'md', 'lg', 'xl', and '2xl'. Each breakpoint passed into the property should be given a value of either ‘padding’ or ‘noPadding’.
 
-As the page's viewport width increases, breakpoints inherit the padding behavior of the previous breakpoint. For example, padding that is set on 'lg' also applies to 'xl' and '2xl'. 
+As the page's viewport width increases, breakpoints inherit the padding behavior of the previous breakpoint. For example, padding that is set on 'lg' also applies to 'xl' and '2xl'.
 
 To remove padding entirely, pass 'noPadding' to the `default` breakpoint. For example, the second section in this example passes in `padding={{ default: 'noPadding' }}`. Since no specific breakpoints are mentioned, every breakpoint will have 'noPadding'.
 
-To add padding at specific breakpoints, pass in "padding" at those breakpoints. For example, the third section in this example passes in `padding={{ default: 'noPadding', md: 'padding' }}`. At 'md', 'lg',  'xl', and '2xl' breakpoints, the default value will be overwritten, and padding will be added.
+To add padding at specific breakpoints, pass in "padding" at those breakpoints. For example, the third section in this example passes in `padding={{ default: 'noPadding', md: 'padding' }}`. At 'md', 'lg', 'xl', and '2xl' breakpoints, the default value will be overwritten, and padding will be added.
 
-To remove padding at specific breakpoints, pass in 'noPadding' at those breakpoints. For example, the fourth section in this example passes in `padding={{ md: 'noPadding' }}`, which means that 'md', 'lg'  'xl', and '2xl' breakpoints will have `noPadding`.
+To remove padding at specific breakpoints, pass in 'noPadding' at those breakpoints. For example, the fourth section in this example passes in `padding={{ md: 'noPadding' }}`, which means that 'md', 'lg' 'xl', and '2xl' breakpoints will have `noPadding`.
 
 ```ts file="./PageMainSectionPadding.tsx"
+
 ```
 
 ### Group section
 
-To group page content sections, add 1 or more `<PageGroup>` components to a `<Page>`. 
+To group page content sections, add 1 or more `<PageGroup>` components to a `<Page>`.
 
 The following example adds a group containing `<PageNavigation>`, `<PageBreadcrumb>`, and `<PageSection>` components.
 
-To add additional components and information to a group, you may use the following properties: 
+To add additional components and information to a group, you may use the following properties:
 
-- To indicate that a breadcrumb should be in a group, use `isBreadcrumbGrouped`. 
+- To indicate that a breadcrumb should be in a group, use `isBreadcrumbGrouped`.
 - To indicate that tertiary navigation should be in a group, use `isTertiaryNavGrouped`.
-- To specify additional group content, use `additionalGroupedContent`. 
-
+- To specify additional group content, use `additionalGroupedContent`.
 
 ```ts file="./PageGroupSection.tsx"
+
 ```
 
 ### Centered section
 
-By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property.  When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
+By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
 
 The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.
 
 ```ts file="./PageCenteredSection.tsx"
+
 ```

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -7,6 +7,7 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageToggleButton,
   Toolbar,
@@ -18,10 +19,10 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageCenteredSection: React.FunctionComponent = () => {
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
 
-  const onNavToggle = () => {
-    setIsNavOpen(!isNavOpen);
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
   };
 
   const headerToolbar = (
@@ -38,8 +39,8 @@ export const PageCenteredSection: React.FunctionComponent = () => {
         <PageToggleButton
           variant="plain"
           aria-label="Global navigation"
-          isNavOpen={isNavOpen}
-          onNavToggle={onNavToggle}
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
           id="centered-nav-toggle"
         >
           <BarsIcon />
@@ -54,7 +55,11 @@ export const PageCenteredSection: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="centered-section-sidebar" />;
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="centered-section-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page header={header} sidebar={sidebar}>

package/src/components/Page/examples/PageGroupSection.tsx

@@ -7,6 +7,7 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageGroup,
   PageBreadcrumb,
@@ -25,10 +26,10 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageGroupSection: React.FunctionComponent = () => {
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
 
-  const onNavToggle = () => {
-    setIsNavOpen(!isNavOpen);
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
   };
 
   const headerToolbar = (
@@ -45,8 +46,8 @@ export const PageGroupSection: React.FunctionComponent = () => {
         <PageToggleButton
           variant="plain"
           aria-label="Global navigation"
-          isNavOpen={isNavOpen}
-          onNavToggle={onNavToggle}
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
           id="group-section-nav-toggle"
         >
           <BarsIcon />
@@ -61,7 +62,11 @@ export const PageGroupSection: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="group-section-sidebar" />;
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="group-section-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page header={header} sidebar={sidebar}>

package/src/components/Page/examples/PageMainSectionPadding.tsx

@@ -7,6 +7,7 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageSectionVariants,
   PageToggleButton,
@@ -17,10 +18,10 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMainSectionPadding: React.FunctionComponent = () => {
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
 
-  const onNavToggle = () => {
-    setIsNavOpen(!isNavOpen);
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
   };
 
   const headerToolbar = (
@@ -37,8 +38,8 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
         <PageToggleButton
           variant="plain"
           aria-label="Global navigation"
-          isNavOpen={isNavOpen}
-          onNavToggle={onNavToggle}
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
           id="main-padding-nav-toggle"
         >
           <BarsIcon />
@@ -53,7 +54,11 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="main-padding-sidebar" />;
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="main-padding-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page header={header} sidebar={sidebar}>

package/src/components/Page/examples/PageMultipleSidebarBody.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  Page,
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
+  PageSidebar,
+  PageSidebarBody,
+  PageSection,
+  PageSectionVariants,
+  PageToggleButton,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+
+export const PageMultipleSidebarBody: React.FunctionComponent = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const headerToolbar = (
+    <Toolbar id="multiple-sidebar-body-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>header-tools</ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const header = (
+    <Masthead>
+      <MastheadToggle>
+        <PageToggleButton
+          variant="plain"
+          aria-label="Global navigation"
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
+          id="multiple-sidebar-body-nav-toggle"
+        >
+          <BarsIcon />
+        </PageToggleButton>
+      </MastheadToggle>
+      <MastheadMain>
+        <MastheadBrand href="https://patternfly.org" target="_blank">
+          Logo
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="multiple-sidebar-body-sidebar">
+      <PageSidebarBody usePageInsets>First sidebar body (with insets)</PageSidebarBody>
+      <PageSidebarBody isFilled={true}>Second sidebar body (with fill)</PageSidebarBody>
+      <PageSidebarBody isFilled={false} usePageInsets>
+        Third sidebar body (with insets and no fill)
+      </PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page header={header} sidebar={sidebar}>
+      <PageSection variant={PageSectionVariants.darker}>Section with darker background</PageSection>
+      <PageSection variant={PageSectionVariants.dark}>Section with dark background</PageSection>
+      <PageSection variant={PageSectionVariants.light}>Section with light background</PageSection>
+    </Page>
+  );
+};

package/src/components/Page/examples/PageUncontrolledNav.tsx

@@ -7,6 +7,7 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageSectionVariants,
   PageToggleButton,
@@ -41,7 +42,11 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" id="uncontrolled-sidebar" />;
+  const sidebar = (
+    <PageSidebar id="uncontrolled-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page isManagedSidebar header={header} sidebar={sidebar}>

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -7,6 +7,7 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageSectionVariants,
   PageToggleButton,
@@ -17,10 +18,10 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageVerticalNav: React.FunctionComponent = () => {
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
 
-  const onNavToggle = () => {
-    setIsNavOpen(!isNavOpen);
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
   };
 
   const headerToolbar = (
@@ -37,8 +38,8 @@ export const PageVerticalNav: React.FunctionComponent = () => {
         <PageToggleButton
           variant="plain"
           aria-label="Global navigation"
-          isNavOpen={isNavOpen}
-          onNavToggle={onNavToggle}
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
           id="vertical-nav-toggle"
         >
           <BarsIcon />
@@ -53,7 +54,11 @@ export const PageVerticalNav: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="vertical-sidebar" />;
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="vertical-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page header={header} sidebar={sidebar}>

package/src/components/Page/examples/PageWithOrWithoutFill.tsx

@@ -7,6 +7,7 @@ import {
   MastheadBrand,
   MastheadContent,
   PageSidebar,
+  PageSidebarBody,
   PageSection,
   PageToggleButton,
   Toolbar,
@@ -16,10 +17,10 @@ import {
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageWithOrWithoutFill: React.FunctionComponent = () => {
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
 
-  const onNavToggle = () => {
-    setIsNavOpen(!isNavOpen);
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
   };
 
   const headerToolbar = (
@@ -36,8 +37,8 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
         <PageToggleButton
           variant="plain"
           aria-label="Global navigation"
-          isNavOpen={isNavOpen}
-          onNavToggle={onNavToggle}
+          isSidebarOpen={isSidebarOpen}
+          onSidebarToggle={onSidebarToggle}
           id="fill-nav-toggle"
         >
           <BarsIcon />
@@ -52,7 +53,11 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
     </Masthead>
   );
 
-  const sidebar = <PageSidebar nav="Navigation" isNavOpen={isNavOpen} id="fill-sidebar" />;
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="fill-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
 
   return (
     <Page header={header} sidebar={sidebar}>

package/src/components/Page/index.ts

@@ -2,6 +2,7 @@ export * from './Page';
 export * from './PageBreadcrumb';
 export * from './PageGroup';
 export * from './PageSidebar';
+export * from './PageSidebarBody';
 export * from './PageSection';
 export * from './PageNavigation';
 export * from './PageToggleButton';