<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;" v-show="navigation.icon != 'cleanse'"></i>
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" style="font-size: 28px;" v-show="navigation.icon == 'cleanse'">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6 4H18C18.5523 4 19 4.44772 19 5V8H5V5C5 4.44772 5.44771 4 6 4ZM19 19V10H5V19C5 19.5523 5.44772 20 6 20H18C18.5523 20 19 19.5523 19 19ZM3 5C3 3.34315 4.34315 2 6 2H18C19.6569 2 21 3.34315 21 5V19C21 20.6569 19.6569 22 18 22H6C4.34315 22 3 20.6569 3 19V5ZM7 5C6.44772 5 6 5.44772 6 6C6 6.55228 6.44772 7 7 7H9C9.55228 7 10 6.55228 10 6C10 5.44772 9.55228 5 9 5H7ZM14 7C14.5523 7 15 6.55228 15 6C15 5.44772 14.5523 5 14 5C13.4477 5 13 5.44772 13 6C13 6.55228 13.4477 7 14 7ZM18 6C18 6.55228 17.5523 7 17 7C16.4477 7 16 6.55228 16 6C16 5.44772 16.4477 5 17 5C17.5523 5 18 5.44772 18 6ZM14 15C14 16.1046 13.1046 17 12 17C10.8954 17 10 16.1046 10 15C10 13.8954 10.8954 13 12 13C13.1046 13 14 13.8954 14 15ZM16 15C16 17.2091 14.2091 19 12 19C9.79086 19 8 17.2091 8 15C8 12.7909 9.79086 11 12 11C14.2091 11 16 12.7909 16 15Z" fill="currentColor"></path>
            </svg>
            <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>