I'm trying to wrap my head around app router. So if I have a layout that's like this sidebar:

import Link from "next/link"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"

export default function DashboardLayout({
    children, // will be a page or nested layout
  }: {
    children: React.ReactNode
  }) {
    return (
      <section>
            <aside className="w-64 h-screen bg-gray-100 p-4 flex flex-col justify-between">
            <div>
                <div className="flex items-center space-x-2 mb-4">
                <LampIcon className="text-orange-500 w-6 h-6" />
                <span className="font-bold text-sm">Lantern</span>
                </div>
                <nav className="flex flex-col gap-4">
                <Link className="flex items-center space-x-2 text-gray-900 hover:bg-gray-200 p-1 rounded" href="#">
                    <HomeIcon className="w-4 h-4" />
                    <span>Home</span>
                </Link>
                <Link className="flex items-center space-x-2 text-gray-900 hover:bg-gray-200 p-1 rounded" href="#">
                    <MessagesSquareIcon className="w-4 h-4" />
                    <span>Messages</span>
                </Link>
                <Link className="flex items-center space-x-2 text-gray-900 hover:bg-gray-200 p-1 rounded" href="#">
                    <LinkIcon className="w-4 h-4" />
                    <span>Partnerships</span>
...

            </div>
            </aside>
        <nav></nav>
   
        {children}
      </section>
    )
  }

Then do I have each individual route in it's own directory? Like /dashboard as a route with it's own page.tsx file and then I'd pull that into the root page.tsx?