Secondary Sidebar Pages
Last updated
Was this helpful?
Last updated
Was this helpful?
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
Configure the sections:
type Sections = "section1" | "section2" | "section3";
Set the correct page path:
const pagePath = "/dashboard";
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 */}
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
.