Add hover icon for external links (#2706)

This commit is contained in:
andrewwallacespeckle
2024-08-20 13:58:20 +01:00
committed by GitHub
parent 8a9b179fe7
commit b8be3558ba
3 changed files with 11 additions and 6 deletions
@@ -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>
@@ -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>
@@ -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