<template>
    <v-navigation-drawer
      id="appDrawer"
      :mini-variant.sync="mini"

      :dark="$vuetify.dark"
      app

      fixed

      v-model="drawer"

      hide-overlay

      width="260"

      class="white--text side-bar-color"

    >

      <!-- <vue-perfect-scrollbar

        class="drawer-menu--scroll side-bar-color mt-3"
        :settings="scrollSettings"

      >-->

      <v-toolbar class="white" flat>
        <img
          v-bind:src="computeLogo"
          height="40"
          width="130"
          class="imgLogo mb-3 mt-3"
          alt="logo"
          style="margin: auto;
        display: block;"
        />
      </v-toolbar>
      <v-list dense dark>

        <template v-for="(item, i) in menus" v-if="role === 'ADMIN'">
          <!-- {{menus}} -->
          <!--group with subitems-->

          <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action>

            <v-list-tile slot="activator" ripple="ripple">
              <v-list-tile-action v-if="item.icon">
                <img :src="item.icon" width="22" alt="icons" />
              </v-list-tile-action>
              <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-action v-if="subItem.action">
                  <img
                    width="30"
                    :src="subItem.action"
                    :class="[subItem.actionClass || 'success--text']"
                  />
                </v-list-tile-action>
                <v-list-tile-content>
                  <v-list-tile-title class="body-2">
                    <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>
            </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
            ripple="ripple"
            :disabled="item.disabled"
            :target="item.target"
            rel="noopener"
            :key="item.name"
            :to="!item.href ? { name: item.name } : null"
            :href="item.href"
          >
            <!-- <a :href="item.path"> -->
            <v-list-tile-action v-if="item.icon">
              <img :src="item.icon" width="22" alt="icons" />
            </v-list-tile-action>
            <v-list-tile-content class="pt-2">
              <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> -->
              <!-- <img :src="item.icon" width="40" alt="icons" /> -->
            </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> -->
            <!-- </a> -->
          </v-list-tile>
        </template>
        <template v-for="(item, i) in menuAccount" v-if="role === 'ACCOUNTANT'">
          <!-- {{menus}} -->
          <!--group with subitems-->
          <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
            <v-list-tile slot="activator" ripple="ripple">

              <v-list-tile-action v-if="item.icon">
                <img :src="item.icon" width="22" alt="icons" />
              </v-list-tile-action>

              <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-action v-if="subItem.action">
                  <img
                    width="30"
                    :src="subItem.action"
                    :class="[subItem.actionClass || 'success--text']"
                  />
                </v-list-tile-action>
                <v-list-tile-content>
                  <v-list-tile-title class="body-2">
                    <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>
            </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
            ripple="ripple"
            :disabled="item.disabled"
            :target="item.target"
            rel="noopener"
            :key="item.name"
            :to="!item.href ? { name: item.name } : null"
            :href="item.href"
          >
            <!-- <a :href="item.path"> -->
            <v-list-tile-action v-if="item.icon">
              <img :src="item.icon" width="22" alt="icons" />
            </v-list-tile-action>
            <v-list-tile-content class="pt-2">
              <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> -->
              <!-- <img :src="item.icon" width="40" alt="icons" /> -->
            </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> -->
            <!-- </a> -->
          </v-list-tile>
        </template>
        <template v-for="(item, i) in menuLibrarian" v-if="role === 'LIBRARIAN'">
          <!-- {{menus}} -->
          <!--group with subitems-->
          <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
            <v-list-tile slot="activator" ripple="ripple">

              <v-list-tile-action v-if="item.icon">
                <img :src="item.icon" width="22" alt="icons" />
              </v-list-tile-action>

              <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-action v-if="subItem.action">
                  <img
                    width="30"
                    :src="subItem.action"
                    :class="[subItem.actionClass || 'success--text']"
                  />
                </v-list-tile-action>
                <v-list-tile-content>
                  <v-list-tile-title class="body-2">
                    <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>
            </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
            ripple="ripple"
            :disabled="item.disabled"
            :target="item.target"
            rel="noopener"
            :key="item.name"
            :to="!item.href ? { name: item.name } : null"
            :href="item.href"
          >
            <!-- <a :href="item.path"> -->
            <v-list-tile-action v-if="item.icon">
              <img :src="item.icon" width="22" alt="icons" />
            </v-list-tile-action>
            <v-list-tile-content class="pt-2">
              <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> -->
              <!-- <img :src="item.icon" width="40" alt="icons" /> -->
            </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> -->
            <!-- </a> -->
          </v-list-tile>
        </template>
        <template v-for="(item, i) in menuSchool" v-if="schoolRole === 'SUPERADMIN'">
          <!-- {{menus}} -->
          <!--group with subitems-->
          <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
            <v-list-tile slot="activator" ripple="ripple">

              <v-list-tile-action v-if="item.icon">
                <img :src="item.icon" width="22" alt="icons" />
              </v-list-tile-action>

              <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-action v-if="subItem.action">
                  <img
                    width="30"
                    :src="subItem.action"
                    :class="[subItem.actionClass || 'success--text']"
                  />
                </v-list-tile-action>
                <v-list-tile-content>
                  <v-list-tile-title class="body-2">
                    <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>
            </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
            ripple="ripple"
            :disabled="item.disabled"
            :target="item.target"
            rel="noopener"
            :key="item.name"
            :to="!item.href ? { name: item.name } : null"
            :href="item.href"
          >
            <!-- <a :href="item.path"> -->
            <v-list-tile-action v-if="item.icon">
              <img :src="item.icon" width="22" alt="icons" />
            </v-list-tile-action>
            <v-list-tile-content class="pt-2">
              <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> -->
              <!-- <img :src="item.icon" width="40" alt="icons" /> -->
            </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> -->
            <!-- </a> -->
          </v-list-tile>
        </template>
        <template v-for="(item, i) in menuTeacher" v-if="role === 'TEACHER'">
          <!-- {{menus}} -->
          <!--group with subitems-->
          <v-list-group v-if="item.items" :key="item.name" :group="item.group" no-action="no-action">
            <v-list-tile slot="activator" ripple="ripple">

              <v-list-tile-action v-if="item.icon">
                <img :src="item.icon" width="22" alt="icons" />
              </v-list-tile-action>

              <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-action v-if="subItem.action">
                  <img
                    width="30"
                    :src="subItem.action"
                    :class="[subItem.actionClass || 'success--text']"
                  />
                </v-list-tile-action>
                <v-list-tile-content>
                  <v-list-tile-title class="body-2">
                    <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>
            </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
            ripple="ripple"
            :disabled="item.disabled"
            :target="item.target"
            rel="noopener"
            :key="item.name"
            :to="!item.href ? { name: item.name } : null"
            :href="item.href"
          >
            <!-- <a :href="item.path"> -->
            <v-list-tile-action v-if="item.icon">
              <img :src="item.icon" width="22" alt="icons" />
            </v-list-tile-action>
            <v-list-tile-content class="pt-2">
              <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> -->
              <!-- <img :src="item.icon" width="40" alt="icons" /> -->
            </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> -->
            <!-- </a> -->
          </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: [],

      menuSchool: [],

      menuTeacher: [],

      menuAccount: [],
      menuLibrarian: [],

      schoolRole: "",
      role: "",

      scrollSettings: {
        maxScrollbarLength: 160

      }

    }),
    computed: {

      computeGroupActive() {

        return true;
      },

      computeLogo() {

        return "/static/icon.png";

      },

      sideToolbarColor() {

        return this.$vuetify.options.extra.sideNav;

      }

    },

    created() {

      this.schoolRole = this.$store.state.schoolRole;
      this.role = this.$store.state.role;
      this.menus = menu.adminMenu;
      this.menuSchool = menu.schoolMenu;

      this.menuTeacher = menu.teacherMenu;

      this.menuAccount = menu.accountMenu;

      this.menuLibrarian = menu.libraryMenu;

      // console.log("this.$route.name", this.$route.name);
      // if (this.$route.name === "School") {
      //   localStorage.setItem("SchoolName", this.$route.name);
      // }
      // if (this.$route.name === "Dashboard") {
      //   localStorage.setItem("AdminName", this.$route.name);
      // }
      // console.log("SN", localStorage.getItem("SchoolName"));
      // if (localStorage.getItem("SchoolName") === "School") {
      // if (this.$store.state.schoolRole === "SUPERADMIN") {
      //   console.log("rolA", this.$store.state.schoolRole);
      // if (this.$store.state.schoolRole === "SUPERADMIN") {
      // }
      //   console.log("this.menus", this.menus);
      // }
      // // }
      // // console.log("AN", localStorage.getItem("AdminName"));
      // // if (localStorage.getItem("AdminName") === "Dashboard") {
      // if (this.$store.state.role === "ADMIN") {
      //   console.log("role", this.$store.state.role);
      // else if (this.$store.state.role === "ADMIN") {
      // }
      //   // }
      // }
  
      // else if (this.$store.state.role === "LIBRARIAN") {
      //   this.menus = menu.libraryMenu;
      // } else if (this.$store.state.role === "ACCOUNTANT") {
      //   this.menus = menu.accountMenu;
      // }

      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}` };
      }

    },
    mounted() {

      if (this.$store.state.role === "ADMIN") {

        this.token = this.$store.state.token;

      }
      if (this.$store.state.schoolRole === "SUPERADMIN") {
        this.token = this.$store.schoolToken;
      }
      if (this.$store.state.role === "TEACHER") {

        this.token = this.$store.state.token;

      }
      if (this.$store.state.role === "ACCOUNTANT") {

        this.token = this.$store.state.token;

      }
      if (this.$store.state.role === "LIBRARIAN") {
        this.token = this.$store.state.token;
      }

    }
  };
  </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__group__items--no-action .v-list__tile {

    padding-left: 72px !important;

  }

  .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {

    height: 54px;

    font-size: 17px;

  }

  .v-list__tile__action {

    min-width: 36px;

  }

  // .theme--light .v-icon, .application .theme--light.v-icon {
  // color: #f1f1f1;
  // }
  .ps>.ps__scrollbar-y-rail>.ps__scrollbar-y {
    background-color: #f5f5f5;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
    width: 8px !important;
  }
  
  .ps>.ps__scrollbar-y-rail {
    width: 0px !important;
  }
  
  .ps:hover > .ps__scrollbar-y-rail:hover {
    background-color: #5f2171 !important;
    opacity: 0.9;
  }
  
  .ps > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
    width: 8px !important;
    background-color: #f5f5f5;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
  }
  
  .ps:hover > .ps__scrollbar-y-rail:hover > .ps__scrollbar-y {
    // background-color: #5f2171 !important;
    width: 8px !important;
    background-color: #f5f5f5;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
  }
  
  .v-list__tile--active {
    color: #71d9ea !important;
  }
  
  .my-1 {

    text-align: left !important;

  }
  
  .title {
    line-height: 2 !important;
  }
  
  // .v-list__tile--hover {
  // color: white !important;
  // background: red !important;
  // }
  .v-list .v-list__tile--link:hover, .v-list .v-list__tile--highlighted, .v-list .v-list__group__header:hover, .v-list .v-list__group--active:before, .v-list .v-list__group--active:after {
    background: #7f62f8 !important;
    color: #71d9ea !important;
    box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12) !important;
    // border-radius: 12px !important;

  }

  
  @media screen and (max-width: 420px) {
    .v-list--dense .v-list__tile:not(.v-list__tile--avatar) {

      font-size: 14px;

    }
  
    .imgLogo {
      height: 32px;
      width: 120px;
    }

  }

  </style>

  
  
  <style scoped>

  .theme--light .v-icon,
  .application .theme--light.v-icon {
    color: #39b982;

  }

  .side-bar-color {
    background: #827bfa !important;

    /* border-top-right-radius: 74px !important; */

  }

  .v-navigation-drawer--fixed {
    position: absolute !important;

  
    min-height: calc(2000px - 64px - 50px - 81px) !important;
    /* max-height: inherit !important; */

  }

  .hover:hover {
    color: red !important;
    background: red !important;

  }

  </style>