3. Layout System

Layout

3.1. Overview

The app has three layouts: default, empty, and error.

3.2. Layout Files

frontend/layouts/
├── default.vue           # Main app layout with navigation
├── empty.vue             # Simple layout for standalone pages
└── error.vue             # Error page layout

3.3. Default Layout

Main application layout with navigation panels:

<template>
  <v-app>
    <div class="main-container">
      <!-- Left Panel + Content -->
      <div class="upper-section">
        <div class="left-panel">
          <left-pane />
        </div>
        <div class="content-panel">
          <Nuxt />  <!-- Page content -->
        </div>
      </div>

      <!-- Bottom Navigation -->
      <div class="lower-section">
        <navigation />
      </div>
    </div>
  </v-app>
</template>

Components: - Left Panel: Topic navigation and menu - Content Panel: Page content area, displayed based on the page content (model or other components) - Navigation: Bottom navigation bar

Used by: Content pages, model pages, video pages

3.4. Empty Layout

Simple layout without navigation:

<template>
  <Nuxt/>
</template>

Used by: Landing page, about page, error pages

3.5. Error Layout

Handles application errors:

<template>
  <v-app dark>
    <div class="show-error">
      <h1 v-if="error.statusCode === 404">Page not found</h1>
      <h1 v-else>An error occurred</h1>
      <NuxtLink to="/">Go home</NuxtLink>
    </div>
  </v-app>
</template>

3.6. Layout Usage

Pages specify layout with layout property:

// Default layout (with navigation)
export default {
  layout: 'default'
}

// Empty layout (no navigation)
export default {
  layout: 'empty'
}

Rules: - No layout specified → Uses default layout - `layout: ‘empty’` → No navigation panels - Error pages → Automatically use error layout

3.7. Responsive Features

Desktop: Side-by-side panels
Mobile: Stacked layout
Panel height: Automatically adjusts to screen size
Fullscreen: F11 key support

3.8. Key Points

Default layout = Navigation + Content
Empty layout = Content only
Error layout = Error handling
Responsive = Works on all screen sizes
Easy to use = Just add layout: ‘layoutName’ to pages