Next.js Discord

Discord Forum

App Directory - passing children from layout into component

Unanswered
Forest bachac posted this in #help-forum
Open in Discord
Forest bachacOP
I'm Using App Directory and have a component for navigation called "Sidebar" which renders the entire page. How can I embed children in that?
from layout.tsx
export default function RootLayout({
  
  children,
}: {
  children: React.ReactNode
}) {
  const colors = ['light', 'dark', 'blue', 'highcontrast'] 
  const [color, setColor] = useState<string>(colors[1])
  return (
    <Provider store={store}>
        <html className="h-full bg-white">
          <body className="h-full">
          <div className={[
            
            color && `theme-${color}`,
            ]
            .filter(Boolean)
            .join(' ')}>
            <Sidebar /> 
              {children}
          </div> 
          </body>
       </html>
       </Provider>
  )
}


from the sidebar comp
          <main className="py-10">
            <div className="px-4 sm:px-6 lg:px-8">{/* Your content */}</div>
          </main>

I would want to render the {children} where Your Content is

or am I thinking about this wrong?

0 Replies