andrewwallacespeckle
c771fc8553
* Update Nav Link Font weight. Nowrap badge * Plus spacing * Workspace page tidy up * Mobile testing * Responsive fixes * Fix clipping of avatar * Adjust workspace item pl * Square the plus button * Font overwrites for workspace items in settings * Remove unused props
55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<template>
|
|
<div
|
|
class="text-foreground hover:text-primary-focus transition truncate flex gap-1 items-center ml-1"
|
|
>
|
|
<div v-if="separator">
|
|
<svg
|
|
width="8"
|
|
height="24"
|
|
viewBox="0 0 8 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="text-outline-2"
|
|
>
|
|
<path d="M2 18L6 6" stroke="currentColor" />
|
|
</svg>
|
|
</div>
|
|
<NuxtLink
|
|
:to="disableLink ? undefined : to"
|
|
class="flex gap-1 items-center text-body-xs ml-0.5 text-foreground-2 select-none truncate font-medium"
|
|
:class="disableLink ? '' : 'hover:!text-foreground'"
|
|
active-class="group is-active !text-foreground"
|
|
>
|
|
<div class="truncate">
|
|
{{ name || to }}
|
|
</div>
|
|
<!-- Chevron to return in future -->
|
|
<!-- <ChevronDownIcon v-if="!hideChevron" class="h-2.5 w-2.5" /> -->
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
defineProps({
|
|
separator: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
hideChevron: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
to: {
|
|
type: String,
|
|
default: '/'
|
|
},
|
|
name: {
|
|
type: String,
|
|
default: null
|
|
},
|
|
disableLink: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
})
|
|
</script>
|