add: sidebar component
This commit is contained in:
Alexandro Uc Santos
233
src/components/Sidebar.vue
Normal file
233
src/components/Sidebar.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<script setup>
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const handleLogout = () => {
|
||||
auth.$patch({
|
||||
sesion: '',
|
||||
token: '',
|
||||
user: {},
|
||||
});
|
||||
localStorage.removeItem('session');
|
||||
router.push({name: 'login'});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="logo">
|
||||
<img src="/images/logo-eta.png" alt="Eta viaporte" width="120">
|
||||
</div>
|
||||
<h2 class="my-4">COVO</h2>
|
||||
<p><i class="fa-solid fa-user"></i> <span class="ms-2">{{ 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'}">Ubicaciones</RouterLink>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
v-if="auth.user?.permissions.includes('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 :class="[route.name === 'published' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<i class="fa-solid fa-bullhorn" :class="[route.name === 'published' ? 'router-link-active' : '']"></i>
|
||||
<RouterLink
|
||||
active-class=""
|
||||
class="nav-link" :to="{name: 'published'}">Publicaciones</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.includes('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 :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>
|
||||
<a class="link-eta" href="">Aviso de privaciadad</a>
|
||||
<a class="link-eta" href="">Terminos y condiciones</a>
|
||||
<a class="link-eta" href="">FAQS</a>
|
||||
<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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 220px;
|
||||
min-height: 100vh;
|
||||
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;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-header h2 {
|
||||
margin-top: 16px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#sidebar ul li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 5px;
|
||||
background-color: #323030;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
.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 {
|
||||
margin-left: -220px;
|
||||
|
||||
}
|
||||
#sidebar.active {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,142 +1,13 @@
|
||||
<script setup>
|
||||
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import LoadingModal from '../components/ui/LoadingModal.vue';
|
||||
import NavBar from '../components/NavBar.vue';
|
||||
import Sidebar from '../components/Sidebar.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const auth = useAuthStore();
|
||||
|
||||
const handleLogout = () => {
|
||||
auth.$patch({
|
||||
sesion: '',
|
||||
token: '',
|
||||
user: {},
|
||||
});
|
||||
localStorage.removeItem('session');
|
||||
router.push({name: 'login'});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<nav id="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<div class="logo">
|
||||
<!-- <img src="/images/logo.png" alt="Eta viaporte" width="120"> -->
|
||||
<img src="/images/logo-eta.png" alt="Eta viaporte" width="120">
|
||||
</div>
|
||||
<h2 class="my-4">COVO</h2>
|
||||
<p><i class="fa-solid fa-user"></i> <span class="ms-2">{{ auth.user?.first_name + ' ' + auth.user?.last_name }}</span></p>
|
||||
<div class="divider"></div>
|
||||
</div>
|
||||
<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>
|
||||
<!-- <i class="fa-solid fa-chevron-right"></i> -->
|
||||
</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>
|
||||
<!-- <i class="fa-solid fa-chevron-right"></i> -->
|
||||
</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'}">Ubicaciones</RouterLink>
|
||||
</div>
|
||||
<!-- <i class="fa-solid fa-chevron-right"></i> -->
|
||||
</li>
|
||||
<li
|
||||
v-if="auth.user?.permissions.includes('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>
|
||||
<!-- <i class="fa-solid fa-chevron-right"></i> -->
|
||||
</li>
|
||||
<li :class="[route.name === 'published' ? 'bg-nav-active' : '']">
|
||||
<div>
|
||||
<i class="fa-solid fa-bullhorn" :class="[route.name === 'published' ? 'router-link-active' : '']"></i>
|
||||
<RouterLink
|
||||
active-class=""
|
||||
class="nav-link" :to="{name: 'published'}">Publicaciones</RouterLink>
|
||||
</div>
|
||||
<!-- <i class="fa-solid fa-chevron-right"></i> -->
|
||||
</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>
|
||||
<!-- <i class="fa-solid fa-chevron-right"></i> -->
|
||||
</li>
|
||||
<li
|
||||
v-if="auth.user?.permissions.includes('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>
|
||||
<!-- <i class="fa-solid fa-chevron-right"></i> -->
|
||||
</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>
|
||||
<!-- <i class="fa-solid fa-chevron-right"></i> -->
|
||||
</li>
|
||||
</ul>
|
||||
<div class="eta-info">
|
||||
<div class="divider"></div>
|
||||
<a class="link-eta" href="">Aviso de privaciadad</a>
|
||||
<a class="link-eta" href="">Terminos y condiciones</a>
|
||||
<a class="link-eta" href="">FAQS</a>
|
||||
<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>
|
||||
<Sidebar/>
|
||||
<div class="content">
|
||||
<NavBar/>
|
||||
<div class="view">
|
||||
@@ -155,108 +26,11 @@
|
||||
background-color: #f6f3f3;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 220px;
|
||||
min-height: 100vh;
|
||||
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;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sidebar-header h2 {
|
||||
margin-top: 16px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
#sidebar ul li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 5px;
|
||||
background-color: #323030;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.view {
|
||||
margin: 24px 50px;
|
||||
// width: calc(100vw - 260px);
|
||||
}
|
||||
|
||||
.nav-link{
|
||||
cursor: pointer;
|
||||
/* color: #5f5c5c; */
|
||||
color: #ebd6d6;
|
||||
font-size: 1.2rem;
|
||||
margin-right: 1.2rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.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: 1400px) {
|
||||
.view {
|
||||
margin: 24px 24px;
|
||||
@@ -264,15 +38,6 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
#sidebar {
|
||||
margin-left: -220px;
|
||||
|
||||
}
|
||||
#sidebar.active {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.view {
|
||||
margin: 24px 12px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user