#358 fix: Navigation: on click horizontal label

inikoo · May 31, 2024 · 65fb821 · 65fb821
1 parent bbbd6f6
commit 65fb821
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/resources/js/Layouts/Grp/MenuTopRight.vue b/resources/js/Layouts/Grp/MenuTopRight.vue
@@ -76,7 +76,7 @@ const isUserMac = navigator.platform.includes('Mac')  // To check the user's Ope
                         <template #button>
                             <div tabindex="-1" class="relative text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-500">
                                 <FontAwesomeIcon aria-hidden="true" icon="fa-regular fa-bell" size="lg" />
-                                <FontAwesomeIcon icon='fas fa-circle' class='text-blue-500 absolute top-0.5 -right-0.5 text-[6px]' fixed-width aria-hidden='true' />
+                                <FontAwesomeIcon icon='fas fa-circle' class='animate-pulse text-blue-500 absolute top-[1px] -right-0.5 text-[6px]' fixed-width aria-hidden='true' />
                             </div>
                         </template>
                         <template #content="{ close }">

diff --git a/resources/js/Layouts/Grp/NavigationHorizontal.vue b/resources/js/Layouts/Grp/NavigationHorizontal.vue
@@ -47,8 +47,6 @@ const props = defineProps<{
 
 }>()
 
-console.log('errops', props.orgNav.fulfilments_navigation)
-
 interface MergeNavigation {
     key: string  // 'uk', 'awd'
     value: {
@@ -70,23 +68,27 @@ const fulfilmentsNav: () => MergeNavigation[] = () => {
     return filterFulfilmentsOpen.map(([key, subNavObject]) => {
         return {
             key: key,
-            value: subNavObject,
+            value: {
+                type: subNavObject.type,
+                subNavigation: subNavObject.subNavigation
+            },
             type: 'fulfilment',
-            root: 'grp.org.fulfilments.show.'
+            root: 'grp.org.fulfilments.'
         }
     })
 }
 const shopsNav: () => MergeNavigation[] = () => {
     const filterShopsOpen = Object.entries(props.orgNav.shops_navigation.navigation).filter(([key, subNavList]) => shopsOpenSlugs?.includes(key))
 
-    return filterShopsOpen.map(([key, subNavList]) => {
+    return filterShopsOpen.map(([key, subNavObject]) => {
         return {
             key: key,
             value: {
-            type: subNavList.type,
-            subNavigation: subNavList.subNavigation },
+                type: subNavObject.type,
+                subNavigation: subNavObject.subNavigation
+            },
             type: 'shop',
-            root: 'grp.org.shops.show.'
+            root: 'grp.org.shops.'
         }
     })
 }
@@ -155,6 +157,17 @@ const isShowHorizontal = () => {
     return (isShopOpen || isFulfilmentOpen) 
 }
 
+// Route for label 'UK (Shop)'
+const routeLabelHorizontal = () => {
+    if(currentNavigation()?.type === 'fulfilment') {
+        return route('grp.org.fulfilments.show.operations.dashboard', [layout.currentParams.organisation, currentNavigation()?.key])
+    } else if (currentNavigation()?.type === 'shop'){
+        return route('grp.org.shops.show', [layout.currentParams.organisation, currentNavigation()?.key])
+    } else {
+        return '#'
+    }
+}
+
 </script>
 
 <template>
@@ -171,9 +184,7 @@ const isShowHorizontal = () => {
             :style="{ color: layout.app.theme[1] + '99' }">
 
             <!-- Label: 'UK (Shop)' -->
-            <div class="relative flex gap-x-1.5 items-center transition-all"
-                :class="layout.leftSidebar.show ? 'pt-1' : 'pt-1'"
-            >
+            <Link :href="routeLabelHorizontal()" class="relative flex gap-x-1.5 items-center pt-1  hover:text-gray-100">
                 <Transition name="spin-to-down">
                     <FontAwesomeIcon v-if="currentNavigation()?.value.type === 'b2b'" icon="fal fa-store-alt" class='text-xs' fixed-width aria-hidden='true' />
                     <FontAwesomeIcon v-else-if="currentNavigation()?.value.type === 'fulfilment'" icon="fal fa-hand-holding-box" class='text-xs' fixed-width aria-hidden='true' />
@@ -195,7 +206,7 @@ const isShowHorizontal = () => {
                         </Transition>
                     </div>
                 </Transition>
-            </div>
+            </Link>
 
 
             <!-- Section: Arrow left-right -->