Layout Components

Layout Components

Layout components provide structure and navigation for the application.

Application Layouts

AdminLayout

Admin-specific layout with full navigation.

Location: src/layouts/AdminLayout.vue

<template>
  <AdminLayout>
    <router-view />
  </AdminLayout>
</template>

CompanyLayout

Tenant/company-specific layout.

Location: src/layouts/CompanyLayout.vue

<template>
  <CompanyLayout>
    <router-view />
  </CompanyLayout>
</template>

WorkspaceLayout

Workspace-focused layout.

Location: src/layouts/WorkspaceLayout.vue

<template>
  <WorkspaceLayout>
    <router-view />
  </WorkspaceLayout>
</template>

Structural Components

Header

Application header with navigation and user menu.

Location: src/components/Header/

<template>
  <AppHeader
    :user="currentUser"
    @logout="handleLogout"
  />
</template>

SideBar

Navigation sidebar with menu items.

Location: src/components/SideBar/

<template>
  <SideBar
    :items="menuItems"
    :collapsed="isCollapsed"
    @toggle="toggleSidebar"
  />
</template>

Layout Patterns

Page Layout

<template>
  <div class="page-layout">
    <HeaderView title="Page Title" description="Description">
      <template #actions>
        <Button label="Action" />
      </template>
    </HeaderView>

    <div class="page-content">
      <!-- Page content -->
    </div>
  </div>
</template>

Split Layout

<template>
  <Splitter class="h-screen">
    <SplitterPanel :size="20">
      <SideBar :items="menuItems" />
    </SplitterPanel>
    <SplitterPanel :size="80">
      <router-view />
    </SplitterPanel>
  </Splitter>
</template>

Grid Layout

<template>
  <div class="grid grid-cols-12 gap-4">
    <div class="col-span-3">
      <!-- Sidebar content -->
    </div>
    <div class="col-span-9">
      <!-- Main content -->
    </div>
  </div>
</template>

PrimeVue Layout Components

Component	Usage
Splitter / SplitterPanel	Resizable panels
ScrollPanel	Scrollable content
Panel	Collapsible container
Card	Content card
Divider	Visual separator
Fieldset	Grouped content

Responsive Design

Breakpoints

Using Tailwind CSS breakpoints:

Breakpoint	Size	Class Prefix
sm	640px	sm:
md	768px	md:
lg	1024px	lg:
xl	1280px	xl:
2xl	1536px	2xl:

Example

<template>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <Card v-for="item in items" :key="item.id">
      <!-- Card content -->
    </Card>
  </div>
</template>

Related

• Layout Template
• Tailwind CSS
• PrimeVue Layout