npm package: @ppwcode/ng-wireframe
Description: This library provides a wireframe for Angular applications.
Latest version: 21.4.1

# NgWireframe

This library provides a wireframe for Angular applications.

## Usage

### Theming

The following CSS variables are available for theming. Just add them to the `body` selector.

#### ppw-left-sidenav

| Variable name                                                  | Extra info                                                                                                                                            |
| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| `--ppw-sidenav-close-button-color`                             |                                                                                                                                                       |
| `--ppw-sidenav-navigation-item-child-margin`                   | The default margin to apply to children have a collapsible navigation item.                                                                           |
| `--ppw-sidenav-navigation-item-hover-background-color`         |                                                                                                                                                       |
| `--ppw-sidenav-navigation-item-icon-color`                     |                                                                                                                                                       |
| `--ppw-sidenav-navigation-item-icon-font-size`                 |                                                                                                                                                       |
| `--ppw-sidenav-navigation-item-margin-left`                    | The default margin of a navigation item. The greater the margin, the more space between two navigation items.                                         |
| `--ppw-sidenav-navigation-item-radius`                         | The border radius applied to the navigation items, visible on hover.                                                                                  |
| `--ppw-sidenav-navigation-item-text-color`                     |                                                                                                                                                       |
| `--ppw-sidenav-navigation-item-text-font-size`                 |                                                                                                                                                       |
| `--ppw-sidenav-navigation-item-text-font-weight`               |                                                                                                                                                       |
| `--ppw-sidenav-navigation-item-children-wrapper-background`    |                                                                                                                                                       |
| `--ppw-sidenav-navigation-item-children-wrapper-border`        |                                                                                                                                                       |
| `--ppw-sidenav-navigation-item-children-wrapper-border-radius` |                                                                                                                                                       |
| `--ppw-sidenav-navigation-item-children-wrapper-margin`        |                                                                                                                                                       |
| `--ppw-sidenav-navigation-item-children-wrapper-padding`       |                                                                                                                                                       |
| `--ppw-sidenav-navigation-item-external-icon-color`            | The color for the icon indicating that the navigation item links to an external link. By default, this is the same as the navigation item text color. |

#### ppw-toolbar

| Variable name                           | Extra info |
| --------------------------------------- | ---------- |
| `--ppw-toolbar-border-bottom`           |            |
| `--ppw-toolbar-box-shadow`              |            |
| `--ppw-toolbar-button-background`       |            |
| `--ppw-toolbar-button-hover-background` |            |
| `--ppw-toolbar-button-hover-text-color` |            |
| `--ppw-toolbar-button-padding`          |            |
| `--ppw-toolbar-page-title-font-size`    |            |
| `--ppw-toolbar-page-title-padding`      |            |
| `--ppw-toolbar-page-title-text-color`   |            |

#### ppw-wireframe

| Variable name                       | Extra info |
| ----------------------------------- | ---------- |
| `--ppw-app-wireframe-drawer-width`  |            |
| `--ppw-app-wireframe-drawer-border` |            |
| `--ppw-page-container-background`   |            |
| `--ppw-sidenav-background-color`    |            |

### Wireframe

The wireframe places an application layout with responsive left navigation and a toolbar on your web page.
You can hide the wireframe by adding a flag in the route configuration - In data add the `'showWireframe: false'` flag - If this flag is not added it will by default be true and show the wireframe

#### Parameters

-   navigationItems: An array of `NavigationItem` objects.
-   sidebarOptions: The options for the sidebar.
-   toolbarHeightPx: The height of the toolbar in pixels.
-   hideSidenavWhenNoNavigationItems: If true, the sidenav will be hidden when there are no navigation items.
-   showBreadcrumb: If true, the breadcrumb will be shown.

#### Content

Content can be added in 5 places:

-   The left side of the toolbar: `ppw-toolbar-left-content`
-   The right side of the toolbar: `ppw-toolbar-right-content`
-   Above the navigation menu items: `ppw-sidebar-top-content`
-   At the bottom of the drawer: `ppw-sidebar-bottom-content`
-   The breadcrumb home link: `ppw-breadcrumb-home`

Complete example:

    <ppw-wireframe [navigationItems]="getNavigationItems()" [sidebarOptions]="sidebarOptions" [toolbarHeightPx]="60" [hideSidenavWhenNoNavigationItems]="true" [showBreadcrumb]="true">
        <ng-container ppw-toolbar-left-content><img
                class="toolbar-left-logo"
                ngSrc="{{ toolbarLogoUrl() }}"
                alt="Logo"
                height="{{ toolbarLogoHeight() }}"
                width="{{ toolbarLogoWidth() }}"
                priority="eager"
        /></ng-container>
        <ng-container ppw-toolbar-right-content><mat-icon>person</mat-icon></ng-container>
        <ng-container ppw-sidebar-top-content></ng-container>
        <ng-container ppw-sidebar-bottom-content><div class="version-info"><div>v0.0.2</div></div></ng-container>
        <ng-container ppw-breadcrumb-home><a routerLink="/" class="ppw-home-page-breadcrumb">Go Home</a></ng-container>
    </ppw-wireframe>

#### Logo

A logo can be added to the sidebar using the `sidebarOptions`.

#### Navigation items

Navigation links can be added using `navigationItems`.