Shipped
HomeContacts
  • Get started
  • 📚Tutorials
    • Make a waiting list
    • Launch a pre-sale
    • Build a SaaS
    • Create your store on Lemon Squeezy
  • 🟩Features
    • AI Services
    • Affiliate Program
    • Analytics
    • Authentication
      • MailChimp
      • Loops
      • AWS SES
      • SendGrid
      • Supabase Auth
        • Supabase Authentication Flow
        • Supabase Magic Link
        • Supabase Email & Password
        • Supabase Login with Google
    • API endpoints
      • 🛡️Authenticated API
    • Blog
    • Customer support
    • Chrome Extension
    • Dark mode
    • Database
      • Update your database
      • MongoDB
    • Emails
    • Error pages
    • Icons
    • Onboarding
    • Payments
      • Lemon Squeezy
        • Subscriptions
        • One-time purchase
        • Test mode
      • Stripe
    • Private pages
    • SEO
    • shadcn/ui
    • Supabase
    • Workspace / Organizations
  • 📦Components
    • AccountMenu
    • CtaBox
    • DarkModeSwitch
    • Explainer video
    • FAQ
    • Features
    • Footer
    • Header
    • Hero
    • Lifetime
    • Pricing
    • Sales Notification
    • Secondary Sidebar Pages
    • Sidebar
    • Tabs
    • Testimonials
    • Waitlist
    • WebAppPage
  • 🚀Deployment
  • ✅Other
    • Configuration
    • Changelog widget
    • Favicon
    • Google Fonts
    • Sitemap
    • Theme
  • Updates
  • GitHub Repository
  • Support
Powered by GitBook
On this page

Was this helpful?

  1. Components

Secondary Sidebar Pages

PreviousSales NotificationNextSidebar

Last updated 11 months ago

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

Instructions

  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.

📦