From b8be3558baeca0affa4ab54c4de561e9ed11d0ee Mon Sep 17 00:00:00 2001
From: andrewwallacespeckle
 <139135120+andrewwallacespeckle@users.noreply.github.com>
Date: Tue, 20 Aug 2024 13:58:20 +0100
Subject: [PATCH] Add hover icon for external links (#2706)

---
 packages/frontend-2/components/dashboard/Sidebar.vue   | 10 +++++-----
 .../src/components/layout/sidebar/Sidebar.stories.ts   |  2 +-
 .../src/components/layout/sidebar/menu/group/Item.vue  |  5 +++++
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/frontend-2/components/dashboard/Sidebar.vue b/packages/frontend-2/components/dashboard/Sidebar.vue
index 3e5024225..26dc1ed38 100644
--- a/packages/frontend-2/components/dashboard/Sidebar.vue
+++ b/packages/frontend-2/components/dashboard/Sidebar.vue
@@ -80,7 +80,7 @@
 
           <LayoutSidebarMenuGroup title="Resources">
             <NuxtLink :to="connectorsPageUrl" target="_blank">
-              <LayoutSidebarMenuGroupItem label="Connectors">
+              <LayoutSidebarMenuGroupItem label="Connectors" external>
                 <template #icon>
                   <IconConnectors class="h-4 w-4 text-foreground-2" />
                 </template>
@@ -88,7 +88,7 @@
             </NuxtLink>
 
             <NuxtLink to="https://speckle.community/" target="_blank">
-              <LayoutSidebarMenuGroupItem label="Community forum">
+              <LayoutSidebarMenuGroupItem label="Community forum" external>
                 <template #icon>
                   <GlobeAltIcon class="h-5 w-5 text-foreground-2" />
                 </template>
@@ -99,7 +99,7 @@
               to="https://docs.google.com/forms/d/e/1FAIpQLSeTOU8i0KwpgBG7ONimsh4YMqvLKZfSRhWEOz4W0MyjQ1lfAQ/viewform"
               target="_blank"
             >
-              <LayoutSidebarMenuGroupItem label="Give us feedback">
+              <LayoutSidebarMenuGroupItem label="Give us feedback" external>
                 <template #icon>
                   <ChatBubbleLeftIcon class="h-5 w-5 text-foreground-2" />
                 </template>
@@ -107,7 +107,7 @@
             </NuxtLink>
 
             <NuxtLink to="https://speckle.guide/" target="_blank">
-              <LayoutSidebarMenuGroupItem label="Documentation">
+              <LayoutSidebarMenuGroupItem label="Documentation" external>
                 <template #icon>
                   <BriefcaseIcon class="h-5 w-5 text-foreground-2" />
                 </template>
@@ -118,7 +118,7 @@
               to="https://speckle.community/c/making-speckle/changelog"
               target="_blank"
             >
-              <LayoutSidebarMenuGroupItem label="Changelog">
+              <LayoutSidebarMenuGroupItem label="Changelog" external>
                 <template #icon>
                   <ClockIcon class="h-5 w-5 text-foreground-2" />
                 </template>
diff --git a/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts b/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
index 9b2ae6e75..794f57a5f 100644
--- a/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
+++ b/packages/ui-components/src/components/layout/sidebar/Sidebar.stories.ts
@@ -51,7 +51,7 @@ export const Dashboard: StoryObj = {
             <LayoutSidebarMenuGroupItem label="Group Item with no Icon" to="/" />
             <LayoutSidebarMenuGroupItem label="Group Item with Child" to="/">
               <LayoutSidebarMenuGroupItem label="Group Item child with Child" to="/">
-                <LayoutSidebarMenuGroupItem label="Group Item child" to="/">
+                <LayoutSidebarMenuGroupItem label="Group Item child" to="/" external>
                   <template #icon>
                     <HomeIcon class="h-5 w-5" />
                   </template>
diff --git a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
index 1b0bf9471..a4b712842 100644
--- a/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
+++ b/packages/ui-components/src/components/layout/sidebar/menu/group/Item.vue
@@ -16,6 +16,10 @@
       <span :class="$slots.icon ? '' : 'pl-2'">
         {{ label }}
       </span>
+      <ArrowUpRightIcon
+        v-if="external"
+        class="h-2.5 w-2.5 !stroke-[3px] -ml-1 -mt-1.5 opacity-0 group-hover:opacity-100"
+      />
     </div>
     <div
       v-if="tag"
@@ -49,6 +53,7 @@
 <script setup lang="ts">
 import { ref, useSlots } from 'vue'
 import Arrow from '~~/src/components/layout/sidebar/menu/group/Arrow.vue'
+import { ArrowUpRightIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps<{
   label: string