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

refactor: overhaul SiteNavigation component

Browse source
This commit is contained in:
Sebin Nyshkim 2022-09-29 02:20:44 +02:00
parent 368dfcec97
commit 9d4f443363
1 changed files with 81 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

163
src/components/SiteNavigation.vue
View file

@ -1,122 +1,121 @@
<script setup lang="ts"> <script setup lang="ts">
import router from "@/router"; import router from "@/router";
import { RouterLink } from "vue-router"; import { RouterLink } from "vue-router";
import NavToggle from "@/components/NavToggle.vue";
interface Props {
isActive: boolean;
}
const props = defineProps<Props>();
</script> </script>
<template> <template>
<nav class="navigation" :class="{ open: props.isActive }"> <nav class="navigation">
<div class="navigation__background" @click="$emit('selected')"></div> <div class="navigation__list">
<RouterLink
<NavToggle class="navigation__toggle" @click="$emit('selected')" /> class="navigation__link"
<ul class="navigation__list">
<li
class="navigation__item"
v-for="(route, idx) in router.options.routes" v-for="(route, idx) in router.options.routes"
:key="idx" :key="idx"
:to="route.path"
> >
<RouterLink :to="route.path" @click="$emit('selected')"> <component
class="navigation__link-icon"
:is="route.meta?.icon"
></component>
<span class="navigation__link-text">
{{ route.meta?.title }} {{ route.meta?.title }}
</RouterLink> </span>
</li> </RouterLink>
</ul> </div>
</nav> </nav>
</template> </template>
<style lang="scss"> <style lang="scss">
.navigation { .navigation {
position: fixed; position: fixed;
z-index: 9000; top: var(--navigation-position-top);
right: var(--navigation-position-right);
bottom: var(--navigation-position-bottom);
left: var(--navigation-position-left);
overflow: hidden;
&__background { width: var(--navigation-width);
position: fixed; height: var(--navigation-height);
background-color: rgba(#000, 0); background-color: var(--color-navigation-background);
backdrop-filter: blur(0rem);
transition: 1s; transition: 0.4s;
} z-index: 1;
&.open &__background { @media (hover: hover) {
top: 0; &:hover {
right: 0; width: var(--navigation-width-expanded);
bottom: 0; }
left: 0;
background-color: rgba(#000, 0.75); &:hover &__link-text {
backdrop-filter: blur(0.25rem); display: var(--navigation-link-display-hover);
} }
&__toggle {
display: none;
position: fixed;
z-index: 9000;
}
&.open &__toggle {
display: flex;
top: 0;
left: 0;
} }
&__list { &__list {
background-color: var(--color-navigation-background); display: flex;
width: var(--navigation-width); flex-flow: var(--navigation-flow);
justify-content: var(--navigation-justify);
align-items: var(--navigation-align);
list-style: none; width: 100%;
height: 100%;
margin: 0;
padding: 3.5rem 0 0 0;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: -100vw;
transition: left ease-in-out 0.4s;
} }
&.open &__list { &__link {
left: 0; flex: var(--navigation-link-flex);
} display: flex;
flex-flow: row nowrap;
justify-content: var(--navigation-link-justify);
align-items: center;
&__item { height: var(--navigation-link-height);
font-size: var(--navigation-item-font-size);
line-height: var(--navigation-item-line-height); padding: var(--navigation-link-padding);
}
a {
display: block;
font-weight: bold;
color: var(--color-router-link); color: var(--color-router-link);
padding: 0 var(--container-spacing-right-safe) 0 box-shadow: none;
var(--container-spacing-left-safe);
box-shadow: inset 0 0 0 0 var(--color-link-text-underline);
&:hover { &:hover {
color: var(--color-router-link-hover); box-shadow: var(--navigation-link-box-shadow);
box-shadow: inset var(--navigation-width) 0 0 0 var(--color-router-link);
svg {
fill: var(--color-router-link-hover);
}
} }
&:before { > * {
content: "➤"; flex: 1 0 0;
font-size: 2rem;
margin: 0 1rem 0 0;
display: inline-block;
width: 2rem;
} }
&.router-link-exact-active { &.router-link-exact-active {
color: var(--color-router-link-active); color: var(--color-router-link-hover);
background-color: var(--color-router-link);
&:hover {
color: var(--color-router-link-hover);
}
svg {
fill: var(--color-router-link-hover);
}
}
}
&__link-icon {
width: var(--navigation-link-icon-size);
min-width: var(--navigation-link-icon-size);
max-width: var(--navigation-link-icon-size);
margin: 0 var(--navigation-link-icon-spacing);
fill: var(--color-router-link);
}
&__link-text {
display: none;
font-size: var(--navigation-link-text-font-size);
margin: 0 0 0 1rem;
&:hover {
color: var(--color-router-link-hover);
} }
} }
} }