App Shell | astryx-vue

Content

Usage

AppShell is the page frame. The default slot is the page content. topNav, sideNav, banner, and mobileNav are named slots.

vue

<script setup lang="ts">
import { AppShell } from '@astryx-vue/core/AppShell'
import { SideNav, SideNavItem } from '@astryx-vue/core/SideNav'
</script>

<template>
  <AppShell :content-padding="6">
    <template #sideNav>
      <SideNav>
        <SideNavItem href="#orders" is-selected label="Orders" />
      </SideNav>
    </template>
    <p>Orders</p>
  </AppShell>
</template>

variant is wash, surface, section, or elevated (the default). contentPadding is a spacing step for the content region. height is fill or auto. fill uses 100dvh; an inline height: 100% overrides it when the shell sits in a sized preview.

mobileNav is false or { breakpoint, isOpen, hasToggle }. The default breakpoint is md (768px). Below the breakpoint the side nav moves into a drawer. A top nav inside the shell uses that drawer instead of opening one of its own. v-model:mobile-nav-open controls the drawer, and the component emits mobileNavOpenChange.

A skip link points at #astryx-app-shell-main. The main region is a div with role="main" and tabindex="-1". With variant="elevated" and both a top nav and a side nav on a wide viewport, the content sits on a rounded backdrop.

useAppShellMobile reads the nearest shell. Outside a shell, or when mobile nav is off, isMobile and isMobileNavEnabled are false and the open and close methods do nothing.

Anatomy

Element	Description
Page shell	Outermost application frame that owns page-level navigation, responsive shell behavior, and the main content landmark.
Skip link	First focusable element on the page. Visually hidden until focused, then moves focus to the main content area.
Banner	The banner slot, for system-wide announcements. Renders above the top nav, inside the banner landmark.
Top navigation	The topNav slot, typically TopNav. Below the mobile breakpoint it becomes a compact bar carrying the nav toggle.
Side navigation	The sideNav slot, typically SideNav. Inline above the breakpoint, moved into the mobile drawer below it.
Main content	The default slot, rendered in the main landmark. Scrolls internally when height is fill, and with the page when it is auto.
Mobile nav drawer	Generated below the breakpoint from the nav slots unless mobileNav disables or replaces it. A modal dialog: it traps focus and returns focus to the toggle on close.

Best practices

Guidance	Practices
Do	Put application navigation in the topNav and sideNav slots. Put page regions in Layout.
Do	Give the side nav a heading so the mobile drawer has a name.
Don't	Open a second drawer from TopNav while it is inside an AppShell. The shell already owns that drawer.
Don't	Call useAppShellMobile and assume a shell is present. Check isMobileNavEnabled.