mirror of
https://github.com/tenrok/vue-select.git
synced 2026-05-17 02:29:37 +03:00
Jeff Sagal
130 lines
6.2 KiB
Vue
130 lines
6.2 KiB
Vue
<script setup lang="ts">
|
|
import { NuxtLink } from '#components'
|
|
import ColorThemeSwitcher from '~/components/ThemeSwitcher.vue'
|
|
import { useWindowScroll } from '@vueuse/core'
|
|
|
|
const { y } = useWindowScroll()
|
|
|
|
const isScrolled = computed(() => y.value !== 0)
|
|
</script>
|
|
|
|
<template>
|
|
<header
|
|
:class="[
|
|
'sticky top-0 z-50 flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8',
|
|
isScrolled
|
|
? 'dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75'
|
|
: 'dark:bg-transparent',
|
|
]"
|
|
>
|
|
<div class="mr-6 flex lg:hidden">
|
|
<button type="button" class="relative" aria-label="Open navigation">
|
|
<svg
|
|
aria-hidden="true"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
class="h-6 w-6 stroke-slate-500"
|
|
>
|
|
<path d="M4 7h16M4 12h16M4 17h16"></path>
|
|
</svg>
|
|
</button>
|
|
<div
|
|
style="
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
display: none;
|
|
"
|
|
></div>
|
|
</div>
|
|
<div class="relative flex flex-grow basis-0 items-center">
|
|
<NuxtLink
|
|
aria-label="Home page"
|
|
href="/"
|
|
class="flex items-center space-x-2"
|
|
>
|
|
<svg
|
|
fill="none"
|
|
class="h-9 w-9"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 87 68"
|
|
>
|
|
<path
|
|
class="fill-current fill-[#0EE2FF] dark:fill-sky-900"
|
|
fill-rule="evenodd"
|
|
d="M62.1429 6.1818H24.8571c-10.2961 0-18.6428 8.3031-18.6428 18.5455v18.5454c0 10.2424 8.3467 18.5455 18.6428 18.5455h37.2858c10.2961 0 18.6428-8.3031 18.6428-18.5455V24.7273c0-10.2424-8.3467-18.5455-18.6428-18.5455ZM24.8571 0C11.1289 0 0 11.0708 0 24.7273v18.5454C0 56.9292 11.1289 68 24.8571 68h37.2858C75.8711 68 87 56.9292 87 43.2727V24.7273C87 11.0708 75.8711 0 62.1429 0H24.8571Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
<path
|
|
class="fill-current fill-[#111112] dark:fill-[#0EE2FF]"
|
|
fill-rule="evenodd"
|
|
d="M60.1875 9.125h-33.375c-9.2163 0-16.6875 7.4712-16.6875 16.6875V42.5c0 9.2162 7.4712 16.6875 16.6875 16.6875h33.375c9.2162 0 16.6875-7.4713 16.6875-16.6875V25.8125c0-9.2163-7.4713-16.6875-16.6875-16.6875Zm-33.375-5.5625c-12.2883 0-22.25 9.9617-22.25 22.25V42.5c0 12.2883 9.9617 22.25 22.25 22.25h33.375c12.2883 0 22.25-9.9617 22.25-22.25V25.8125c0-12.2883-9.9617-22.25-22.25-22.25h-33.375Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
<path
|
|
class="fill-current fill-[#000] dark:fill-sky-50"
|
|
fill-rule="evenodd"
|
|
d="M55.0064 22.7105a2.2807 2.2807 0 0 1 .6676 1.6127v9.6758a2.2808 2.2808 0 0 1-2.2803 2.241 2.2802 2.2802 0 0 1-2.2802-2.241v-7.3956h-7.3956a2.2804 2.2804 0 0 1-1.587-3.8788 2.2808 2.2808 0 0 1 1.587-.6817h9.6758a2.2805 2.2805 0 0 1 1.6127.6676ZM34.042 31.7188a2.2807 2.2807 0 0 1 2.2803 2.2802v7.3956h7.3956a2.2804 2.2804 0 0 1 2.241 2.2803 2.2806 2.2806 0 0 1-2.241 2.2803H34.042a2.2808 2.2808 0 0 1-2.2803-2.2803V33.999a2.2807 2.2807 0 0 1 2.2803-2.2802Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
|
|
<span class="font-bold text-sky-900 dark:text-sky-50">Vue Select</span>
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="-my-5 mr-6 sm:mr-8 md:mr-0">
|
|
<button
|
|
type="button"
|
|
class="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-80 md:flex-none md:rounded-lg md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-slate-200 md:hover:ring-slate-300 dark:md:bg-slate-800/75 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-slate-700/40 dark:md:hover:ring-slate-500 lg:w-96"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
viewBox="0 0 20 20"
|
|
class="h-5 w-5 flex-none fill-slate-400 group-hover:fill-slate-500 dark:fill-slate-500 md:group-hover:fill-slate-400"
|
|
>
|
|
<path
|
|
d="M16.293 17.707a1 1 0 0 0 1.414-1.414l-1.414 1.414ZM9 14a5 5 0 0 1-5-5H2a7 7 0 0 0 7 7v-2ZM4 9a5 5 0 0 1 5-5V2a7 7 0 0 0-7 7h2Zm5-5a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7v2Zm8.707 12.293-3.757-3.757-1.414 1.414 3.757 3.757 1.414-1.414ZM14 9a4.98 4.98 0 0 1-1.464 3.536l1.414 1.414A6.98 6.98 0 0 0 16 9h-2Zm-1.464 3.536A4.98 4.98 0 0 1 9 14v2a6.98 6.98 0 0 0 4.95-2.05l-1.414-1.414Z"
|
|
></path>
|
|
</svg>
|
|
<span
|
|
class="sr-only md:not-sr-only md:ml-2 md:text-slate-500 md:dark:text-slate-400"
|
|
>
|
|
Search docs</span
|
|
>
|
|
<kbd
|
|
class="ml-auto hidden font-medium text-slate-400 dark:text-slate-500 md:block"
|
|
>
|
|
<kbd class="font-sans">⌘</kbd>
|
|
<kbd class="font-sans">K</kbd>
|
|
</kbd>
|
|
</button>
|
|
</div>
|
|
<div class="relative flex basis-0 justify-end gap-6 sm:gap-8 md:flex-grow">
|
|
<ColorThemeSwitcher />
|
|
<a
|
|
class="group"
|
|
aria-label="GitHub"
|
|
href="https://github.com/sagalbot/vue-select"
|
|
>
|
|
<svg
|
|
aria-hidden="true"
|
|
viewBox="0 0 16 16"
|
|
class="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300"
|
|
>
|
|
<path
|
|
d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</header>
|
|
</template>
|