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>