Secondary Sidebar Pages

With this component, you can create a secondary sidebar, inside a page.

It is useful if you have additional sections inside a page, like for advanced settings.

Component: <SecondarySidebarPages />

File: src/components/molecules/SecondarySidebarPages/SecondarySidebarPages.tsx


  1. Configure the sections:

type Sections = "section1" | "section2" | "section3";
  1. Set the correct page path:

const pagePath = "/dashboard";
  1. Update the content of each section with the React components that you want to render

        {currentSection === "section1" && <Heading size="md">Section</Heading>}
        {currentSection === "section2" && <Heading size="md">Layout</Heading>}
        {currentSection === "section3" && (
          <Heading size="md">Box model</Heading>
        {/* add more sections here */}
  1. Add the SecondarySidebarPages component to a route in WebAppPage:

{currentPage === Routes.dashboard && <SecondarySidebarPages />}

If you need to create another page with a secondary sidebar, duplicate the file, call the component SecondarySidebarPages2 (or any other more meaningful name), and use it in WebAppPage.

Last updated