<template>
<nav class="navbar navbar-dark align-items-start sidebar sidebar-dark accordion p-0 toggled navigation">
    <div class="container-fluid d-flex flex-column p-0">
      <a class="navbar-brand d-flex justify-content-center align-items-center sidebar-brand m-0" href="test_rest.html">
        <div class="sidebar-brand-icon"><img :src="urlImage"></div>
        <div class="sidebar-brand-text mx-3"><span>Iris</span></div>
      </a>
      <hr class="sidebar-divider my-0">
      <ul class="navbar-nav text-light" id="accordionSidebar">
        <li v-for="(navigation, index) of navigationList" :key="index" class="nav-item">
          <router-link class="nav-link" :to="{ path: navigation.url}">
            <i :class="[navigation.icon]" style="font-size: 24px;"></i>
            <span style="font-size: 12px;font-weight: bold;">{{navigation.text}}</span>
          </router-link>
        </li>
      </ul>
    </div>
</nav>
</template>
<script lang="ts">
export default{
  name: 'Nav',
  props: {
    msg: String,
    urlImage: String,
    navigationList: { type: [], default: null }
  },
  methods:{
    goto(url: string){
      this.$router.push({ path: url }).catch;
    }
  }
}

</script>