87 lines
3.8 KiB
Vue
87 lines
3.8 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
defineProps<{
|
||
|
|
name: string
|
||
|
|
icon: string
|
||
|
|
to: string
|
||
|
|
}>()
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<NuxtLink :to="to" class="flex-shrink-0 w-[190px] h-[50px] group relative flex justify-center items-center" active-class="selected">
|
||
|
|
<div class="flex items-center justify-center gap-2">
|
||
|
|
<Iconify :icon="icon" class="w-5 h-5 " />
|
||
|
|
<div class="font-medium scale-105">
|
||
|
|
{{ name }}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="absolute -z-10 w-[228px] h-[50px]" width="228" height="50" fill="none" viewBox="0 0 228 50">
|
||
|
|
<g clip-path="url(#a-item)">
|
||
|
|
<path
|
||
|
|
fill="url(#b-item)" class="transition-opacity opacity-0 group-hover:opacity-100 group-hover:animate-pulse"
|
||
|
|
fill-rule="evenodd" d="M26 2h170l32 47.726H0L26 2Z" clip-rule="evenodd"
|
||
|
|
/>
|
||
|
|
<path
|
||
|
|
fill="url(#c-item)" class="opacity-0 group-hover:opacity-100 group-hover:animate-pulse" fill-rule="evenodd"
|
||
|
|
d="M26 2h170l32 47.726H0L26 2Z" clip-rule="evenodd"
|
||
|
|
/>
|
||
|
|
<path fill="url(#d-item)" class="opacity-0 group-hover:opacity-100" d="M30 48h133v2H30z" />
|
||
|
|
<g
|
||
|
|
filter="url(#e-item)" style="mix-blend-mode:plus-lighter"
|
||
|
|
class="transition-opacity duration-500 delay-200 opacity-0 group-hover:opacity-100 group-hover:animate-pulse"
|
||
|
|
>
|
||
|
|
<path fill="#EFF9FF" fill-rule="evenodd" d="m104.174 50 3.601-6.46 4.051 6.46h-7.652Z" clip-rule="evenodd" />
|
||
|
|
</g>
|
||
|
|
<path
|
||
|
|
class="transition-opacity duration-500 delay-100 opacity-0 group-hover:opacity-100" fill="#EFF9FF"
|
||
|
|
fill-rule="evenodd" d="m104.77 50 3.04-5.453L111.23 50h-6.46Z" clip-rule="evenodd"
|
||
|
|
style="mix-blend-mode:plus-lighter"
|
||
|
|
/>
|
||
|
|
<path stroke="url(#f-item)" d="M26 1.5h-.298l-.142.262-26 48-.4.738h229.774l-.518-.777-32-48-.148-.223H26Z" />
|
||
|
|
<path fill="#AACDEB" d="M25.251.555h2v2h-2zm170 0h2v2h-2z" class="group-hover:animate-pulse" />
|
||
|
|
</g>
|
||
|
|
<defs>
|
||
|
|
<radialGradient
|
||
|
|
id="b-item" cx="0" cy="0" r="1" gradientTransform="matrix(0 57.8766 -506.007 0 114 49.726)"
|
||
|
|
gradientUnits="userSpaceOnUse"
|
||
|
|
>
|
||
|
|
<stop stop-color="#81C2F0" />
|
||
|
|
<stop offset="1" stop-color="#1D2E35" stop-opacity=".01" />
|
||
|
|
</radialGradient>
|
||
|
|
<radialGradient
|
||
|
|
id="c-item" cx="0" cy="0" r="1" gradientTransform="matrix(0 57.8766 -506.007 0 114 49.726)"
|
||
|
|
gradientUnits="userSpaceOnUse"
|
||
|
|
>
|
||
|
|
<stop stop-color="#81C2F0" />
|
||
|
|
<stop offset="1" stop-color="#1D2E35" stop-opacity=".01" />
|
||
|
|
</radialGradient>
|
||
|
|
<linearGradient id="d-item" x1="64.693" x2="64.839" y1="49.989" y2="45.08" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop stop-color="#fff" stop-opacity=".01" />
|
||
|
|
<stop offset=".484" stop-color="#fff" stop-opacity=".5" />
|
||
|
|
<stop offset="1" stop-color="#fff" stop-opacity=".01" />
|
||
|
|
</linearGradient>
|
||
|
|
<linearGradient id="f-item" x1="51.918" x2="51.918" y1="2" y2="28.14" gradientUnits="userSpaceOnUse">
|
||
|
|
<stop stop-color="#7194A8" />
|
||
|
|
<stop offset="1" stop-color="#7194A8" stop-opacity=".01" />
|
||
|
|
</linearGradient>
|
||
|
|
<clipPath id="a-item">
|
||
|
|
<path fill="#fff" d="M0 .555h228V50H0z" />
|
||
|
|
</clipPath>
|
||
|
|
<filter
|
||
|
|
id="e-item" width="34.834" height="33.642" x="90.583" y="29.949" color-interpolation-filters="sRGB"
|
||
|
|
filterUnits="userSpaceOnUse"
|
||
|
|
>
|
||
|
|
<feFlood flood-opacity="0" result="BackgroundImageFix" />
|
||
|
|
<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
|
||
|
|
<feGaussianBlur result="effect1_foregroundBlur_56_692" stdDeviation="6.796" />
|
||
|
|
</filter>
|
||
|
|
</defs>
|
||
|
|
</svg>
|
||
|
|
</NuxtLink>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.selected svg path{
|
||
|
|
opacity: 100;
|
||
|
|
}
|
||
|
|
</style>
|