WebETA/src/components/NavBar.vue

<script setup>
    import { RouterLink } from 'vue-router';
    import { useAuthStore } from '../stores/auth';
    import { useNotificationsStore } from '../stores/notifications';
    import { useI18n } from 'vue-i18n';
    import { onMounted, ref } from 'vue';
    import { getNotificationsCompany } from '../services/company';

    const auth = useAuthStore();
    const noty = useNotificationsStore();
    const permission = auth.user.permissions;
    const jobRole = auth.user.job_role;
    const { t } = useI18n()

     $(document).ready(function() {
        $('#sidebarCollapse').on('click', function () {
            $('#sidebar').toggleClass('active');
            $('#custom-navbar').toggleClass('active');
        });
    });

    onMounted(() => {
        getNotifications();
        setInterval(() => {
            getNotifications();
        }, 600000); // 5 minutos
    });

    const getNotifications = async () => {
        const resp = await getNotificationsCompany();
        if(resp.data.length > 0) {
            noty.newNoty = true; 
        }
        noty.notifications = resp.data;
    }

    const roleCheck = 'warehouse';
</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="permission === 'role_shipper' && jobRole !== roleCheck"
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'search-vehicles'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">{{ t('global.vehicles') }}</span></RouterLink>
                    <RouterLink 
                        v-if="permission === 'role_shipper' && jobRole !== roleCheck"
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'carriers'}"><i class="fa-solid fa-truck me-1"></i> <span class="clear-xsm">{{ t('global.carriers') }}</span></RouterLink>
                    <RouterLink 
                        v-if="permission === 'role_carrier' && jobRole !== roleCheck"
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'search-loads'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> <span class="clear-xsm">{{ t('global.loads') }}</span></RouterLink>
                    <RouterLink 
                        v-if="permission === 'role_carrier' && jobRole !== roleCheck"
                        active-class="router-link-active"
                        class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> <span class="clear-xsm">{{ t('global.shippers') }}</span></RouterLink>
                    <div 
                        class="nav-link noty"
                        @click="noty.toggleNotifications"
                    >
                        <i class="fa-regular fa-bell icon"></i>
                        <div 
                            class="box-badge" 
                            v-if="noty.newNoty"
                        >
                            <span class="badge bg-danger custom-badge">{{ noty.notifications.length }}</span>
                        </div>
                    </div>
                    <a 
                        active-class="router-link-active"
                        @click="noty.toggleProfile"
                        class="nav-link"><i class="fa-regular fa-user"></i></a>
                </div>
            </div>
    </nav>
</template>

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

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

    .nav-options {
        display: flex;
        margin-left: 32px;
        gap: 1rem;
        margin-right: 32px;
    }

    .btn-menu {
        display: none;
    }

    .nav-link{
        cursor: pointer;
        color: #323030;
        font-size: 1.3rem;
        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) {

        .nav-options {
            margin-left: 8px;
            margin-right: 8px;
            gap: 0.5rem;
        }

        .nav-link{
            font-size: 1.1rem;
            margin-right: 1.2rem;
            font-weight: 500;
        }

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

        .nav-items {
            justify-content: space-between;
        }
        .btn-menu {
            margin-left: 8px;
            display: flex;
        }
    }
    .icon {
        font-size: 1.5rem;
        color: #323030;
    }
    .noty {
        position: relative;
    }

    .box-badge {
        position: absolute;
        top: -15px;
        right: -15px;
    }
    .custom-badge {
        font-size: 0.7rem;
        font-weight: normal;
        padding: 0.3rem 0.5rem;
    }
</style>