<template>
  <v-app id="inspire">
    <template v-if="!$vuetify.rtl">
      <!-- <v-navigation-drawer v-model="drawerRight" app right clipped :width="$vuetify.breakpoint.width/3" bottom>
        <v-list dense>
          <v-list-item @click.stop="right = !right">
            <v-list-item-action>
              <v-icon>mdi-exit-to-app</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Open Temporary Drawer</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>
      </v-navigation-drawer>-->

      <!-- <keep-alive>
        <router-view name="edit_worklist"></router-view>
      </keep-alive>-->

      <v-app-bar app clipped-right color="teal lighten-3" dark>
        <v-toolbar-title class="red--text">Karname</v-toolbar-title>
        <!-- <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon> -->
        <v-spacer></v-spacer>
        <!-- <v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight"></v-app-bar-nav-icon> -->
      </v-app-bar>

      <!-- <v-navigation-drawer v-model="drawer" app>
        <v-list dense>
          <v-list-item @click.stop="left = !left">
            <v-list-item-action>
              <v-icon>mdi-exit-to-app</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Open Temporary Drawer</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>left
      </v-navigation-drawer>-->
    </template>

    <!-- <template v-if="$vuetify.rtl">
      <v-navigation-drawer v-model="drawer" app clipped>
        <v-list dense>
          <v-list-item @click.stop="left = !left">
            <v-list-item-action>
              <v-icon>mdi-exit-to-app</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Open Temporary Drawer</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>left
      </v-navigation-drawer>

      <v-app-bar app clipped-left color="teal lighten-3" dark>
        <v-app-bar-nav-icon @click.stop="drawerRight = !drawerRight"></v-app-bar-nav-icon>
        <v-spacer></v-spacer>
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <v-toolbar-title>Toolbar</v-toolbar-title>
      </v-app-bar>

      <v-navigation-drawer v-model="drawerRight" app right>
        <v-list dense>
          <v-list-item @click.stop="right = !right">
            <v-list-item-action>
              <v-icon>mdi-exit-to-app</v-icon>
            </v-list-item-action>
            <v-list-item-content>
              <v-list-item-title>Open Temporary Drawer</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list>right
      </v-navigation-drawer>
    </template>-->

    <v-navigation-drawer v-model="left" fixed temporary></v-navigation-drawer>
    
      <v-content>
        <router-view></router-view>
      </v-content>
    

    <v-navigation-drawer v-model="right" fixed right temporary></v-navigation-drawer>

    <app-footer></app-footer>
  </v-app>
</template>

<script>
import { Fragment } from "vue-fragment";
import AppFooter from "../components/AppFooter.vue";
export default {
  components: {
    "app-footer": AppFooter,
    fragment: Fragment
  },
  props: {
    source: String
  },
  data: () => ({
    drawer: null,
    drawerRight: null,
    right: false,
    left: false
  })
};
</script>