@logo-elements/app-layout

A web component for building common application layouts.

<logo-elements-app-layout>
  <logo-elements-drawer-toggle slot="navbar touch-optimized"></logo-elements-drawer-toggle>
  <h3 slot="navbar touch-optimized">Application Name</h3>
  <logo-elements-tabs orientation="vertical" slot="drawer">
    <logo-elements-tab>
      <a href="/profile">
        <logo-elements-icon icon="leds:user"></logo-elements-icon>
        Profile
      </a>
    </logo-elements-tab>
    <logo-elements-tab>
      <a href="/contact">
        <logo-elements-icon icon="leds:phone"></logo-elements-icon>
        Contact
      </a>
    </logo-elements-tab>
  </logo-elements-tabs>
  <div>Page content</div>
</logo-elements-app-layout>

Installation

Install the component:

npm i @logo-elements/app-layout -s

Once installed, import the components in your application:

import '@logo-elements/app-layout';
import '@logo-elements/app-layout/logo-elements-drawer-toggle.js';

For more detailed information, please visit:

Logo Elements Documentation ↗