<template>
    <v-navigation-drawer
      id="appDrawer"
      :mini-variant.sync="mini"
      fixed
      :dark="$vuetify.dark"
      app
      v-model="drawer"
      width="260"
      >

      <v-toolbar style="background:#39b982"  >
        <img v-bind:src="computeLogo" height="30" class="imgLogo" alt="ana">

        <h5 class="white--text my-3 ml-2">School Management</h5>

       <v-toolbar-title class="ml-0 pl-3" >

        </v-toolbar-title>        
      </v-toolbar>
      <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings">
        <v-list dense expand>
          <template v-for="(item, i) in menus">
              <!--group with subitems-->
              <v-list-group v-if="item.items" :key="item.name" :group="item.group" :prepend-icon="item.icon" no-action="no-action">
                <v-list-tile slot="activator" ripple="ripple">
                  <v-list-tile-content>
                    <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
                <template v-for="(subItem, i) in item.items">
                  <!--sub group-->
                  <v-list-group v-if="subItem.items" :key="subItem.name" :group="subItem.group" sub-group="sub-group">
                    <v-list-tile slot="activator" ripple="ripple">
                      <v-list-tile-content>
                        <v-list-tile-title>{{ subItem.title }}</v-list-tile-title>
                      </v-list-tile-content>
                    </v-list-tile>
                    <v-list-tile v-for="(grand, i) in subItem.children" :key="i" :to="genChildTarget(item, grand)" :href="grand.href" ripple="ripple">
                      <v-list-tile-content>
                        <v-list-tile-title>{{ grand.title }}</v-list-tile-title>
                      </v-list-tile-content>
                    </v-list-tile>
                  </v-list-group>
                  <!--child item-->
                  <v-list-tile v-else :key="i" :to="genChildTarget(item, subItem)" :href="subItem.href" :disabled="subItem.disabled" :target="subItem.target" ripple="ripple">
                    <v-list-tile-content>
                      <v-list-tile-title><span>{{ subItem.title }}</span></v-list-tile-title>
                    </v-list-tile-content>
                    <!-- <v-circle class="white--text pa-0 circle-pill" v-if="subItem.badge" color="red" disabled="disabled">{{ subItem.badge }}</v-circle> -->
                    <v-list-tile-action v-if="subItem.action">
                      <v-icon :class="[subItem.actionClass || 'success--text']">{{ subItem.action }}</v-icon>
                    </v-list-tile-action>
                  </v-list-tile>
                </template>
              </v-list-group>
              <v-subheader v-else-if="item.header" :key="i">{{ item.header }}</v-subheader>
              <v-divider v-else-if="item.divider" :key="i"></v-divider>
              <!--top-level link-->
              <v-list-tile v-else :to="!item.href ? { name: item.name } : null" :href="item.href" ripple="ripple" :disabled="item.disabled" :target="item.target" rel="noopener" :key="item.name">
                <v-list-tile-action v-if="item.icon">
                  <v-icon>{{ item.icon }}</v-icon>
                </v-list-tile-action>
                <v-list-tile-content>
                  <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                </v-list-tile-content>
                <!-- <v-circle class="white--text pa-0 chip--x-small" v-if="item.badge" :color="item.color || 'primary'" disabled="disabled">{{ item.badge }}</v-circle> -->
                <v-list-tile-action v-if="item.subAction">
                  <v-icon class="success--text">{{ item.subAction }}</v-icon>
                </v-list-tile-action>
                <!-- <v-circle class="caption blue lighten-2 white--text mx-0" v-else-if="item.chip" label="label" small="small">{{ item.chip }}</v-circle> -->
              </v-list-tile>
          </template>
        </v-list>        
      </vue-perfect-scrollbar>        
    </v-navigation-drawer>
  </template>
  <script>
  import menu from '@/api/menu';
  import VuePerfectScrollbar from 'vue-perfect-scrollbar';
  export default {
    name: 'app-drawer',
    components: {
      VuePerfectScrollbar,
    },
    props: {
      expanded: {
        type: Boolean,
        default: true
      },
    },
    data: () => ({
      mini: false,
      drawer: true,
      menus: menu,
      scrollSettings: {
        maxScrollbarLength: 160
      }    
    }),
    computed: {
      computeGroupActive () {
        return true;
      },

      computeLogo () {
        return '/static/icon.jpeg';
      },

  
      sideToolbarColor () {
        return this.$vuetify.options.extra.sideNav;
      }    
    },
    created () {
      window.getApp.$on('APP_DRAWER_TOGGLED', () => {
        this.drawer = (!this.drawer);
      });
    },
    
  
    methods: {
      genChildTarget (item, subItem) {
        if (subItem.href) return;
        if (subItem.component) {
          return {
            name: subItem.component,
          };
        }
        return { name: `${item.group}/${(subItem.name)}` };
      },
    }
  };
  </script>
  
  
  <style lang="stylus">
  // @import '../../node_modules/vuetify/src/stylus/settings/_elevations.styl';
  
  #appDrawer
    overflow: hidden
    .drawer-menu--scroll
      height: calc(100vh - 48px)
      overflow: auto

  .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
      height: 60px;
      font-size:17px;
  }
  .v-list__tile__action {
    min-width:36px;
  }
  .v-list__tile.primary--text {
      color:black !important;
      border-left: 4px solid black;
      border-radius: 4px;
  }
  @media screen and (max-width: 420px) { 
  .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {
      font-size: 14px;
  }

  .imgLogo{
    height: 22px;

    width:  20px;;

  }

  }

  </style>

  
  
  <style scoped>
  .theme--light .v-icon, .application .theme--light.v-icon {
      color: #39b982;
  }

  </style>