From 177a4ecab37be8a6ba2863c1599a446cd20f805d Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Sat, 2 Dec 2023 17:49:23 -0600
Subject: [PATCH] add: sidebar component

---
 src/components/Sidebar.vue  | 233 +++++++++++++++++++++++++++++++++++
 src/layouts/AdminLayout.vue | 239 +-----------------------------------
 2 files changed, 235 insertions(+), 237 deletions(-)
 create mode 100644 src/components/Sidebar.vue

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 0000000..c9366d7
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -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>
\ No newline at end of file
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index ffdd358..206a037 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -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;
         }