Add navigation
This commit is contained in:
Moritz Ruth
parent
05c9afb3b5
commit
fb02b833cd
7 changed files with 298 additions and 10 deletions
11
assets/css/_mobile.scss
Normal file
11
assets/css/_mobile.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@mixin mobile() {
|
||||
@media (max-width: 800px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin notMobile() {
|
||||
@media (min-width: 801px) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
9
assets/css/_variables.scss
Normal file
9
assets/css/_variables.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
$content-width: 1000px;
|
||||
$content-padding: 20px;
|
||||
$gutter-size: 40px;
|
||||
|
||||
$black-brighter: #0e0e0e;
|
||||
|
||||
$blue: #39a8f3;
|
||||
$on-blue: black;
|
||||
$blue-darker: #3695d8;
|
||||
13
assets/css/elements/link.scss
Normal file
13
assets/css/elements/link.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@import "../variables";
|
||||
|
||||
.link {
|
||||
color: $blue;
|
||||
text-decoration: none;
|
||||
|
||||
transition: 100ms linear opacity;
|
||||
opacity: 1;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,13 @@
|
|||
@import "mobile";
|
||||
|
||||
:root {
|
||||
--navbar-height: 100px;
|
||||
|
||||
@include mobile {
|
||||
--navbar-height: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
*, ::before, ::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
|
|
|
|||
229
components/NavigationBar.vue
Normal file
229
components/NavigationBar.vue
Normal file
|
|
@ -0,0 +1,229 @@
|
|||
<template>
|
||||
<nav class="layout-navigation" :class="{ 'show-background': showBackground, open }">
|
||||
<div class="layout-navigation__toggle" @click="open = !open">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="layout-navigation__container">
|
||||
<div class="layout-navigation__links">
|
||||
<template v-for="item in $options.navigationItems">
|
||||
<nuxt-link
|
||||
v-if="item.to"
|
||||
:key="item.to"
|
||||
:class="{ 'require-exact-active': item.requireExactActive }"
|
||||
:to="item.to"
|
||||
@click.native.passive="open = false"
|
||||
>
|
||||
{{ item.label }}
|
||||
</nuxt-link>
|
||||
<a
|
||||
v-else
|
||||
:key="item.to"
|
||||
rel="noopener"
|
||||
:href="item.href"
|
||||
@click.native.passive="open = false"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "~@/assets/css/_mobile";
|
||||
|
||||
.layout-navigation {
|
||||
height: var(--navbar-height);
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
|
||||
font-size: 1.1rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
background-color: transparent;
|
||||
|
||||
&.show-background {
|
||||
backdrop-filter: blur(5px);
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.layout-navigation__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layout-navigation__container {
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
width: 1000px;
|
||||
}
|
||||
|
||||
.layout-navigation__links {
|
||||
float: right;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
margin-right: 40px;
|
||||
position: relative;
|
||||
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 0;
|
||||
background-color: black;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
|
||||
opacity: 0;
|
||||
transition: 200ms linear opacity;
|
||||
}
|
||||
|
||||
&:hover, &.nuxt-link-active:not(.require-exact-active), &.require-exact-active.nuxt-link-exact-active {
|
||||
&::after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include mobile {
|
||||
.layout-navigation__toggle {
|
||||
display: block;
|
||||
|
||||
position: relative;
|
||||
left: 30px;
|
||||
z-index: 2;
|
||||
|
||||
& > span {
|
||||
display: block;
|
||||
|
||||
background-color: black;
|
||||
|
||||
width: 30px;
|
||||
height: 2px;
|
||||
|
||||
transition: 200ms linear;
|
||||
transition-property: opacity, transform;
|
||||
|
||||
&:nth-child(2) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-navigation__container {
|
||||
pointer-events: none;
|
||||
|
||||
background-color: white;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
margin: 0;
|
||||
padding-top: var(--navbar-height);
|
||||
|
||||
opacity: 0;
|
||||
transition: 200ms ease-out opacity;
|
||||
}
|
||||
|
||||
.layout-navigation__links {
|
||||
float: none;
|
||||
|
||||
& > a {
|
||||
display: block;
|
||||
width: fit-content;
|
||||
margin: 0 auto 20px;
|
||||
font-size: 1.5rem;
|
||||
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
transition: 400ms ease-out;
|
||||
transition-property: opacity, transform;
|
||||
|
||||
&:after {
|
||||
top: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.layout-navigation.open {
|
||||
.layout-navigation__toggle > span {
|
||||
&:nth-child(1) {
|
||||
transform: translateY(10px) rotate(45deg);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
transform: translateY(-10px) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.layout-navigation__container {
|
||||
pointer-events: auto;
|
||||
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.layout-navigation__links > a {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const NAVIGATION_ITEMS = [
|
||||
{
|
||||
label: "Home",
|
||||
to: "/",
|
||||
requireExactActive: true
|
||||
},
|
||||
{
|
||||
label: "Projects",
|
||||
to: "/projects"
|
||||
}
|
||||
];
|
||||
|
||||
export default {
|
||||
name: "NavigationBar",
|
||||
navigationItems: NAVIGATION_ITEMS,
|
||||
props: {
|
||||
showBackground: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
open: false
|
||||
})
|
||||
};
|
||||
</script>
|
||||
13
layouts/none.vue
Normal file
13
layouts/none.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<nuxt/>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "NoneLayout"
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,21 +1,22 @@
|
|||
<template>
|
||||
<main class="index-page">
|
||||
<NavigationBar show-background/>
|
||||
<AnimatedLogo/>
|
||||
<div class="index-page__content">
|
||||
<div class="index-page__name">
|
||||
Moritz Ruth
|
||||
</div>
|
||||
<div class="index-page__socials">
|
||||
<a class="index-page__social-link" href="https://github.com/moritzruth">
|
||||
<a class="index-page__social-link" href="https://github.com/moritzruth" title="GitHub">
|
||||
<GitHubIcon class="index-page__social-icon"/>
|
||||
</a>
|
||||
<a class="index-page__social-link" href="https://twitter.com/moritzruth_dev">
|
||||
<a class="index-page__social-link" href="https://twitter.com/moritzruth_dev" title="Twitter">
|
||||
<TwitterIcon class="index-page__social-icon"/>
|
||||
</a>
|
||||
<a class="index-page__social-link" href="https://instagram.com/moritzruth_dev">
|
||||
<a class="index-page__social-link" href="https://instagram.com/moritzruth_dev" title="Instagram">
|
||||
<InstagramIcon class="index-page__social-icon"/>
|
||||
</a>
|
||||
<a class="index-page__social-link" href="mailto:dev@moritz-ruth.de">
|
||||
<a class="index-page__social-link" href="mailto:dev@moritz-ruth.de" title="Email">
|
||||
<EmailIcon class="index-page__social-icon"/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -33,10 +34,10 @@
|
|||
height: 100vh;
|
||||
}
|
||||
|
||||
.index-page__content {
|
||||
animation: appear 400ms 4s ease both;
|
||||
.index-page__name {
|
||||
animation: appear 400ms 3.8s ease both;
|
||||
|
||||
font-size: 1.5rem;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@keyframes appear {
|
||||
|
|
@ -62,12 +63,12 @@
|
|||
|
||||
.index-page__social-link {
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.index-page__social-icon {
|
||||
width: 50px;
|
||||
width: 40px;
|
||||
|
||||
transition: 200ms linear opacity;
|
||||
&:hover {
|
||||
|
|
@ -82,9 +83,11 @@
|
|||
import TwitterIcon from "@/assets/icons/twitter.svg";
|
||||
import InstagramIcon from "@/assets/icons/instagram.svg";
|
||||
import EmailIcon from "@/assets/icons/email.svg";
|
||||
import NavigationBar from "@/components/NavigationBar";
|
||||
|
||||
export default {
|
||||
name: "IndexPage",
|
||||
components: { AnimatedLogo, GitHubIcon, TwitterIcon, InstagramIcon, EmailIcon }
|
||||
layout: "none",
|
||||
components: { NavigationBar, AnimatedLogo, GitHubIcon, TwitterIcon, InstagramIcon, EmailIcon }
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue