Add hover icon for external links (#2706)
This commit is contained in:
committed by
GitHub
parent
8a9b179fe7
commit
b8be3558ba
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user