<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-left 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 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-navigation-drawer v-model="drawer" app clipped>
        <v-list nav dense>
          <v-list-item-group v-model="item" color="primary">
            <v-list-item v-for="(item, i) in items" :key="i" :to="item.url">
              <!-- <v-list-item-icon>
                <v-icon v-text="item.icon"></v-icon>
              </v-list-item-icon>-->

              <v-list-item-content>
                <v-list-item-title v-text="item.text"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </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>
      <transition name="fade" mode="out-in">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </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,
    item: 0,
    items: [
      { text: "Worklist", url: "/main/worklist", icon: "mdi-folder" },
      { text: "HISLink", url: "/main/hislink", icon: "mdi-account-multiple" },
      { text: "DeviceMap", url: "/main/devicemap", icon: "mdi-star" },
      { text: "Client", url: "/main/client" }
    ]
  })
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition-duration: 0.3s;
  transition-property: opacity;
  transition-timing-function: ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>