modal edit profile

index.html

@@ -20,4 +20,6 @@
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
-</html>
+  <script>
+  </script>
+  </html>

src/components/NavBar.vue

@@ -1,8 +1,11 @@
 <script setup>
     import { RouterLink } from 'vue-router';
     import { useAuthStore } from '../stores/auth';
+import { ref } from 'vue';
+import { useNotificationsStore } from '../stores/notifications';
 
     const auth = useAuthStore();
+    const noty = useNotificationsStore();
      $(document).ready(function() {
         $('#sidebarCollapse').on('click', function () {
             $('#sidebar').toggleClass('active');
@@ -21,7 +24,7 @@
                     <RouterLink 
                         v-if="auth.user?.permissions === 'role_shipper'"
                         active-class="router-link-active"
-                        class="nav-link" :to="{name: 'carriers'}">Transportistas</RouterLink>
+                        class="nav-link" :to="{name: 'carriers'}"><i class="fa-solid fa-truck me-1"></i> Transportistas</RouterLink>
                     <RouterLink 
                         v-if="auth.user?.permissions === 'role_carrier'"
                         active-class="router-link-active"
@@ -30,6 +33,10 @@
                         v-if="auth.user?.permissions === 'role_carrier'"
                         active-class="router-link-active"
                         class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> Embarcadores</RouterLink>
+                    <a 
+                        active-class="router-link-active"
+                        @click="noty.toggleProfile"
+                        class="nav-link"><i class="fa-solid fa-user me-1"></i> {{ auth?.user?.first_name }}</a>
                 </div>
             </div>
     </nav>

src/components/ProfilePopup.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { useNotificationsStore } from '../stores/notifications';
+
+    const noty = useNotificationsStore();
+</script>
+
+<template>
+    <div 
+        v-if="noty.openProfile"
+        class="profile-card">
+        <p>Hola</p>
+    </div>
+</template>
+
+<style scoped>
+    .profile-card {
+        position: fixed;
+        right: 20px;
+        top: 70px;
+        z-index: 2000;
+        width: 320px;
+        background-color: #FFF;
+        border-radius: 13px;
+        height: 400px;
+        display: flex;
+        flex-direction: column;
+    }
+</style>

src/components/Sidebar.vue

@@ -33,7 +33,7 @@
                 </a>
             </div>
             <p class="my-4"><i class="fa-regular fa-building icon-header"></i> <span class="company-name">{{auth.user?.company?.company_name}}</span></p>
-            <p><i class="fa-regular fa-user icon-header"></i> <span>{{ auth.user?.first_name + ' ' + auth.user?.last_name }}</span></p>
+            <!-- <p><i class="fa-regular fa-user icon-header"></i> <span>{{ auth.user?.first_name + ' ' + auth.user?.last_name }}</span></p> -->
             <div class="divider"></div>
         </div>
         <ul class="list-unstyled components">
@@ -113,6 +113,26 @@
                         class="nav-link" :to="{name: 'calculator'}">Calculadora</RouterLink>
                 </div>
             </li>
+            <li 
+                v-if="auth.user?.permissions === 'role_carrier'"
+                :class="[route.name === 'carriers' ? 'bg-nav-active' : '']">
+                <div>
+                    <i class="fa-solid fa-truck" :class="[route.name === 'carriers' ? 'router-link-active' : '']"></i>
+                    <RouterLink 
+                        active-class="router-link-active"
+                        class="nav-link" :to="{name: 'carriers'}">Transportistas</RouterLink>
+                </div>
+            </li>
+            <!-- <li 
+                v-if="auth.user?.permissions === 'role_shipper'"
+                :class="[route.name === 'carriers' ? 'bg-nav-active' : '']">
+                <div>
+                    <i class="fa-solid fa-truck" :class="[route.name === 'carriers' ? 'router-link-active' : '']"></i>
+                    <RouterLink 
+                        active-class="router-link-active"
+                        class="nav-link" :to="{name: 'carriers'}">Transportistas</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>

src/layouts/AdminLayout.vue

@@ -2,6 +2,7 @@
     import LoadingModal from '../components/ui/LoadingModal.vue';
     import NavBar from '../components/NavBar.vue';
     import Sidebar from '../components/Sidebar.vue';
+    import ProfilePopup from '../components/ProfilePopup.vue';
 
 </script>
 
@@ -16,6 +17,7 @@
         </div>
     </div>
     <LoadingModal/>
+    <ProfilePopup/>
 </template>
 
 <style lang="scss" scoped>

src/stores/notifications.js

@@ -6,7 +6,8 @@ export const useNotificationsStore = defineStore('notifications', () => {
     
     const text = ref('')
     const error = ref(false)
-    const show = ref(false)
+    const show = ref(false);
+    const openProfile = ref(false);
 
     watch(show, () => {
         if(show) {
@@ -18,10 +19,17 @@ export const useNotificationsStore = defineStore('notifications', () => {
         }
     });
 
+    const toggleProfile = () => {
+        console.log('click');
+        openProfile.value = !openProfile.value;
+    }
+
 
     return {
         text,
         error,
         show,
+        openProfile,
+        toggleProfile
     }
 });