## Usage

The `mdc-drawer` component implements permanent, persistent, and temporary drawers.
By default the drawer component is responsive and will switch from temporary to persistent design according to viewport width.

```html
<mdc-drawer v-model="open">
  <mdc-drawer-list>
    <mdc-drawer-item start-icon="inbox">Inbox</mdc-drawer-item>
    <mdc-drawer-item start-icon="send">Sent Mail</mdc-drawer-item>
    <mdc-drawer-item start-icon="drafts">Drafts</mdc-drawer-item>
  </mdc-drawer-list>
</mdc-drawer>
```

```javascript
// ...
methods: {
  toggle() {
    this.open = !this.open;
  }
},
```

> For proper positioning of the drawer, use the `mdc-layout-app` component.

```html
<mdc-layout-app>
  <mdc-toolbar slot="toolbar" fixed>
    <mdc-toolbar-row>
      <mdc-toolbar-section align-start >
        <mdc-toolbar-menu-icon event="toggle-drawer"></mdc-toolbar-menu-icon>
        <mdc-toolbar-title>Drawer Example</mdc-toolbar-title>
      </mdc-toolbar-section>
    </mdc-toolbar-row>
  </mdc-toolbar>
  <mdc-drawer slot="drawer" toggle-on="toggle-drawer">
    <mdc-drawer-list>
        <mdc-drawer-item start-icon="inbox">Inbox</mdc-drawer-item>
        <mdc-drawer-item start-icon="send">Sent Mail</mdc-drawer-item>
        <mdc-drawer-item start-icon="drafts">Drafts</mdc-drawer-item>
    </mdc-drawer-list>
  </mdc-drawer>
  <main class="content" >
  </main>
</mdc-layout-app>
```

### Drawer

| prop               | Type    | Default   | Description                                        |
| ------------------ | ------- | --------- | -------------------------------------------------- |
| `drawer-type`      | String  | undefined | 'temporary', 'persistent' or 'permanent' (\*)      |
| `permanent`        | Boolean | undefined | shorthand for drawer-type="permanent" (\*)         |
| `persistent`       | Boolean | undefined | shorthand for drawer-type="persistent" (\*)        |
| `temporary`        | Boolean | undefined | shorthand for drawer-type="temporary" (\*)         |
| `toolbar-spacer`   | Boolean | undefined | add a toolbar spacer                               |
| `open`             | Boolean | false     | optional v-model when true opens drawer            |
| `toggle-on`        | String  | undefined | optional toggle event to listen on                 |
| `toggle-on-source` | Object  | vm.$root  | optional toggle event source, defaults to root bus |
| `open-on`          | String  | undefined | optional open event to listen on                   |
| `open-on-source`   | Object  | vm.$root  | optional open event source, defaults to root bus   |
| `close-on`         | String  | undefined | optional close event to listen on                  |
| `close-on-source`  | Object  | vm.$root  | optional close event source, defaults to root bus  |

> (\*) drawer is responsive if `drawer-type` undefined: temporary on mobile breakpoint and persistent otherwise.

| event         | args    | Description                                             |
| ------------- | ------- | ------------------------------------------------------- |
| `@change`     | Boolean | notify v-model/listeners that drawer state has changed. |
| `@open`       |         | triggered on drawer open                                |
| `@close`      |         | triggered on drawer close                               |
| `@vma:layout` | Boolean | notify listeners that screen layout has changed.        |

### Drawer Header

| prop         | Type    | Default   | Description                              |
| ------------ | ------- | --------- | ---------------------------------------- |
| `permanent`  | Boolean | undefined | show only if drawer is permanent (\*\*)  |
| `persistent` | Boolean | undefined | show only if drawer is persistent (\*\*) |
| `temporary`  | Boolean | undefined | show only if drawer is temporary (\*\*)  |

> (\*\*) specifies whether or not the header is shown for responsive drawer

### Drawer Items

| prop                 | Type           | Default                  | Description                                                            |
| -------------------- | -------------- | ------------------------ | ---------------------------------------------------------------------- |
| `start-icon`         | String         | undefined                | material start icon                                                    |
| `temporary-close`    | Boolean        | true                     | whether temporary drawer closes on click                               |
| `event`              | String         | undefined                | optional event to emit on click                                        |
| `event-target`       | Object         | vm.$root                 | optional event target, defaults to root bus                            |
| `event-args`         | Array          | []                       | optional event args                                                    |
| `to`                 | String, Object | undefined                | router-link property _(\*)_                                            |
| `replace`            | Boolean        | false                    | router-link property _(\*)_                                            |
| `append`             | Boolean        | false                    | router-link property _(\*)_                                            |
| `exact`              | Boolean        | false                    | router-link property _(\*)_                                            |
| `active-class`       | String         | router-link-active       | router-link property _(\*)_                                            |
| `exact-active-class` | String         | router-link-exact-active | router-link property _(\*)_                                            |
| `activated`          | Boolean        | undefined                | whether this item is selected (not needed if router-link mode is used) |

> _(\*)_ Requires [vue-router](https://router.vuejs.org)
> If the `to` property is defined, the item behaves as a
> [router-link](https://router.vuejs.org/en/api/router-link.html)

### Item usage

* A simple link

```html
  <mdc-drawer-item href="#">Inbox</mdc-drawer-item>
```

* With vue-router

```html
  <mdc-drawer-item  to="/path">Inbox</mdc-drawer-item>
  <mdc-drawer-item  :to='folder' append >Inbox</mdc-drawer-item>
```

> Customize the active links style with vue-router active or exact-active classes:

```css
.mdc-drawer-item.router-link-exact-active {
  color: red;
}
```

* Trigger an event

```html
  <mdc-drawer-item event='my-event'>Inbox</mdc-drawer-item>
```

* Click handler

```html
  <mdc-drawer-item @click='handler'>Inbox</mdc-drawer-item>
```

#### Start Detail

```html
<mdc-drawer>
  <mdc-drawer-list>
    <mdc-drawer-item start-icon="inbox">Inbox</mdc-drawer-item>
    <mdc-drawer-item start-icon="send">Sent Mail</mdc-drawer-item>
    <mdc-drawer-item start-icon="drafts">Drafts</mdc-drawer-item>
    <mdc-drawer-divider />
    <mdc-drawer-item start-icon="email">All mail</mdc-drawer-item>
    <mdc-drawer-item start-icon="delete">Trash</mdc-drawer-item>
    <mdc-drawer-item start-icon="report">Spam</mdc-drawer-item>
  </mdc-drawer-list>
</mdc-drawer>
```

> to override start-icon detail, use `start-detail` named slot:

```html
<mdc-drawer-item>
  <mdc-icon slot='start-detail' class="fa fa-home"></mdc-icon>
  {{ Text }}
</mdc-drawer-item>
```

### Reference

* <https://material.io/components/web/catalog/drawers>
