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 1 year 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.

📦