<template>
    <div>
        <div class="header-f" >
            <div class="container d-flex py-2 align-items-center justify-content-between">
                <div class="d-flex">
                    <div>
                        <b-button v-b-toggle.sidebar-backdrop class="mr-3 menu-toggle-sty"><font-awesome-icon icon="bars"/></b-button>

                        <b-sidebar
                        id="sidebar-backdrop"
                        title="Menú"
                        :backdrop-variant="variant"
                        backdrop
                        shadow
                        >
                            <div class="px-3 mt-3 py-2 d-flex align-items-center profi-main-text-sty">
                                <font-awesome-icon icon="user" class="mr-2" />        
                                <a href="#" class="text-decoration-none">
                                    <h5 class="my-auto">Iniciar sesión</h5>
                                </a>
                            </div>
                            
                            <h6 class="px-3 pt-4 mb-4">MAIN LOREM IPSUM</h6>

                            <ul class="px-3">
                                <li v-for="item in items" :key="item.mensaje">
                                    <a href="#"> {{ item.mensaje }} </a>
                                </li>
                            </ul>

                            <h6 class="px-3 my-4">CONFIGURACIÓN</h6>

                            <ul class="px-3">
                                <li v-for="item in configuracion" :key="item.mensaje">
                                    <a href="#"> {{ item.mensaje }} </a>
                                </li>
                            </ul>
                        </b-sidebar>
                    </div>
                    <input class="form-control mr-sm-2" type="search" placeholder="Buscar" aria-label="Search">
                </div>
                <div>
                    <a href="#" class="cart-icon-custom-properties text-decoration-none text-white">
                        <font-awesome-icon icon="shopping-cart" class="text-white" /><sup> ( )</sup>
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            items: [
                { mensaje: 'Investigación Aplicada y Multidisciplinaria' },
                { mensaje: 'Ciencias Socioeconómicas' }
            ],
            configuracion: [
                { mensaje: 'Mi cuenta' },
                { mensaje: 'Ayuda' },
                { mensaje: 'Salir' },
            ]
        }
    },
    methods: {
       
    }
}

</script>
<style scoped>

.header-f {
    background-color: #bb8800;
}
.cart-icon-custom-properties {
    font-size: 20px;
}
.menu-toggle-sty {
    background-color: transparent!important;
    border: 1px solid white!important;
    color: white!important;
}
.menu-toggle-sty:hover {
    border: 1px solid rgba(255, 255, 255, 0.7)!important;
    color: rgba(255, 255, 255, 0.7)!important;
}
.profi-main-text-sty, .profi-main-text-sty a {
    color: black!important;
}
.profi-main-text-sty a:hover{
    color:gray!important;
    transition: 0.2s;
}
ul li {
    list-style: none;
    margin: 10px auto;
}
ul li a {
    text-decoration: none;
    color: black!important;
}
ul li a:hover {
    color: rgba(0, 0, 0, 0.6)!important;
    transition: 0.2s;
}
</style>
