ETA/WebETA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add: sidebar component

Browse Source
This commit is contained in:
Alexandro Uc Santos
2023-12-02 17:49:23 -06:00
parent 021c33c5be
commit 177a4ecab3
2 changed files with 235 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
src/layouts/AdminLayout.vue
View File

@@ -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;
}