<template>
 
    <b-navbar  >
      <b-navbar-nav class="col-md-12 header-menu-manager-sales-consultant">
        <b-nav-item-dropdown class="col d-flex flex-fill" right>
          <template v-slot:button-content>
            <!--font-awesome-icon icon="home" /-->Cadastro
          </template>

           <b-dropdown-item @click.prevent="$router.push({name:'Solicitações de cadastro'})"  href="#">Consultoras</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Consultas SPC'})" href="#">Consultas SPC</b-dropdown-item>
           <b-dropdown-item @click.prevent="$router.push({name:'Solicitações de cadastro'})"  href="#">Solicitações de Cadastro</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Consultas SPC'})" href="#">Crédito SPC</b-dropdown-item>
           <b-dropdown-item @click.prevent="$router.push({name:'Lista Pre-Cadastro'})" href="#">Pré Cadastro</b-dropdown-item>

        </b-nav-item-dropdown>

        <b-nav-item-dropdown class="col d-flex flex-fill" right>
          <template v-slot:button-content>
         Financeiro
          </template>

          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Consultas ao SPC</b-dropdown-item>
          
        </b-nav-item-dropdown>

        <b-nav-item-dropdown class="col d-flex flex-fill" right>
          <template v-slot:button-content>
          Relatórios
          </template>

           <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Acompanhamento de cadastros | analítico</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Acompanhamento de consultoras | analítico</b-dropdown-item>
          <b-dropdown-item @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#">Vendas (captação de pedidos)</b-dropdown-item>
       
        </b-nav-item-dropdown>

        <b-nav-item-dropdown class="col d-flex flex-fill" right>
          <template v-slot:button-content>
           Marketing
          </template>

          <b-dropdown-item  @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#" >Catálogos</b-dropdown-item>
        <b-dropdown-item  @click.prevent="$router.push({name:'Todos os Produtos'})" href="#" >Produtos</b-dropdown-item>
        <b-dropdown-item  @click.prevent="$router.push({name:'Material de Apoio'})" href="#" >Materiais de divulgação</b-dropdown-item>
        <b-dropdown-item  @click.prevent="$router.push({name:'Em Desenvolvimento'})" href="#" >Ações Extras</b-dropdown-item>
        </b-nav-item-dropdown>

  <b-col class="d-flex flex-fill">
          <nav-button v-bind=" {
        title: ' SuperClass',
        routerName: 'Todos os Produtos',
        icon: 'box',
      }"/>
        </b-col>

       
      </b-navbar-nav>
    </b-navbar>
  
  
</template>

<script>

import NavButton from '@/components/navbar/NavButton.vue';

export default {
  props: {
    title: {
      type: String,
      required: false
    },
    icon: {
      type: String
    },
    routerName: {
      type: String
    }
  },
  components:{
    NavButton
  },
  methods: {
    goTo() {
      if (this.$router.history.current.name === this.routerName) {
        return;
      }
      this.$router.push({ name: this.routerName });
    }
  }
};
</script>

<style lang="scss">

.nav-manager-sales-consultant{
    width: 100%;
    nav{
        ul{
            width: 100%;
        }
    }
}





.btn-text {
  text-align: center;
  display: block;
  width: 100%;
}
.navbar{

    .nav-item {
        .navbar-light,
  .navbar-nav,
  .nav-link {
      color: #fff !important;
  }
svg{
    
    }
  .navbar-light .navbar-nav .nav-link {
      span {
          color: #fff !important;
    }
  }
}

.btn-nav,
.nav-item {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.5);
}

.btn-hover:hover,
.nav-item:hover {
  background: #ed8626;
}
    }

.header-menu-manager-sales-consultant{

  .dropdown-menu{
  background-color: #ffcdb2;
      color: #fff !important;
  }
.nav-item{
        margin: 0px 6px;

&:first-child{
    margin-left: 0px;
}
        &:last-child{
            margin-right: 0px;
        }
}
.dropdown-toggle::after{
    position: absolute;
    top: 18px;
    right: 10px;
}
a{
    display: block;
    width: 100%;
    text-align: center;
    &.dropdown-item{
      text-align: left;
    }
svg{
        position: absolute;
    left: 13px;
    top: 12px;
}
    ul{
        text-align: left;
    }
}
}
</style>

