96 lines
2.9 KiB
Vue
96 lines
2.9 KiB
Vue
<template>
|
|
<header class="flex flex-row items-center gap-2 pb-4 border-b-2 sm:gap-4 lg:pb-8">
|
|
<span class="px-3 py-2 rounded bg-fuchsia-300">
|
|
<svg
|
|
class="inline stroke-purple-900"
|
|
height="32"
|
|
viewBox="0 0 21 21"
|
|
width="21"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
><g
|
|
fill="none"
|
|
fill-rule="evenodd"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
transform="translate(4 3)"
|
|
><path d="m6.5.5 6 4v6l-6 4-6-4v-6z" /><circle
|
|
cx="6.5"
|
|
cy="7.5"
|
|
r="3"
|
|
/></g></svg>
|
|
</span>
|
|
|
|
<h1 class="font-bold font-mono text-2xl text-gray-900 lg:text-4xl">
|
|
OG:IMAGE
|
|
</h1>
|
|
|
|
<div class="ml-auto">
|
|
<RouterLink
|
|
v-slot="{isActive, href, navigate}"
|
|
:to="{name: 'home'}"
|
|
custom="true"
|
|
>
|
|
<a
|
|
v-bind="$attrs"
|
|
:href="href"
|
|
class="rounded ml-2 p-3"
|
|
:class="{'bg-slate-300': isActive}"
|
|
@click="navigate"
|
|
>
|
|
<svg
|
|
class="inline"
|
|
height="21"
|
|
viewBox="0 0 21 21"
|
|
width="21"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
><g
|
|
fill="none"
|
|
fill-rule="evenodd"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
transform="translate(1 1)"
|
|
><path d="m.5 9.5 9-9 9 9" /><path d="m2.5 7.5v8c0 .5522847.44771525 1 1 1h3c.55228475 0 1-.4477153 1-1v-4c0-.5522847.44771525-1 1-1h2c.5522847 0 1 .4477153 1 1v4c0 .5522847.4477153 1 1 1h3c.5522847 0 1-.4477153 1-1v-8" /></g></svg>
|
|
|
|
Home
|
|
</a>
|
|
</RouterLink>
|
|
|
|
<RouterLink
|
|
v-slot="{isActive, href, navigate}"
|
|
:to="{name: 'About'}"
|
|
custom="true"
|
|
>
|
|
<a
|
|
v-bind="$attrs"
|
|
:href="href"
|
|
class="rounded ml-2 p-3"
|
|
:class="{'bg-slate-300': isActive}"
|
|
@click="navigate"
|
|
>
|
|
<svg
|
|
class="inline"
|
|
height="21"
|
|
viewBox="0 0 21 21"
|
|
width="21"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
><g
|
|
fill="none"
|
|
fill-rule="evenodd"
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
transform="translate(3 3)"
|
|
><circle
|
|
cx="7.5"
|
|
cy="5.5"
|
|
r="2"
|
|
/><path d="m.5 3.5h1v-1c0-1.1045695.8954305-2 2-2h8c1.1045695 0 2 .8954305 2 2v10c0 1.1045695-.8954305 2-2 2h-8c-1.1045695 0-2-.8954305-2-2v-1h-1" /><path d="m.5 7.5h1" /><path d="m.5 5.5h1" /><path d="m.5 9.5h1" /><path d="m10.5 10.5v-1c0-1.1045695-.8954305-2-2-2h-2c-1.1045695 0-2 .8954305-2 2v1c0 .5522847.44771525 1 1 1h4c.5522847 0 1-.4477153 1-1z" /></g></svg>
|
|
|
|
About
|
|
</a>
|
|
</RouterLink>
|
|
</div>
|
|
</header>
|
|
</template>
|