<template>
    <q-list style="color:#9d9da6">
        <nav-item :menu="x" v-for="x in menus"></nav-item>
    </q-list>
</template>

<script lang="ts">
import { defineComponent,ref,reactive, toRefs } from 'vue'
import navItem from './nav-item.vue'
import { useMenus, Menu } from '../../utils/menus'
export default defineComponent({
  components: { navItem },
  name: 'navs',
  setup() {
    const data = reactive({
      menus: [] as Menu[]
    })
    data.menus = useMenus.getMenus()

    return {...toRefs(data)}
  }
})
</script>

<style>

.nav-list .nav-group:hover span,
.nav-list .nav-item:hover span,
.nav-list .nav-item.active span,
.nav-list .nav-group.active span,
.parent-name{
  color: #FFFFFF !important;
}
.nav-list .nav-group.active .svg-icon-nav g [fill],
.nav-group:hover .svg-icon-nav g [fill],
.nav-item:hover .svg-icon-nav g [fill],
.nav-list .nav-item.active .svg-icon-nav g [fill],
.nav-active .svg-icon-nav g [fill],
.nav-parent .svg-icon-nav g [fill]{
  fill: #FFFFFF !important;
  /* color: #FFFFFF !important; */
}
.nav-list .q-focus-helper{
  opacity: 0 !important;
}
.nav-active{
  color:#FFF !important;
  transition: color 0.2s ease;
  background-color: #2A2A3C;
}
</style>
