upp-side-menu

A reusable side menu composition widget for application navigation drawers. It provides a shell plus slot components to structure profile/header content, grouped sections, and clickable actions.

Widget Set

The side menu is split into small widgets so each concern stays isolated:

Widget	Selector	Responsibility
Shell	upp-side-menu	Layout container (header + scrollable content)
Header slot	upp-side-menu-header	Projected header block (avatar, title, toggle, etc.)
Header toggle	upp-side-menu-header-toggle	Optional icon button inside the header
Content slot	upp-side-menu-content	Projected body that holds all sections
Section	upp-side-menu-section	Group of related actions with optional title
Action	upp-side-menu-action	Single clickable menu entry

This mirrors the lateral-menu migration from v3 and keeps business logic in feature components, not in the widget layer.

When to Use

Use upp-side-menu inside upp-application-menu when you need a visual menu layout that is reusable across features. Keep business logic outside this widget and handle events from upp-side-menu-action.

Composition Pattern

The common structure is:

1. upp-side-menu
2. upp-side-menu-header (profile and optional toggle)
3. upp-side-menu-content
4. One or more upp-side-menu-section
5. Multiple upp-side-menu-action per section

This allows you to split navigation sections such as "choose view" and "other actions" while keeping a single visual container.

Demo

Source Code

HTML

<div class="menu-demo-wrapper">
    <upp-side-menu>
        <upp-side-menu-header>
            <div class="side-menu-profile">
                <img class="avatar" src="assets/image/profile.png" alt="demo user">
                <div class="text">
                    <p class="title">Demo User</p>
                    <p class="subtitle">Demo Place</p>
                </div>
                <upp-side-menu-header-toggle icon="reorder-three-outline"></upp-side-menu-header-toggle>
            </div>
        </upp-side-menu-header>

        <upp-side-menu-content>
            <upp-side-menu-section title="Navigation">
                <upp-side-menu-action icon="restaurant" label="Orders"></upp-side-menu-action>
                <upp-side-menu-action icon="wine-outline" label="Products"></upp-side-menu-action>
                <upp-side-menu-action icon="flower-outline" label="Offers"></upp-side-menu-action>
            </upp-side-menu-section>
        </upp-side-menu-content>
    </upp-side-menu>
</div>

TypeScript

import { Component } from '@angular/core';
import { ChangeDetectionStrategy } from '@angular/core';

@Component({
    selector: 'demo-upp-side-menu',
    templateUrl: './demo-upp-side-menu.html',
    styleUrls: ['../demo-common.scss', './demo-upp-side-menu.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class DemoUppSideMenuComponent {
    selected = 'products';

    OnAction(action: string){
        this.selected = action;
    }
}

SCSS

:host {
    display: block;
    padding: 16px;
}

.menu-demo-wrapper {
    height: 500px;
    max-width: 360px;
    border: 1px solid var(--ion-color-light);
    border-radius: 8px;
    overflow: hidden;
}

API Reference

upp-side-menu

Main shell container that renders header and scrollable content areas.

No inputs or outputs.

upp-side-menu-header

Header slot wrapper.

No inputs or outputs.

upp-side-menu-header-toggle

Optional icon button designed for header controls.

Property	Type	Default	Description
icon	string	'menu-outline'	Ionic icon name shown inside the toggle button.
color	string	'medium'	Ionic color token used by the toggle button/icon.
disabled	boolean	false	Disables click interaction when true.

Event	Payload	Description
Toggled	MouseEvent	Emitted when the toggle button is clicked.

upp-side-menu-content

Content slot wrapper.

No inputs or outputs.

upp-side-menu-section

Groups related menu actions with an optional section title.

Property	Type	Default	Description
title	string | null	null	Optional section title shown above projected actions.

upp-side-menu-action

Clickable action row for menu items.

Property	Type	Default	Description
icon	string | null	null	Optional icon shown at the start of the action row.
iconColor	string | null	null	Ionic color for the icon. If labelColor is not provided, this color is also applied to the label text.
iconSlot	'start' | 'end'	'start'	Slot position for the icon inside the action row.
labelColor	string | null	null	Explicit Ionic color for the label text.
label	string	''	Action text label.
disabled	boolean	false	Disables click interaction when true.
active	boolean	false	Whether the action is currently active/selected.
activeColor	string	'light'	Row color applied when active is true.
lines	'none' | 'full'	'none'	Ionic item line style.

Event	Payload	Description
Clicked	MouseEvent	Emitted when the action row is clicked.

Color Behavior (v3 parity)

• If you pass only iconColor, both icon and label use that color.
• If you pass both iconColor and labelColor, label uses labelColor.
• This is intended to match the visual emphasis pattern from the legacy lateral menu.