<template>
  <div class="page-container md-layout-column" id="dashboard-container">
    <md-toolbar class="md-primary">

      <md-button class="md-icon-button" @click="showNavigation = true">
        <md-icon>menu</md-icon>
      </md-button>
      <span class="md-title">VideON</span>

    </md-toolbar>

    <md-drawer :md-active.sync="showNavigation" md-swipeable>
      <md-toolbar class="md-transparent" md-elevation="0">
        <span class="md-title">VideON</span>
      </md-toolbar>

      <md-list>
        <md-list-item>
          <md-avatar class="md-avatar-icon">J</md-avatar>
          <span class="md-list-item-text">Joska</span>
        </md-list-item>

        <md-list-item>
          <md-button class="md-raised md-accent">Logout</md-button>
        </md-list-item>

      </md-list>

    </md-drawer>

    <md-content id="diagram-container">
      <ejs-diagram id="diagram"  width='100%' height='100%'></ejs-diagram>
    </md-content>

  </div>
</template>

<script>
export default {
  name: 'Dashboard',
  components: {},
  data: () => ({
    showNavigation: false
  })

}
</script>

<style scoped>
#dashboard-container {
  height: 100%;
}

#diagram-container {
  height: calc(100% - 64px);
}
</style>