From 61409dd74d73f7993812e5df2826df9fd058c086 Mon Sep 17 00:00:00 2001
From: Komek Hayytnazarov <komek.h@gmail.com>
Date: Fri, 30 Sep 2022 12:17:08 +0500
Subject: [PATCH] developed

---
 src/components/top-bar/Main.vue | 75 +++++++++++----------------------
 src/layouts/top-menu/Main.vue   | 60 +++++++++-----------------
 src/stores/top-menu.js          | 17 +++++++-
 3 files changed, 61 insertions(+), 91 deletions(-)

diff --git a/src/components/top-bar/Main.vue b/src/components/top-bar/Main.vue
index f390db9..1328d32 100644
--- a/src/components/top-bar/Main.vue
+++ b/src/components/top-bar/Main.vue
@@ -1,8 +1,7 @@
 <template>
   <!-- BEGIN: Top Bar -->
   <div
-    class="top-bar-boxed h-[70px] z-[51] relative border-b border-white/[0.08] mt-12 md:-mt-5 -mx-3 sm:-mx-8 px-3 sm:px-8 md:pt-0 mb-12"
-  >
+    class="top-bar-boxed h-[70px] z-[51] relative border-b border-white/[0.08] mt-12 md:-mt-5 -mx-3 sm:-mx-8 px-3 sm:px-8 md:pt-0 mb-12">
     <div class="h-full flex items-center">
       <!-- BEGIN: Logo -->
       <a href="" class="-intro-x hidden md:flex items-center">
@@ -20,29 +19,21 @@
 
       <!-- BEGIN: Notifications -->
       <Dropdown class="intro-x mr-4 sm:mr-6">
-        <DropdownToggle
-          tag="div"
-          role="button"
-          class="notification cursor-pointer"
-          :class="{'notification--bullet': hasMessagesFromAdmin}"
-        >
+        <DropdownToggle tag="div" role="button" class="notification cursor-pointer"
+          :class="{'notification--bullet': hasMessagesFromAdmin}">
           <BellIcon class="notification__icon dark:text-slate-500" />
         </DropdownToggle>
         <DropdownMenu class="notification-content pt-2">
           <DropdownContent tag="div" class="notification-content__box overflow-y-auto scrollbar-hidden">
             <div class="notification-content__title">Notifications</div>
-            <div
-              v-for="(ticket, ticketKey) in ticketList"
-              :key="ticketKey"
-              class="cursor-pointer relative flex items-center"
-              :class="{ 'mt-5': ticketKey }"
-              @click.capture="goToMessagesList(ticket.id)"
-            >
-              
+            <div v-for="(ticket, ticketKey) in ticketList" :key="ticketKey"
+              class="cursor-pointer relative flex items-center" :class="{ 'mt-5': ticketKey }"
+              @click.capture="goToMessagesList(ticket.id)">
+
               <div class="ml-2 overflow-hidden w-full">
                 <div class="flex items-center justify-between">
                   <a href="#" class="font-medium truncate mr-5">{{
-                    ticket.title
+                  ticket.title
                   }}</a>
                   <div class="text-xs text-slate-400 ml-auto whitespace-nowrap">
                     Created {{ normalizeDate(ticket.created_at) }}
@@ -52,10 +43,8 @@
                   {{ ticket.content }}
                 </div>
               </div>
-              <div
-                v-if="ticket.last_sender === 'admin'"
-                class="w-2 h-2 flex items-center justify-center absolute top-0 left-0 text-xs text-white rounded-full bg-primary font-medium -mt-1 -mr-1"
-              >
+              <div v-if="ticket.last_sender === 'admin'"
+                class="w-2 h-2 flex items-center justify-center absolute top-0 left-0 text-xs text-white rounded-full bg-primary font-medium -mt-1 -mr-1">
               </div>
             </div>
           </DropdownContent>
@@ -67,48 +56,29 @@
 
       <!-- BEGIN: Account Menu -->
       <Dropdown class="intro-x">
-        <DropdownToggle
-          tag="div"
-          role="button"
-          class="w-6 h-6 rounded-full overflow-hidden shadow-lg image-fit zoom-in scale-110"
-        >
+        <DropdownToggle tag="div" role="button"
+          class="w-6 h-6 rounded-full overflow-hidden shadow-lg image-fit zoom-in scale-110">
           <div class="rounded-full">
             <UserIcon class="text-white" />
           </div>
         </DropdownToggle>
         <DropdownMenu class="w-56">
           <DropdownContent
-            class="bg-primary/80 before:block before:absolute before:bg-black before:inset-0 before:rounded-md before:z-[-1] text-white"
-          >
+            class="bg-primary/80 before:block before:absolute before:bg-black before:inset-0 before:rounded-md before:z-[-1] text-white">
             <DropdownHeader tag="div" class="!font-normal">
-              <div class="font-medium">
-                {{ $f()[0].users[0].name }}
-              </div>
-              <div class="text-xs text-white/60 mt-0.5 dark:text-slate-500">
-                {{ $f()[0].jobs[0] }}
+              <div class="font-medium" v-if="user">
+                {{ user.firstname}} {{ user.lastname }}
               </div>
             </DropdownHeader>
             <DropdownDivider class="border-white/[0.08]" />
             <DropdownItem class="dropdown-item hover:bg-white/5" @click="onProfileUpdate">
-              <UserIcon class="w-4 h-4 mr-2" />Update Profile</DropdownItem
-            >
-            <DropdownItem class="dropdown-item hover:bg-white/5">
-              <EditIcon class="w-4 h-4 mr-2" /> Add Account</DropdownItem
-            >
-            <DropdownItem class="dropdown-item hover:bg-white/5">
-              <LockIcon class="w-4 h-4 mr-2" /> Reset Password</DropdownItem
-            >
-            <DropdownItem class="dropdown-item hover:bg-white/5">
-              <HelpCircleIcon class="w-4 h-4 mr-2" /> Help</DropdownItem
-            >
+              <UserIcon class="w-4 h-4 mr-2" />Update Profile
+            </DropdownItem>
             <DropdownDivider class="border-white/[0.08]" />
-            <DropdownItem
-              class="dropdown-item hover:bg-white/5"
-              @click="onLogout"
-            >
+            <DropdownItem class="dropdown-item hover:bg-white/5" @click="onLogout">
               <ToggleRightIcon class="w-4 h-4 mr-2" />
-              Logout</DropdownItem
-            >
+              Logout
+            </DropdownItem>
           </DropdownContent>
         </DropdownMenu>
       </Dropdown>
@@ -130,6 +100,9 @@ import { normalizeDate } from "@/helpers";
 const ticketsStore = useTicketsStore();
 const { ticketList, hasMessagesFromAdmin } = storeToRefs(ticketsStore);
 
+const authStore = useAuthStore();
+const { user } = storeToRefs(authStore);
+
 const onLogout = () => {
   console.log("Logout");
   localStorage.clear();
@@ -152,7 +125,7 @@ onUnmounted(() => {
 });
 
 const goToMessagesList = (ticketId) => {
-  router.push({ name: "ticket-list", params: {ticketId: ticketId} });
+  router.push({ name: "ticket-list", params: { ticketId: ticketId } });
 };
 
 onBeforeMount(async () => {
diff --git a/src/layouts/top-menu/Main.vue b/src/layouts/top-menu/Main.vue
index 52300f7..922abd0 100644
--- a/src/layouts/top-menu/Main.vue
+++ b/src/layouts/top-menu/Main.vue
@@ -7,64 +7,46 @@
     <nav class="top-nav">
       <ul>
         <li v-for="(menu, menuKey) in formattedMenu" :key="menuKey">
-          <a
-            :href="
-              menu.subMenu
-                ? 'javascript:;'
-                : router.resolve({ name: menu.pageName }).path
-            "
-            class="top-menu"
-            :class="{
-              'top-menu--active': menu.active,
-            }"
-            @click="linkTo(menu, router, $event)"
-          >
+          <a :href="
+            menu.subMenu 
+              ? 'javascript:;'
+              : router.resolve({ name: menu.pageName }).path
+          " class="top-menu" :class="{
+            'top-menu--active': menu.active,
+          }" @click="linkTo(menu, router, $event)">
             <div class="top-menu__icon">
               <component :is="menu.icon" />
             </div>
             <div class="top-menu__title">
               {{ $t(menu.title) }}
-              <ChevronDownIcon v-if="menu.subMenu" class="top-menu__sub-icon" />
+              <ChevronDownIcon v-if="menu.subMenu && menu.subMenu.length" class="top-menu__sub-icon" />
             </div>
           </a>
+
           <!-- BEGIN: Second Child -->
           <ul v-if="menu.subMenu">
             <li v-for="(subMenu, subMenuKey) in menu.subMenu" :key="subMenuKey">
-              <a
-                :href="
-                  subMenu.subMenu
-                    ? 'javascript:;'
-                    : router.resolve({ name: subMenu.pageName }).path
-                "
-                class="top-menu"
-                @click="linkTo(subMenu, router, $event)"
-              >
+              <a :href="
+                subMenu.subMenu
+                  ? 'javascript:;'
+                  : router.resolve({ name: subMenu.pageName }).path
+              " class="top-menu" @click="linkTo(subMenu, router, $event)">
                 <div class="top-menu__icon">
                   <ActivityIcon />
                 </div>
                 <div class="top-menu__title">
                   {{ subMenu.title }}
-                  <ChevronDownIcon
-                    v-if="subMenu.subMenu"
-                    class="top-menu__sub-icon"
-                  />
+                  <ChevronDownIcon v-if="subMenu.subMenu" class="top-menu__sub-icon" />
                 </div>
               </a>
               <!-- BEGIN: Third Child -->
               <ul v-if="subMenu.subMenu">
-                <li
-                  v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu"
-                  :key="lastSubMenuKey"
-                >
-                  <a
-                    :href="
-                      lastSubMenu.subMenu
-                        ? 'javascript:;'
-                        : router.resolve({ name: lastSubMenu.pageName }).path
-                    "
-                    class="top-menu"
-                    @click="linkTo(lastSubMenu, router, $event)"
-                  >
+                <li v-for="(lastSubMenu, lastSubMenuKey) in subMenu.subMenu" :key="lastSubMenuKey">
+                  <a :href="
+                    lastSubMenu.subMenu
+                      ? 'javascript:;'
+                      : router.resolve({ name: lastSubMenu.pageName }).path
+                  " class="top-menu" @click="linkTo(lastSubMenu, router, $event)">
                     <div class="top-menu__icon">
                       <component :is="'zap-icon'" />
                     </div>
diff --git a/src/stores/top-menu.js b/src/stores/top-menu.js
index 387c00a..33f3e58 100644
--- a/src/stores/top-menu.js
+++ b/src/stores/top-menu.js
@@ -5,7 +5,7 @@ export const useTopMenuStore = defineStore("topMenu", {
     menu: [
       {
         icon: "UserIcon",
-        pageName: "account",
+        pageName: "profile",
         title: "ACCOUNT",
         subMenu: [
           {
@@ -13,6 +13,21 @@ export const useTopMenuStore = defineStore("topMenu", {
             pageName: "profile",
             title: "Profile",
           },
+          // {
+          //   icon: "UserIcon",
+          //   pageName: "profile",
+          //   title: "Personal",
+          // },
+          {
+            icon: "UserIcon",
+            pageName: "contacts",
+            title: "Contacts",
+          },
+          {
+            icon: "UserIcon",
+            pageName: "bank-account",
+            title: "Bank Info",
+          },
         ],
       },
       {