add: component navbar

src/components/NavBar.vue

@@ -0,0 +1,90 @@
+<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');
+        });
+    });
+</script>
+
+<template>
+    <nav class="navbar navbar-expand-lg navbar-light 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.includes('role_shipper')"
+                        active-class="router-link-active"
+                        class="nav-link" :to="{name: 'carriers'}">Transporte</RouterLink>
+                    <RouterLink 
+                        v-if="auth.user?.permissions.includes('role_carrier')"
+                        active-class="router-link-active"
+                        class="nav-link" :to="{name: 'shippers'}">Cargas</RouterLink>
+                </div>
+            </div>
+    </nav>
+</template>
+
+<style lang="scss" scoped>
+    .nav-items {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+    }
+
+    .custom-navbar {
+        display: block;
+        width: calc(100vw - 220px);
+        background-color: #FFF;
+    }
+
+    .nav-options {
+        margin-left: 32px;
+        display: flex;
+    }
+
+    .btn-menu {
+        display: none;
+    }
+
+    .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;
+    }
+
+    .router-link-active{
+        /* color: #413f3c !important; */
+        color: #FFF !important;
+    }
+
+    @media (max-width: 768px) {
+
+        .custom-navbar {
+            width: 100vw !important;
+        }
+
+        .nav-items {
+            justify-content: space-between;
+        }
+        .btn-menu {
+            display: flex;
+        }
+    }
+</style>

src/layouts/AdminLayout.vue

@@ -2,17 +2,12 @@
     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';
 
     const route = useRoute();
     const router = useRouter();
     const auth = useAuthStore();
 
-   $(document).ready(function() {
-    $('#sidebarCollapse').on('click', function () {
-        $('#sidebar').toggleClass('active');
-    });
-   });
-
    const handleLogout = () => {
         auth.$patch({
             sesion: '',
@@ -142,24 +137,8 @@
             </div>
 
         </nav>
-        <div id="content">
+        <div class="content">
-            <nav class="navbar navbar-expand-lg navbar-light custom-navbar">
+            <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.includes('role_shipper')"
-                                active-class="router-link-active"
-                                class="nav-link" :to="{name: 'carriers'}">Transporte</RouterLink>
-                            <RouterLink 
-                                v-if="auth.user?.permissions.includes('role_carrier')"
-                                active-class="router-link-active"
-                                class="nav-link" :to="{name: 'shippers'}">Cargas</RouterLink>
-                        </div>
-                    </div>
-            </nav>
             <div class="view">
                 <RouterView />
             </div>
@@ -177,21 +156,15 @@
     }
 
     #sidebar {
-        /* margin: 20px; */
         display: flex;
         flex-direction: column;
         width: 220px;
         min-height: 100vh;
-        /* background: #FFF;
-        color: #323030; */
         background: #323030;
         color: #FFF;
         filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
         transition: all 0.3s;
     }
-    #sidebar.active {
-        margin-left: -250px;
-    }
 
     #sidebar .sidebar-header {
         padding: 20px;
@@ -219,7 +192,6 @@
         align-items: center;
         padding: 10px 20px;
         margin-bottom: 5px;
-        /* background-color: #FFF; */
         background-color: #323030;
     }
 
@@ -243,40 +215,11 @@
         position: relative;
     }
 
-    .custom-navbar {
-        display: block;
-        width: calc(100vw - 220px);
-        background-color: #FFF;
-    }
-
-    .btn-menu {
-        display: none;
-    }
-
-    .dropdown-toggle::after {
-        display: block;
-        position: absolute;
-        top: 50%;
-        right: 20px;
-        transform: translateY(-50%);
-    }
-
     .view {
         margin: 24px 50px;
         // width: calc(100vw - 260px);
     }
 
-    .nav-items {
-        display: flex;
-        flex-direction: row;
-        justify-content: end;
-    }
-
-    .nav-options {
-        margin-left: 32px;
-        display: flex;
-    }
-
     .nav-link{
         cursor: pointer;
         /* color: #5f5c5c; */
@@ -294,16 +237,6 @@
         color: #FFF;
     }
 
-    .router-link-active{
-        /* color: #413f3c !important; */
-        color: #FFF !important;
-    }
-
-    .bg-nav-active {
-        /* background-color: #e4eff2 !important;; */
-        background-color: #373738 !important;;
-    }
-
     .eta-info {
         // position: fixed;
         display: flex;
@@ -332,16 +265,6 @@
 
     @media (max-width: 768px) {
 
-        .custom-navbar {
-            width: 100vw;
-        }
-
-        .nav-items {
-            justify-content: space-between;
-        }
-        .btn-menu {
-            display: flex;
-        }
         #sidebar {
             margin-left: -220px;