SebinNyshkim/sebin-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: migrate Navigation component

Browse source
This commit is contained in:
Sebin Nyshkim 2023-01-20 00:48:52 +01:00
parent c1b7bdbbb4
commit 267830b15d
1 changed files with 30 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

106
src/components/Navigation.vue
View file

@ -1,106 +0,0 @@
<template>
<nav class="nav">
<ul class="nav__list flex flex--row flex--nowrap flex--center-v">
<li class="nav__item" v-for="(route, idx) in routes" :key="idx">
<router-link class="nav__link" :to="route.path">
{{ route.name }}
</router-link>
<div class="nav__underline"></div>
</li>
</ul>
</nav>
</template>
<script>
export default {
props: {
routes: {
required: true,
type: Array,
},
},
};
</script>
<style lang="scss">
@import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";
.nav {
overflow: auto;
&__list {
margin: 0;
padding: 0;
list-style-type: none;
z-index: 1;
overflow: auto;
width: 100%;
@include mq-desktop {
justify-content: center;
}
}
&__item {
padding: 0.375em;
white-space: nowrap;
}
&__link {
display: block;
font-weight: bold;
line-height: 1;
color: $copy-color;
margin-bottom: 0.375em;
text-decoration: none;
&.router-link-exact-active {
color: #fff;
}
}
&__link:hover ~ &__underline {
&:before,
&:after {
width: 50%;
background-color: $copy-color;
}
}
&__link.router-link-exact-active ~ &__underline {
&:before,
&:after {
width: 50%;
background-color: #fff;
}
}
&__underline {
position: relative;
display: block;
width: 100%;
&:before,
&:after {
content: "";
position: absolute;
width: 0;
height: 0.125em;
bottom: 0;
transition: all 0.2s ease-in-out;
}
&:before {
left: 50%;
}
&:after {
right: 50%;
}
}
}
</style>