<script setup>
    import { RouterLink } from 'vue-router';
    import { useAuthStore } from '../stores/auth';

    const auth = useAuthStore();
     $(document).ready(function() {
        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
            $('#custom-navbar').toggleClass('active');
        });
    });
</script>

<template>
    <nav class="navbar navbar-expand-lg navbar-light custom-navbar" id="custom-navbar">
            <div class="nav-items">
                <button type="button" id="sidebarCollapse" class="btn btn-info btn-menu">
                    <i class="fas fa-align-left"></i>
                </button>
                <div class="nav-options">
                    <RouterLink 
                        v-if="auth.user?.permissions.includes('role_shipper')"
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'carriers'}">Transportistas</RouterLink>
                    <RouterLink 
                        v-if="auth.user?.permissions.includes('role_carrier')"
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'search-loads'}">Cargas</RouterLink>
                    <RouterLink 
                        v-if="auth.user?.permissions.includes('role_carrier')"
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'shippers'}">Embarcadores</RouterLink>
                </div>
            </div>
    </nav>
</template>

<style lang="scss" scoped>
    .nav-items {
        display: flex;
        flex-direction: row;
        justify-content: end;
    }

    .custom-navbar {
        display: block;
        width: calc(100vw - 220px);
        background-color: #FFF;
    }

    .nav-options {
        margin-left: 32px;
        display: flex;
    }

    .btn-menu {
        display: none;
    }

    .nav-link{
        cursor: pointer;
        color: #413f3c;
        font-size: 1.2rem;
        margin-right: 1.2rem;
        font-weight: 500;
    }
    .nav-link:hover{
        color: #282727;
    }
    .nav-link:focus{
        color: #282727;
    }
    
    .router-link-active{
        color: #282727;
    }

    #custom-navbar.active {
        margin-left: 220px;
        display: block;
        width: calc(100% - 220px) !important;
    }

    @media (max-width: 768px) {

        .custom-navbar {
            width: 100vw !important;
        }

        .nav-items {
            justify-content: space-between;
        }
        .btn-menu {
            display: flex;
        }
    }
</style>