Sidebar Layout issue

Answered

Rex posted this in #help-forum

RexOP

2024-06-22T06:07:31.224Z

I have the following code root layout. The issue I am facing is for certain routes I don't want to show the sidebar and Aside component. To achieve thsi I manualy check if the url of the route matches with the one I don't to show the sidebar/aside on.
This approach somwhow works but I have issues for dynamic routes or nested routes
for example the I don't want to show Aside on the messages route if I /messages it works but if I created subroute eg /messages/[id] it doesn't work and for a big app it can get complex real quick
what can I do to have better structure?

const Sidebar = ({ className }: SidebarProps) => {
  const pathname = usePathname();
  const hideSidebarRoutes = ["/profile", "/verify", "/dashboard"];
  const shouldHideSidebar = hideSidebarRoutes.includes(pathname);
  if (shouldHideSidebar) return null;

    <div className=" flex flex-col items-center">
      <SiteHeader />
      <div
        className={cn(
          `min-h-[calc(100vh-0px)] pt-[60px] max-w-[1300px] w-full flex justify-center `
        )}
      >
        {user && <Sidebar />}
        <div className="flex-1 ">{children}</div>
        {user && <Aside />}
      </div>
    </div>

Answered by joulev

app/
  layout.tsx # remove Sidebar and Aside from here
  profile/page.tsx #/profile
  messages/page.tsx # /messages
  login/page.tsx # /login
  (main)/
    layout.tsx # add them to here
    page.tsx # /

View full answer

19 Replies

@Rex I have the following code root layout. The issue I am facing is for certain routes I don't want to show the sidebar and Aside component. To achieve thsi I manualy check if the url of the route matches with the one I don't to show the sidebar/aside on. This approach somwhow works but I have issues for dynamic routes or nested routes for example the I don't want to show Aside on the messages route if I `/messages` it works but if I created subroute eg `/messages/[id]` it doesn't work and for a big app it can get complex real quick what can I do to have better structure? js const Sidebar = ({ className }: SidebarProps) => { const pathname = usePathname(); const hideSidebarRoutes = ["/profile", "/verify", "/dashboard"]; const shouldHideSidebar = hideSidebarRoutes.includes(pathname); if (shouldHideSidebar) return null; js <div className=" flex flex-col items-center"> <SiteHeader /> <div className={cn( `min-h-[calc(100vh-0px)] pt-[60px] max-w-[1300px] w-full flex justify-center ` )} > {user && <Sidebar />} <div className="flex-1 ">{children}</div> {user && <Aside />} </div> </div>

joulev

2024-06-22T06:13:13.030Z

try using route groups

app/
  layout.tsx # remove Sidebar and Aside from here
  (main)/
    layout.tsx # add them to here
    ... # everything else
  login/
    page.tsx # this page won't have Sidebar and Aside

@joulev sh app/ layout.tsx # remove Sidebar and Aside from here (main)/ layout.tsx # add them to here ... # everything else login/ page.tsx # this page won't have Sidebar and Aside

RexOP

2024-06-22T06:27:16.315Z

I have read about this but in my specific case how can I group them?
following routes

app/
  profile/ (don't want sidebar and aside)
    page.tsx
    layout.tsx
   messages/ (don't want aside)
     page.tsx
     layout.tsx 
   login/
      page.tsx
      layout.tsx
  page.tsx (should show sidebar and aside) (basically this page has twitter like feed) 
  layout.tsx

@Rex I have read about this but in my specific case how can I group them? following routes js app/ profile/ (don't want sidebar and aside) page.tsx layout.tsx messages/ (don't want aside) page.tsx layout.tsx login/ page.tsx layout.tsx page.tsx (should show sidebar and aside) (basically this page has twitter like feed) layout.tsx

joulev

2024-06-22T06:30:11.172Z

app/
  layout.tsx # remove Sidebar and Aside from here
  profile/page.tsx #/profile
  messages/page.tsx # /messages
  login/page.tsx # /login
  (main)/
    layout.tsx # add them to here
    page.tsx # /

Answer

@joulev sh app/ layout.tsx # remove Sidebar and Aside from here profile/page.tsx #/profile messages/page.tsx # /messages login/page.tsx # /login (main)/ layout.tsx # add them to here page.tsx # /

RexOP

2024-06-22T06:32:13.614Z

and what about the root page.tsx

just empty?

@Rex and what about the root `page.tsx`

joulev

2024-06-22T06:32:23.970Z

remove it

RexOP

2024-06-22T06:32:30.645Z

can I do that

damn

joulev

2024-06-22T06:32:37.153Z

/ goes to app/(main)/page.tsx instead of app/page.tsx

RexOP

2024-06-22T06:32:48.419Z

ayoo new information for me

I will try this and see how it works

Thanks juolev

joulev

2024-06-22T06:33:42.520Z

yup ping me if it didn't work, i'll leave this thread for now

@joulev yup ping me if it didn't work, i'll leave this thread for now

RexOP

2024-06-22T09:18:36.956Z

I have modified the structure like this

app/
  (main) 
     page.tsx
     layout.tsx
   profile/  (working as required) 
     page.tsx
     layout.tsx
   messages/ (only want the sidebar for messages)
    layout.tsx
    page.tsx 
layout.tsx

following is the (main) => layout.tsx code. If I move messages under the (main) then I get both sidebar and aside but I only want the sidebar. What do?

// layout component (main)

   <div className=" flex">
      {user && <Sidebar />}
        <div className="flex-1 ">{children}</div>
        {user && <Aside />}
   </div>

for profile and login it is working as expected

@Rex I have modified the structure like this js app/ (main) page.tsx layout.tsx profile/ (working as required) page.tsx layout.tsx messages/ (only want the sidebar for messages) layout.tsx page.tsx layout.tsx following is the ` (main) => layout.tsx` code. If I move messages under the `(main)` then I get both sidebar and aside but I only want the sidebar. What do? // layout component (main) js <div className=" flex"> {user && <Sidebar />} <div className="flex-1 ">{children}</div> {user && <Aside />} </div> for profile and login it is working as expected

joulev

2024-06-22T12:58:12.864Z

app/
  (with-sidebar)/
    layout.tsx # <- sidebar here
    (with-aside)/
      page.tsx
      layout.tsx # <- aside here
      and so on...
    messages/
      page.tsx
  profile/
     page.tsx
  layout.tsx

btw are you sure you want to have a layout.tsx for each page.tsx? that is not required.

RexOP

2024-06-22T19:55:29.766Z

YES I am able to solve the issue using this approach.

@joulev sh app/ (with-sidebar)/ layout.tsx # <- sidebar here (with-aside)/ page.tsx layout.tsx # <- aside here and so on... messages/ page.tsx profile/ page.tsx layout.tsx btw are you sure you want to have a `layout.tsx` for each `page.tsx`? that is not required.

RexOP

2024-06-22T19:56:42.727Z

No I didn't know about the layout

Thanks for mentioning I will remove