Components Api

#a-interface

This is the primary wrapping Layer around your component based application. Example Usage:

<a-interface 
             direction="row || column"             
             router.bind="router"
             bar.bind="navBar"
             aside.bind="rightAside">

</a-interface>

The AInterfaceCustomElement has an api for accessing the global navigation properties

The Idea here may be some what redundant, because we now have the Global Container.

This is however, how I used to do it in Angular.

I would set this up, because we may have an aside toggle button within the ai-aside-nav or the ai-bar-nav

#####direction row || column

• The direction property will change the outer most element's flex-direction property

#####router

• Pass the router Object in so we can toggle the views from within the ai-interface

#####aside

• The aside property will take in an Aside Object,
• Contains the configurations for the ai-nav-aside
• defaults:` {side:'right', size:'sm', open:'false', fixed:'true', header:'path/to/aside/header'}

#####bar

• The bar property is similar to aside Property, However the defaults are different
• defaults: `{size:'sm', expand:false, fixed:true, brand:'path/to/brand/view'}

#####_ai.styl

.a-interface
    position        : relative
    flex-direction  : column
    background-color: $grey.lighten-4
    flex-container()
    min-max-height(100%)
    min-max-width(100%)

    &.is-row
        flex-direction row
    &.is-column
        flex-direction column

ai-nav

Aurelia Interface Navigation components

ai-nav-bar

• The Top Dynamic Navigation bar for your application Example Usage: NOTE this is the current template. Not Final

<template>
  <import from="./ui-toggle"></import>

  <nav class="nav-bar-container" role="navigation">
    <div class="nav-bar-header header-right">

      <button type="button" 
                    class="nav-bar-toggle"
                    click.trigger="toggle()">
          <i class="mdi-navigation-menu"></i></button>

      <a class="ai-bar-brand nav-right">
         <i class="fa fa-home"></i>
        <span>${router.title}</span>
      </a>

    </div>

    <div class="nav-bar-content">
      <div id="bs-example-navbar-collapse-1"
           class="ai-collapse nav-bar-collapse ${showing ? 'open' : ''}">

        <ul class="ai-nav-actions actions-right">
          <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
            <a class="waves-effect waves-light" href.bind="row.href">${row.title}</a>
          </li>
          <ai-toggle toggle.call="aside.toggle()" icon="mdi-navigation-menu"/>
        </ul>

      </div>
    </div>
  </nav>
</template>

ai-nav-aside