muerwre/muerwre.github.io
1
0
Fork 0
mirror of https://github.com/muerwre/muerwre.github.io.git synced 2025-04-25 02:46:39 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions

added header

Browse source
This commit is contained in:
Fedor Katurov 2022-11-10 13:20:04 +06:00
parent aae9af8e62
commit a8dd169087
8 changed files with 130 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

43
components/layout/LayoutHeader.vue Normal file
View file

@ -0,0 +1,43 @@
<template>
<div :class="$style.header">
<NuxtLink to="/" :activeClass="$style.active">Home</NuxtLink>
<NuxtLink to="/bio" :activeClass="$style.active">About me</NuxtLink>
</div>
</template>
<script lang="ts" setup></script>
<style lang="scss" module>
.header {
text-align: left;
padding: 22px 0;
a {
color: var(--color-text);
text-decoration: none;
padding: 0 25px 0 0;
position: relative;
&.active {
color: var(--color-link);
&::after {
right: 28px;
left: 3px;
background: var(--color-link);
}
}
&::after {
content: "";
background: var(--color-text);
position: absolute;
height: 2px;
bottom: -6px;
left: 50%;
right: 50%;
transition: all 0.25s;
}
}
}
</style>