<template>
  <div class="lpanel">
    <vue-snotify></vue-snotify>
    <ul class="menubar-list">
      <li class="brand">
        <a class=""
        :href="`/${this.$adminPanel}/translators`"><img :src="`/images/logo.png`" width="40"></a>
      </li>
    
      <li :class="menuId == 2?'active':''">
         <a class="menu-link" data-toggle="tooltip" data-placement="right" title="Translators" 
         :href="`/${this.$adminPanel}/translators`">
          <div class="menu-icon">
            <i class="fas fa-user-shield"></i>
          </div>
          <span>Translators</span>
        </a>
      </li>
      <li :class="menuId == 3?'active':''">
         <a class="menu-link" data-toggle="tooltip" data-placement="right" title="Settings" 
         :href="`/${this.$adminPanel}/test`">
          <div class="menu-icon">
            <i class="fas fa-cog"></i>
          </div>
          <span>Settings</span>
        </a>
      </li>
      <li class="userlog dropdown">
         <div class="dropdown show">
          <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           <img 
           :src="`/avatar/avatar.png`" 
           @error="handelAvatarError"
           class="img-fluid circled">
          </a>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Profile</a>
            <a class="dropdown-item" href="#">Setting</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" 
            :href="`/${this.$adminPanel}`" >Logout</a>                      
          </div>
        </div>                       
      </li>
    </ul>
  </div>
</template>
<script>
 
  export default {
    props: ['menuId'],
    data() {
      return {
        handelAvatarError: false,
        showModal: false
      }
    },
    components: {
    },
    methods: 
    {
      show() {
        this.showModal = true
       },
       hide(){
        this.showModal = false
       }
    },
  }
</script>