Primary

Primary Layout

The primary layout is the main layout used by the Turquoise Health app, consisting of a static sidebar and main content area.

The sidebar is statically positioned to allow the navigation to remain visible while the main content area scrolls. The sidebar also includes a footer that is positioned at the bottom of the sidebar regardless of the height of the page. The sidebar can include the Nav Container component to allow the navigation to scroll independently from the main content if the viewport is not tall enough to show the entire nav menu.

The main section includes a header and main content area.

Padding and margins are not hard-coded into the layout to allow for more flexibility using spacing utilities.

The direct children of the layout container use the data attribute data-grid-area to denote the top-level parts of the layout so that you can apply them to any HTML element.

The title area inside of content is optional.

Example
A primary layout with minimal content.

<div class="pv-layout-primary" style="aspect-ratio: 16/9; grid-template-columns: 25% 1fr;">
  <aside data-grid-area="sidebar" class="pv-text-inherit" style="position: static; height: auto">
    <div class="pv-inset-square">Org Switch</div>
    <div class="pv-inset-square">Navigation</div>
  </aside>
  <div data-grid-area="content">
    <header class="pv-stack pv-inset-block" data-grid-area="header">Header</header>
    <div data-grid-area="title" class="pv-stack pv-inset-inline-24">
      Title
    </div>
    <main class="pv-inset-squish pv-border-top" data-grid-area="main">Main</main>
  </div>
</div>

Collapsed Sidebar

Applying the data attribute data-collapsed to the layout container will reduce the width of the sidebar to 88px and hide the text labels of a Nav List.

Adding an optional title area

You can extend the primary layout to use an optional title area, creating a div between the header and main areas with data-grid-area="title".

Example
A primary layout with a title section.

<div class="pv-layout-primary" style="aspect-ratio: 16/9; grid-template-columns: 25% 1fr;">
  <aside data-grid-area="sidebar" class="pv-text-inherit" style="position: static; height: auto">
    <div class="pv-inset-square">Org Switch</div>
    <div class="pv-inset-square">Navigation</div>
  </aside>
  <div data-grid-area="content">
    <header class="pv-inset-block" data-grid-area="header">Header</header>
    <div class="pv-inset-square-24 pv-border-bottom" data-grid-area="title">Title</div>
    <main class="pv-inset-squish" data-grid-area="main">Main</main>
  </div>
</div>