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

refactor: split up navigation components for easier i18n

Browse source
This commit is contained in:
Sebin Nyshkim 2023-03-25 02:05:30 +01:00
parent 9536a6fa77
commit 7fe9cdeef3
3 changed files with 97 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/App.vue
View file

@ -3,10 +3,19 @@ import { RouterView } from "vue-router";
import SiteNavigation from "@/components/SiteNavigation.vue";
import SiteFooter from "@/components/SiteFooter.vue";
import { version } from "../package.json";
import NavigationItem from "@/components/NavigationItem.vue";
import router from "@/router";
</script>
<template>
<SiteNavigation />
<SiteNavigation>
<NavigationItem
v-for="(route, idx) in router.options.routes"
:key="idx"
:icon="route.meta?.icon"
:href="route.path"
>{{ $t(`${route.meta?.title}`) }}</NavigationItem>
</SiteNavigation>
<main>
<RouterView />

86
src/components/NavigationItem.vue Normal file
View file

@ -0,0 +1,86 @@
<script setup lang="ts">
import { RouterLink } from "vue-router";
interface Props {
icon: unknown | object;
href: string;
}
defineProps<Props>();
</script>
<template>
<RouterLink class="navigation__link" :to="href">
<component class="navigation__link-icon" :is="icon"></component>
<span class="navigation__link-text">
<slot></slot>
</span>
</RouterLink>
</template>
<style lang="scss">
.navigation {
&__link {
flex: var(--navigation-link-flex);
display: flex;
flex-flow: row nowrap;
justify-content: var(--navigation-link-justify);
align-items: center;
height: var(--navigation-link-height);
padding: var(--navigation-link-padding);
color: var(--color-router-link);
box-shadow: none;
&:hover {
box-shadow: var(--navigation-link-box-shadow);
svg {
fill: var(--color-router-link-hover);
}
}
&:hover &-text {
color: var(--color-router-link-hover);
}
&:last-child {
margin: var(--navigation-link-last-child-margin);
}
> * {
flex: 1 0 0;
}
&.router-link-exact-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: var(--navigation-link-display);
font-size: var(--navigation-link-text-font-size);
margin: 0 0 0 1rem;
white-space: nowrap;
}
}
</style>

78
src/components/SiteNavigation.vue
View file

@ -6,20 +6,7 @@ import { RouterLink } from "vue-router";
<template>
<nav class="navigation">
<div class="navigation__list">
<RouterLink
class="navigation__link"
v-for="(route, idx) in router.options.routes"
:key="idx"
:to="route.path"
>
<component
class="navigation__link-icon"
:is="route.meta?.icon"
></component>
<span class="navigation__link-text">
{{ route.meta?.title }}
</span>
</RouterLink>
<slot></slot>
</div>
</nav>
</template>
@ -51,68 +38,5 @@ import { RouterLink } from "vue-router";
width: 100%;
height: 100%;
}
&__link {
flex: var(--navigation-link-flex);
display: flex;
flex-flow: row nowrap;
justify-content: var(--navigation-link-justify);
align-items: center;
height: var(--navigation-link-height);
padding: var(--navigation-link-padding);
color: var(--color-router-link);
box-shadow: none;
&:hover {
box-shadow: var(--navigation-link-box-shadow);
svg {
fill: var(--color-router-link-hover);
}
}
&:hover &-text {
color: var(--color-router-link-hover);
}
&:last-child {
margin: var(--navigation-link-last-child-margin);
}
> * {
flex: 1 0 0;
}
&.router-link-exact-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: var(--navigation-link-display);
font-size: var(--navigation-link-text-font-size);
margin: 0 0 0 1rem;
white-space: nowrap;
}
}
</style>