Part 2: The Layout Shell ​

With the entry point in place we can scaffold the layout.

Fixed viewport shell ​

<template>
  <div class="layout">
    <AppHeader />
    <div class="layout-body">
      <AppSidebar />
      <main class="content-area">
        <Content />
      </main>
    </div>
    <StatusLine />
  </div>
</template>

The outer .layout is height: 100dvh; overflow: hidden so the sidebar and content scroll independently.

Next up: styling with SCSS and IBM Plex fonts.