304 lines
10 KiB
Vue
304 lines
10 KiB
Vue
<script setup>
|
|
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
|
import { useAuthStore } from '../stores/auth';
|
|
import Swal from 'sweetalert2';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const auth = useAuthStore();
|
|
|
|
const handleLogout = () => {
|
|
Swal.fire({
|
|
title: 'Cerrar sesión',
|
|
text: '¿Estás seguro de cerrar sesión?',
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
cancelButtonColor: "#d33",
|
|
confirmButtonText: 'Si',
|
|
cancelButtonText: 'No',
|
|
}).then(async(result) => {
|
|
if(result.isConfirmed) {
|
|
auth.logout();
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<nav id="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="logo">
|
|
<a href="https://etaviaporte.com/" target="_blank">
|
|
<img src="/images/logo-eta.png" alt="Eta viaporte" width="120">
|
|
</a>
|
|
</div>
|
|
<p class="my-4"><i class="fa-regular fa-building icon-header"></i> <span class="company-name">{{auth.user?.company?.company_name}}</span></p>
|
|
<!-- <p><i class="fa-regular fa-user icon-header"></i> <span>{{ auth.user?.first_name + ' ' + auth.user?.last_name }}</span></p> -->
|
|
<div class="divider"></div>
|
|
</div>
|
|
<ul class="list-unstyled components">
|
|
<li :class="[route.name === 'home' ? 'bg-nav-active' : '']">
|
|
<div>
|
|
<i class="fa-solid fa-gauge-high" :class="[route.name === 'home' ? 'router-link-active' : '']"></i>
|
|
<RouterLink
|
|
active-class="router-link-active"
|
|
class="nav-link" :to="{name: 'home'}">Dashboard</RouterLink>
|
|
</div>
|
|
</li>
|
|
<li :class="[route.name === 'company' ? 'bg-nav-active' : '']">
|
|
<div>
|
|
<i class="fa-regular fa-building" :class="[route.name === 'company' ? 'router-link-active' : '']"></i>
|
|
<RouterLink
|
|
active-class="router-link-active"
|
|
class="nav-link" :to="{name: 'company'}">Empresa</RouterLink>
|
|
</div>
|
|
</li>
|
|
<li :class="[route.name === 'users' ? 'bg-nav-active' : '']">
|
|
<div>
|
|
<i class="fa-regular fa-user" :class="[route.name === 'users' ? 'router-link-active' : '']"></i>
|
|
<RouterLink
|
|
active-class="router-link-active"
|
|
class="nav-link" :to="{name: 'users'}">Usuarios</RouterLink>
|
|
</div>
|
|
</li>
|
|
<li :class="[route.name === 'locations' ? 'bg-nav-active' : '']">
|
|
<div>
|
|
<i class="fa-solid fa-location-dot" :class="[route.name === 'locations' ? 'router-link-active' : '']"></i>
|
|
<RouterLink
|
|
active-class=""
|
|
class="nav-link" :to="{name: 'locations'}">Directorio interno</RouterLink>
|
|
</div>
|
|
</li>
|
|
<li
|
|
v-if="auth.user?.permissions === 'role_carrier'"
|
|
:class="[route.name === 'vehicles' ? 'bg-nav-active' : '']">
|
|
<div>
|
|
<i class="fa-solid fa-truck-fast" :class="[route.name === 'vehicles' ? 'router-link-active' : '']"></i>
|
|
<RouterLink
|
|
active-class=""
|
|
class="nav-link" :to="{name: 'vehicles'}">Vehiculos</RouterLink>
|
|
</div>
|
|
</li>
|
|
<li v-if="auth.user?.permissions === 'role_shipper'" :class="[route.name === 'published-loads' ? 'bg-nav-active' : '']">
|
|
<div>
|
|
<i class="fa-solid fa-bullhorn" :class="[route.name === 'published-loads' ? 'router-link-active' : '']"></i>
|
|
<RouterLink
|
|
active-class=""
|
|
class="nav-link" :to="{name: 'published-loads'}">Publicaciones</RouterLink>
|
|
</div>
|
|
</li>
|
|
<li v-if="auth.user?.permissions === 'role_carrier'" :class="[route.name === 'published-trucks' ? 'bg-nav-active' : '']">
|
|
<div>
|
|
<i class="fa-solid fa-bullhorn" :class="[route.name === 'published-trucks' ? 'router-link-active' : '']"></i>
|
|
<RouterLink
|
|
active-class=""
|
|
class="nav-link" :to="{name: 'published-trucks'}">Ofertas aceptadas</RouterLink>
|
|
</div>
|
|
</li>
|
|
<li :class="[route.name === 'calendar' ? 'bg-nav-active' : '']">
|
|
<div>
|
|
<i class="fa-regular fa-calendar" :class="[route.name === 'calendar' ? 'router-link-active' : '']"></i>
|
|
<RouterLink
|
|
active-class="router-link-active"
|
|
class="nav-link" :to="{name: 'calendar'}">Calendario</RouterLink>
|
|
</div>
|
|
</li>
|
|
<li
|
|
v-if="auth.user?.permissions === 'role_carrier'"
|
|
:class="[route.name === 'calculator' ? 'bg-nav-active' : '']">
|
|
<div>
|
|
<i class="fa-solid fa-calculator" :class="[route.name === 'calculator' ? 'router-link-active' : '']"></i>
|
|
<RouterLink
|
|
active-class="router-link-active"
|
|
class="nav-link" :to="{name: 'calculator'}">Calculadora</RouterLink>
|
|
</div>
|
|
</li>
|
|
<!-- <li
|
|
v-if="auth.user?.permissions === 'role_carrier'"
|
|
:class="[route.name === 'carriers' ? 'bg-nav-active' : '']">
|
|
<div>
|
|
<i class="fa-solid fa-truck" :class="[route.name === 'carriers' ? 'router-link-active' : '']"></i>
|
|
<RouterLink
|
|
active-class="router-link-active"
|
|
class="nav-link" :to="{name: 'carriers'}">Transportistas</RouterLink>
|
|
</div>
|
|
</li> -->
|
|
<!-- <li
|
|
v-if="auth.user?.permissions === 'role_shipper'"
|
|
:class="[route.name === 'carriers' ? 'bg-nav-active' : '']">
|
|
<div>
|
|
<i class="fa-solid fa-truck" :class="[route.name === 'carriers' ? 'router-link-active' : '']"></i>
|
|
<RouterLink
|
|
active-class="router-link-active"
|
|
class="nav-link" :to="{name: 'carriers'}">Transportistas</RouterLink>
|
|
</div>
|
|
</li> -->
|
|
<!-- <li :class="[route.name === 'reports' ? 'bg-nav-active' : '']">
|
|
<div>
|
|
<i class="fa-solid fa-chart-simple" :class="[route.name === 'reports' ? 'router-link-active' : '']"></i>
|
|
<RouterLink
|
|
active-class="router-link-active"
|
|
class="nav-link" :to="{name: 'reports'}">Reportes</RouterLink>
|
|
</div>
|
|
</li> -->
|
|
</ul>
|
|
<div class="eta-info">
|
|
<div class="divider"></div>
|
|
<RouterLink class="link-eta" :to="{name: 'notice-privacy'}" target="_blank">Aviso de privaciadad</RouterLink>
|
|
<RouterLink class="link-eta" :to="{name: 'terms-conditions'}" target="_blank">Términos y condiciones</RouterLink>
|
|
<RouterLink class="link-eta" :to="{name: 'faqs'}" target="_blank">Faqs</RouterLink>
|
|
<div class="d-flex align-items-center">
|
|
<i class="fa-solid fa-right-from-bracket"></i>
|
|
<a @click="handleLogout"
|
|
active-class=""
|
|
class="nav-link m-2">
|
|
Cerrar sesión
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
#sidebar {
|
|
position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
top: 0;
|
|
height: 100%;
|
|
// min-height: 100vh;
|
|
overflow-y: scroll;
|
|
bottom: 0;
|
|
width: 220px;
|
|
left: 0;
|
|
z-index: 1030;
|
|
background: #323030;
|
|
color: #FFF;
|
|
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
#sidebar .sidebar-header {
|
|
padding: 20px;
|
|
/* background: #FFF;
|
|
color: #323030; */
|
|
background: #323030;
|
|
color: #FFF;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.icon-header {
|
|
font-size: 24px;
|
|
// color: #FBBA33;
|
|
color: #FFF;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.company-name {
|
|
font-size: 1.5rem;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sidebar-header h2 {
|
|
margin-top: 16px;
|
|
font-size: 1.4rem;
|
|
font-weight: 900;
|
|
}
|
|
|
|
#sidebar.active {
|
|
position: fixed;
|
|
}
|
|
|
|
|
|
#sidebar ul li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 20px;
|
|
margin-bottom: 5px;
|
|
background-color: #323030;
|
|
}
|
|
|
|
.bg-nav-active {
|
|
opacity: 0.4;
|
|
transition: opacity 500ms ease-in-out;
|
|
}
|
|
|
|
#sidebar ul li div{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
#sidebar ul li i{
|
|
font-size: 20px;
|
|
color: #897c7c;
|
|
}
|
|
|
|
#sidebar ul li.active > a, a[aria-expanded="true"] {
|
|
color: #fff;
|
|
background: #6d7fcc;
|
|
}
|
|
|
|
a[data-toggle="collapse"] {
|
|
position: relative;
|
|
}
|
|
|
|
.nav-link{
|
|
cursor: pointer;
|
|
/* color: #5f5c5c; */
|
|
color: #ebd6d6;
|
|
font-size: 1.2rem;
|
|
margin-right: 1.2rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.router-link-active{
|
|
color: #FFF;
|
|
}
|
|
.nav-link:hover{
|
|
/* color: #413f3c; */
|
|
color: #FFF;
|
|
}
|
|
.nav-link:focus{
|
|
/* color: #413f3c; */
|
|
color: #FFF;
|
|
}
|
|
|
|
.eta-info {
|
|
// position: fixed;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// margin-top: 8px;
|
|
bottom: 10px;
|
|
gap: 1rem;
|
|
// background-color: red;
|
|
align-items: start;
|
|
padding: 10px 16px;
|
|
}
|
|
|
|
.link-eta {
|
|
font-size: 14px;
|
|
text-decoration: none;
|
|
font-weight: 400;
|
|
color: #FFF;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
#sidebar {
|
|
position: relative;
|
|
height: 100vh;
|
|
overflow: auto;
|
|
width: 220px;
|
|
z-index: 4;
|
|
|
|
}
|
|
}
|
|
</style> |