<template>
  <v-navigation-drawer
    app
    class="navigation"
    dark
    width="180"
    v-model="$store.state.app.sideMenuOpen"
    :permanent="!$vuetify.breakpoint.xsOnly"
  >
    <v-list-item dense>
      <v-list-item-content>
        <img
          src="@/assets/img/navigation-drawer-logo.svg"
          height="30"
        >
      </v-list-item-content>
    </v-list-item>
    <v-divider></v-divider>
    <v-list
      class="pa-0"
      dense
    >
      <template v-for="item in _CMS_menu">
        <v-list-group
          v-if="item.menu"
          active-class="appbarTitleActive--text"
          :key="item.title"
        >
          <template v-slot:activator>
            <v-list-item-icon class="mr-2">
              <v-icon size="20">{{ item.icon }}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ item.title }}</v-list-item-title>
            </v-list-item-content>
          </template>
          <v-list-item
            v-for="(menu_item, i) in item.menu"
            :key="i"
            active-class="appbarTitleActive--text"
            link
            :to="menu_item.link"
          >
            <v-list-item-icon class="mr-2">
              <v-icon size="20">{{ menu_item.icon }}</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title>{{ menu_item.title }}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-group>
        <v-list-item
          v-else
          :key="item.title"
          active-class="appbarTitleActive--text transparent"
          link
          :to="item.link"
        >
          <v-list-item-icon class="mr-2">
            <v-icon size="20">{{ item.icon }}</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>{{ item.title }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </template>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {};
</script>

<style>
</style>