---
metaTitle: PageAside component | AwesCode UI
meta:
  - name: description
    content: The <AwPageAside /> component is used to render page with aside sidebar - UI Vue component for AwesCode UI.
title: PageAside
---

# AwPageAside

**Category:** Page | **Import:** Dynamic

The `AwPageAside` component is a specialized page layout wrapper that adds a persistent sidebar (aside) section to the standard `AwPage` component. It provides responsive behavior with the aside appearing as a separate column on desktop and as a card on mobile.

## Overview

`AwPageAside` provides a page layout with aside sidebar:
- Responsive aside positioning (sidebar on desktop, card on mobile)
- Sticky aside buttons at the bottom
- Pass-through support for all `AwPage` props and slots
- Desktop/mobile breakpoint customization
- Optional aside line separator
- Mobile aside can be hidden
- Bottom bar spacing awareness
- `isDesktop` prop in all slots for responsive content

## Usage

### Basic Example

```markup
<AwPageAside title="Page with Aside">
    <template #default>
        <p>Main content goes here</p>
    </template>

    <template #aside>
        <AwCard title="Sidebar">
            <p>Sidebar content</p>
        </AwCard>
    </template>
</AwPageAside>
```

### With Aside Buttons

```markup
<AwPageAside title="Edit Form">
    <template #default>
        <AwForm url="/api/submit">
            <!-- form fields -->
        </AwForm>
    </template>

    <template #aside>
        <AwCard title="Info">
            <p>Additional information</p>
        </AwCard>
    </template>

    <template #aside-buttons>
        <AwButton cta>Save</AwButton>
        <AwButton theme="outline">Cancel</AwButton>
    </template>
</AwPageAside>
```

### Custom Desktop Breakpoint

```markup
<AwPageAside
    title="Responsive Page"
    desktop-from="xl"
>
    <template #default>
        <p>Main content</p>
    </template>

    <template #aside>
        <p>Sidebar switches to desktop mode at xl breakpoint</p>
    </template>
</AwPageAside>
```

### With Line Separator

```markup
<AwPageAside
    title="Page Title"
    modifiers="line"
>
    <template #default>
        <p>Main content</p>
    </template>

    <template #aside>
        <p>Aside with vertical line separator</p>
    </template>
</AwPageAside>
```

### Hide Mobile Aside

```markup
<AwPageAside
    title="Page Title"
    hide-mobile-aside
>
    <template #default>
        <p>Main content</p>
    </template>

    <template #aside>
        <p>This aside only appears on desktop</p>
    </template>
</AwPageAside>
```

### Custom Mobile Aside

```markup
<AwPageAside title="Custom Mobile">
    <template #default>
        <p>Main content</p>
    </template>

    <template #aside="{ isDesktop }">
        <div v-if="isDesktop">
            <!-- Desktop aside layout -->
            <AwCard title="Desktop Sidebar">...</AwCard>
        </div>
        <div v-else>
            <!-- Mobile aside layout -->
            <AwAccordionFold title="More Info">...</AwAccordionFold>
        </div>
    </template>

    <template #mobile-aside="{ isDesktop }">
        <AwCard v-if="!isDesktop" class="custom-mobile-card">
            <slot name="aside" />
        </AwCard>
    </template>
</AwPageAside>
```

### Pass-Through AwPage Props

```markup
<AwPageAside
    title="Page Title"
    :breadcrumb="{ href: '/back', title: 'Back' }"
    :subnav="tabs"
    container="small"
>
    <template #buttons>
        <AwButton>Action</AwButton>
    </template>

    <template #default>
        <p>Main content</p>
    </template>

    <template #aside>
        <p>Sidebar</p>
    </template>
</AwPageAside>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| desktopFrom | Screen breakpoint for desktop layout | `String` | `false` | `'lg'` |
| modifiers | CSS modifier classes (e.g., `'line'` for separator) | `String` / `Object` | `false` | `''` |
| hideMobileAside | Hide aside section on mobile | `Boolean` | `false` | `false` |

**Breakpoint Options:** `'sm'`, `'md'`, `'lg'`, `'xl'`, `'2xl'`

**All `AwPage` props** are also supported and passed through via `v-bind="$attrs"`:
- `title` - Page title
- `breadcrumb` - Breadcrumb navigation
- `subnav` - Subnavigation tabs
- `container` - Container size
- `fullscreen` - Fullscreen mode
- etc.

See [AwPage documentation](./aw-page.md#props) for complete list.

### Slots

| Name | Description | Props | Default Slot Content |
|------|-------------|-------|---------------------|
| default | Main page content | `{ isDesktop }` | - |
| aside | Aside sidebar content | `{ isDesktop }` | - |
| aside-buttons | Buttons at bottom of aside (sticky) | - | - |
| mobile-aside | Custom mobile aside wrapper | `{ isDesktop }` | AwCard wrapper |
| bottom | Content below main content | - | - |

**Pass-through slots from AwPage:**
- `heading` - Custom page header
- `title` - Custom title content
- `buttons` - Header buttons
- `subnav` - Custom subnavigation
- `headline-breadcrumb` - Custom breadcrumb
- `after-breadcrumb` - Content after breadcrumb
- `mobile-title` - Mobile title display
- `bottom-bar` - Custom bottom bar

All slots receive `isDesktop` prop for responsive rendering.

### Events

All events from `AwPage` are passed through (e.g., `update:fullscreen`).

### Data Properties

| Name | Description | Type |
|------|-------------|------|
| hideBottomBar | Whether bottom bar is hidden (computed from AwPage) | `Boolean` |

### Computed Properties

| Name | Description |
|------|-------------|
| isDesktop | Whether current screen size is desktop (based on `desktopFrom` prop) |
| _slots | Filtered slots object excluding self-managed slots |

### Methods

| Name | Parameters | Description |
|------|------------|-------------|
| _wathcBottomBar | - | Updates hideBottomBar state from AwPage reference |

### Head

Component adds `aw-page-aside-page-body` class to `<body>` element for styling.

## Related Components

- [AwPage](./aw-page.md) - Base page component used internally
- [AwPageSingle](./aw-page-single.md) - Single column page layout
- [AwCard](../atoms/aw-card.md) - Card component used for mobile aside wrapper
- [AwButton](../molecules/aw-button.md) - Button component for aside actions

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as a page component
- Component wraps `AwPage` and passes through all props via `$attrs`
- Desktop/mobile layout switches based on `$screen[desktopFrom]` breakpoint
- On desktop, aside appears as a fixed-width sidebar on the right
- On mobile, aside appears as a card below main content (unless `hideMobileAside` is true)
- Aside buttons are sticky at the bottom on both desktop and mobile
- Bottom spacing adjusts automatically when bottom bar is present (`4rem` padding)
- Uses CSS custom property `--page-aside-buttons-bottom` for spacing control
- Component filters out `default`, `aside`, and `aside-buttons` slots before passing to AwPage
- The `modifiers` prop with value `'line'` adds `.aw-page-aside__aside--line` class
- Uses `$refs.page` to access internal AwPage component state
- Bottom bar visibility is watched in `created` and `updated` lifecycle hooks
- All pass-through slots maintain their scoped slot data plus `isDesktop` prop
- Component uses `inheritAttrs: false` to control attribute inheritance
- Body class is set via Nuxt's `head()` method for global styling

## Layout Structure

**Desktop Layout:**
```
┌─────────────────────────────────────────────┐
│ AwPage Wrapper (Main Content)               │
│ ┌─────────────────────────────────────────┐ │ ┌─────────────┐
│ │ Page Header                             │ │ │   Aside     │
│ ├─────────────────────────────────────────┤ │ │   Content   │
│ │ Main Content                            │ │ │             │
│ │                                         │ │ │             │
│ │                                         │ │ │             │
│ └─────────────────────────────────────────┘ │ ├─────────────┤
│                                             │ │   Buttons   │
└─────────────────────────────────────────────┘ └─────────────┘
```

**Mobile Layout:**
```
┌─────────────────────────────────────────────┐
│ Page Header                                 │
├─────────────────────────────────────────────┤
│ Main Content                                │
│                                             │
│                                             │
├─────────────────────────────────────────────┤
│ Mobile Aside (Card)                         │
│                                             │
├─────────────────────────────────────────────┤
│ Aside Buttons (Sticky)                      │
└─────────────────────────────────────────────┘
```