Skip to main content
← All notes
Building

The portal layout wraps every page in the same shell

softwareaccessibility

Every portal page — dashboard, projects, sessions, invoices, bookings, goals, settings — renders inside the same layout component. The PortalLayout is an async server component that checks authentication first. If currentUser returns nothing, the redirect fires before any child page even attempts to render. If the user is authenticated, the layout renders three structural layers around the page content. The first layer is a sticky top navigation bar that mirrors the ServiceNav breadcrumb pattern from the public site. The James Music logo on the left links home. A slash separator and the word Portal in the accent colour link to the dashboard. On the right, a line of text shows who is signed in — first name if available, email address if not, with a fallback to Client. The second layer is a horizontal tab bar with six links — Dashboard, Projects, Sessions, Invoices, Bookings, Goals. The tabs sit in a scrollable container with hidden scrollbars so on mobile you can swipe through them without a visible scroll track. Every tab link has a 44-pixel minimum height and rounded hover state. The third layer is the main content area, constrained to 900 pixels wide with horizontal padding. Below the content sits a footer with the logo, Privacy, and Terms links. The metadata sets robots to noindex nofollow because the portal is authenticated content that should never appear in search results. The layout does not know which page it is wrapping. It provides the shell — authentication, navigation, structure, footer — and the page fills in the content. One layout, fifteen portal routes, zero duplicated navigation code.

Comments coming soon

Sign in with TikTok to leave a comment. Coming soon.