113 lines
3.0 KiB
Vue
113 lines
3.0 KiB
Vue
<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 === 'role_shipper'"
|
|
active-class="router-link-active"
|
|
class="nav-link" :to="{name: 'carriers'}">Transportistas</RouterLink>
|
|
<RouterLink
|
|
v-if="auth.user?.permissions === 'role_carrier'"
|
|
active-class="router-link-active"
|
|
class="nav-link" :to="{name: 'search-loads'}"> <i class="fa-solid fa-truck-ramp-box me-1"></i> Cargas</RouterLink>
|
|
<RouterLink
|
|
v-if="auth.user?.permissions === 'role_carrier'"
|
|
active-class="router-link-active"
|
|
class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> Embarcadores</RouterLink>
|
|
</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 - 220px);
|
|
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: #FBBA33;
|
|
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 {
|
|
display: flex;
|
|
}
|
|
}
|
|
</style> |