Next.js Discord

Discord Forum

Parallel Routing? Architecture Question?

Unanswered
Persian posted this in #help-forum
Open in Discord
PersianOP
I have a general architectural question: My app is a SPA manages "Projects" and "Users" by now. it should look a little bit like a mail client (see example in https://ui.shadcn.com/blocks/sidebar).
So on the left side (1. Navbar) there are menuitems for /dashboard ,/dashboard/project, /dashboard/user
the 2. navbar should contain then a list of projects or users. if i click on one of them, the contentarea shows the respective item.
But my general question is - how would you organize your code, especially with the second sidebar.
The Code looks a little bit like this:
    <html lang="en" className={`${geist.variable}`}>
      <body>
        <TRPCReactProvider>
          <SidebarProvider>
            <Sidebar >
              <MainSidebar />
              <ProjectSidebar /> or <UsersSidebar />
            </Sidebar>
            <SidebarInset>
              <DashboardContent /> or <ProjectContent id={id} /> or <UsersContent id={id} />
            </SidebarInset>
          </SidebarProvider>
        </TRPCReactProvider>
      </body>
    </html>

Im thinking a bit of parallel routing but how would you do it in general?

2 Replies

PersianOP
my app project structure looks now like this (see pic)
this is the layout.tsx 
"use client";

import NavigationLinks from "@/components/nav";
import { usePathname } from "next/navigation";
import React from "react";

type RootLayoutProps = Readonly<{
  children: React.ReactNode;
  nav: React.ReactNode;
}>;

export default function RootLayout({ children, nav }: RootLayoutProps) {
  const pathname = usePathname();

  return (
    <>
      <div className="p-2 font-semibold text-gray-700">d layout {pathname}</div>
      <div className="flex gap-4">
        <aside className="flex w-1/4 gap-4 rounded bg-pink-300 p-3">
          <NavigationLinks currentPath={pathname} />
          <div className="flex-1 rounded bg-amber-200 p-3">{nav}</div>
        </aside>
        <main className="flex-1">{children}</main>
      </div>
    </>
  );
}


this is @nav/page.tsx (in the d/@nav there are no links)
import Link from "next/link";
import React from "react";

const page = () => {
  return (
    <div className="flex-1 rounded bg-teal-300">
      <div className="flex flex-col">
        <Link href="/d/user/1">User 1</Link>
        <Link href="/d/user/2">User 2</Link>
      </div>
    </div>
  );
};

export default page;
PersianOP
in the end it should look like this. project and user should change the "def nav" - but it doesnt