changes
This commit is contained in:
Moritz Ruth
parent
82447b6a92
commit
e55d5feced
28 changed files with 2006 additions and 1543 deletions
323
components/NavigationBar.vue
Normal file
323
components/NavigationBar.vue
Normal file
|
|
@ -0,0 +1,323 @@
|
|||
<template>
|
||||
<div class="navigation-bar" :class="classes">
|
||||
<div class="navigation-bar__placeholder"></div>
|
||||
<nav class="navigation-bar__content">
|
||||
<div class="navigation-bar__title-container">
|
||||
<span
|
||||
class="navigation-bar__title"
|
||||
:class="{ 'navigation-bar__title--show': showTitle }"
|
||||
>
|
||||
{{ title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="navigation-bar__toggle" @click="open = !open">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="navigation-bar__links">
|
||||
<div
|
||||
v-for="item in $options.items"
|
||||
class="navigation-bar__link-container"
|
||||
:key="item.label"
|
||||
>
|
||||
<nuxt-link
|
||||
v-if="item.to"
|
||||
class="navigation-bar__link"
|
||||
:to="item.to"
|
||||
@click.native.passive="open = false"
|
||||
>
|
||||
{{ item.label }}
|
||||
</nuxt-link>
|
||||
<a
|
||||
v-else
|
||||
class="navigation-bar__link"
|
||||
:key="item.label"
|
||||
rel="noopener"
|
||||
:href="item.href"
|
||||
@click.passive="open = false"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "~@/assets/styles/screenSize";
|
||||
@use "~@/assets/styles/colors";
|
||||
@use "~@/assets/styles/content";
|
||||
@use "~@/assets/styles/z-indexes";
|
||||
|
||||
body {
|
||||
--navigation-bar-height: 80px;
|
||||
}
|
||||
|
||||
.navigation-bar__placeholder {
|
||||
height: var(--navigation-bar-height);
|
||||
}
|
||||
|
||||
.navigation-bar__content {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: z-indexes.$navigation-bar;
|
||||
|
||||
height: var(--navigation-bar-height);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 30px;
|
||||
|
||||
.navigation-bar--show-background & {
|
||||
background: colors.$background;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar__toggle {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
background-color: colors.$background-c;
|
||||
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
|
||||
transition: 200ms linear;
|
||||
transition-property: opacity, transform;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar__title-container {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.navigation-bar__title {
|
||||
font-size: 1.4rem;
|
||||
display: block;
|
||||
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transition: 200ms ease;
|
||||
transition-property: opacity, transform;
|
||||
|
||||
&.navigation-bar__title--show {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar__links {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
background: colors.$background;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: 200ms ease opacity;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.navigation-bar__link-container {
|
||||
position: relative;
|
||||
background: white;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
background: linear-gradient(135deg, colors.$blue 25%, colors.$pink, colors.$blue 75%);
|
||||
background-size: 400% 400%;
|
||||
animation: 1s infinite linear reverse navigation-bar__gradient;
|
||||
|
||||
pointer-events: none;
|
||||
mix-blend-mode: multiply;
|
||||
|
||||
opacity: 0;
|
||||
transition: 200ms opacity ease;
|
||||
}
|
||||
|
||||
&:hover, &:focus-within {
|
||||
&::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.navigation-bar__link {
|
||||
outline: none;
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar__link {
|
||||
display: block;
|
||||
color: colors.$background-c;
|
||||
text-decoration: none;
|
||||
font-size: 1.4rem;
|
||||
|
||||
background: black;
|
||||
padding: 10px;
|
||||
|
||||
transition: 200ms transform ease;
|
||||
}
|
||||
|
||||
@keyframes navigation-bar__gradient {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar--open {
|
||||
.navigation-bar__toggle > span {
|
||||
&:nth-child(1) {
|
||||
transform: translateY(10px) rotate(45deg);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: translateY(-10px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-bar__links {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@include screenSize.notMobile {
|
||||
body {
|
||||
--navigation-bar-height: 100px;
|
||||
}
|
||||
|
||||
.navigation-bar__content {
|
||||
@include content.content(40px);
|
||||
}
|
||||
|
||||
.navigation-bar__title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.navigation-bar__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navigation-bar__links {
|
||||
position: static;
|
||||
width: auto;
|
||||
height: auto;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.navigation-bar__link-container:not(:last-child) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import { toModifierClasses } from "@/assets/js/toModifierClasses";
|
||||
|
||||
const ITEMS = [
|
||||
{
|
||||
label: "Start",
|
||||
to: "/"
|
||||
},
|
||||
{
|
||||
label: "Projects",
|
||||
to: "/projects"
|
||||
}
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "NavigationBar",
|
||||
props: {
|
||||
backgroundAfterScroll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
open: false,
|
||||
scrollPosition: 0
|
||||
}),
|
||||
computed: {
|
||||
showTitle: vm => vm.scrollPosition > 60,
|
||||
showBackground: vm => vm.backgroundAfterScroll ? vm.scrollPosition > 0 : true,
|
||||
classes() {
|
||||
const { open, showBackground } = this;
|
||||
|
||||
return toModifierClasses("navigation-bar", {
|
||||
open,
|
||||
showBackground
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const scrollListener = () => {
|
||||
this.scrollPosition = window.scrollY;
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", scrollListener, { passive: true });
|
||||
|
||||
this.$on("hook:beforeDestroy", () => {
|
||||
window.removeEventListener("scroll", scrollListener);
|
||||
});
|
||||
|
||||
scrollListener();
|
||||
},
|
||||
items: ITEMS
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue