Components chevron_right Sidenav

GitHub

Basic Usage

 
<PaperSidenavContainer @class="inner-sidenav">

  <PaperSidenav @class="md-whiteframe-z2" @name="left" @open={{leftSideBarOpen}} @onToggle={{action (mut leftSideBarOpen)}}>
    <PaperToolbar as |toolbar|>
      <toolbar.tools>Left Sidenav</toolbar.tools>
    </PaperToolbar>
    <PaperContent @padding={{true}}>
      Çup?
    </PaperContent>
  </PaperSidenav>

  <PaperCardContent @class="flex">
    <div class="layout-fill layout-align-start-center layout-column" style="height: 500px">
      <p>
        The left sidenav will "lock open" on a medium (>=960px wide) device.
        The right sidenav never "locks open" because we set <code>lockedOpen=false</code>.
      </p>
      <p>
        Left sidenav is <strong>{{if leftSideBarOpen "opened" "closed"}}</strong>.
      </p>
      <p>
        Right sidenav is <strong>{{if rightSideBarOpen "opened" "closed"}}</strong>.
      </p>

      <PaperSidenavToggle @name="left" as |toggleAction|>
        <PaperButton @raised={{true}} @classNames="hide-gt-sm" @onClick={{action toggleAction}}>
          Toggle left sidenav
        </PaperButton>
      </PaperSidenavToggle>

      <PaperSidenavToggle @name="right" as |toggleAction|>
        <PaperButton @raised={{true}} @onClick={{action toggleAction}}>
          Toggle right sidenav
        </PaperButton>
      </PaperSidenavToggle>

    </div>
  </PaperCardContent>

  <PaperSidenav @class="md-whiteframe-z2" @name="right" @position="right" @open={{rightSideBarOpen}} @lockedOpen={{false}} @onToggle={{action (mut rightSideBarOpen)}}>
    <PaperToolbar as |toolbar|>
      <toolbar.tools>Right Sidenav</toolbar.tools>
    </PaperToolbar>
    <PaperContent @padding={{true}}>
      Çup? I'm on the right side.
    </PaperContent>
  </PaperSidenav>

</PaperSidenavContainer>
Left Sidenav
 Çup?

The left sidenav will "lock open" on a medium (>=960px wide) device. The right sidenav never "locks open" because we set lockedOpen=false.

Left sidenav is closed.

Right sidenav is closed.

Right Sidenav
 Çup? I'm on the right side.

Persistent Sidenav

 
<PaperSidenavContainer @class="inner-sidenav">

  <PaperSidenav @class="md-whiteframe-z2" @name="left2" @open={{leftSideBarOpen2}} @lockedOpen={{leftSideBarLockedOpen}} @onToggle={{action (mut leftSideBarOpen2)}}>
    <PaperToolbar as |toolbar|>
      <toolbar.tools>Left Sidenav</toolbar.tools>
    </PaperToolbar>
    <PaperContent @padding={{true}}>
      Çup?
    </PaperContent>
  </PaperSidenav>

  <PaperCardContent @class="flex">
    <div class="layout-fill layout-align-start-center layout-column" style="height: 500px">
      <p>
        Another way of using the sidenav is to toggle the <code>lockedOpen</code> state.
        This corresponds to the "persistent sidenav" pattern in the material spec.
      </p>
      <p>
        Left sidenav is <strong>{{if leftSideBarLockedOpen "locked" "unlocked"}}</strong>.
      </p>

      <PaperButton @raised={{true}} @onClick={{action "toggle" "leftSideBarLockedOpen"}}>
        {{if leftSideBarLockedOpen "Unlock" "Lock"}} left sidenav
      </PaperButton>

    </div>
  </PaperCardContent>

</PaperSidenavContainer>
Left Sidenav
 Çup?

Another way of using the sidenav is to toggle the lockedOpen state. This corresponds to the "persistent sidenav" pattern in the material spec.

Left sidenav is unlocked.

Usage

Option Type Description
closeOnClick boolean If true the sidenav closes when a click event is triggered. Prevent bubbling in click events you don't want this to happen or use false. Defaults to true.
lockedOpen matchMedia expression when this expression evauluates to true, the sidenav "locks open".
open boolean Specifies if the sidenav is opened or closed. Defaults to false.
position 'left' | 'right' Pass in the string 'left' or 'right' to place the sidenav accordingly.
Actions
onToggle action An action to be executed when the sidenav is toggled, e.g. by when closeOnClick is true and a click happened or by using the close method on the service. This action gets a parameter that specifies wether this sidenav is opened or closed.