From fb02b833cd69f572d2decfdce147242a5a4bddf4 Mon Sep 17 00:00:00 2001
From: Moritz Ruth <dev@moritz-ruth.de>
Date: Sat, 30 Nov 2019 18:20:08 +0100
Subject: [PATCH] Add navigation

---
 assets/css/_mobile.scss       |  11 ++
 assets/css/_variables.scss    |   9 ++
 assets/css/elements/link.scss |  13 ++
 assets/css/global.scss        |  10 ++
 components/NavigationBar.vue  | 229 ++++++++++++++++++++++++++++++++++
 layouts/none.vue              |  13 ++
 pages/index.vue               |  23 ++--
 7 files changed, 298 insertions(+), 10 deletions(-)
 create mode 100644 assets/css/_mobile.scss
 create mode 100644 assets/css/_variables.scss
 create mode 100644 assets/css/elements/link.scss
 create mode 100644 components/NavigationBar.vue
 create mode 100644 layouts/none.vue

diff --git a/assets/css/_mobile.scss b/assets/css/_mobile.scss
new file mode 100644
index 0000000..440099a
--- /dev/null
+++ b/assets/css/_mobile.scss
@@ -0,0 +1,11 @@
+@mixin mobile() {
+  @media (max-width: 800px) {
+    @content;
+  }
+}
+
+@mixin notMobile() {
+  @media (min-width: 801px) {
+    @content;
+  }
+}
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
new file mode 100644
index 0000000..98e4f26
--- /dev/null
+++ b/assets/css/_variables.scss
@@ -0,0 +1,9 @@
+$content-width: 1000px;
+$content-padding: 20px;
+$gutter-size: 40px;
+
+$black-brighter: #0e0e0e;
+
+$blue: #39a8f3;
+$on-blue: black;
+$blue-darker: #3695d8;
diff --git a/assets/css/elements/link.scss b/assets/css/elements/link.scss
new file mode 100644
index 0000000..e71485d
--- /dev/null
+++ b/assets/css/elements/link.scss
@@ -0,0 +1,13 @@
+@import "../variables";
+
+.link {
+  color: $blue;
+  text-decoration: none;
+
+  transition: 100ms linear opacity;
+  opacity: 1;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
diff --git a/assets/css/global.scss b/assets/css/global.scss
index c0cfa1a..8fb3b55 100644
--- a/assets/css/global.scss
+++ b/assets/css/global.scss
@@ -1,3 +1,13 @@
+@import "mobile";
+
+:root {
+  --navbar-height: 100px;
+
+  @include mobile {
+    --navbar-height: 80px;
+  }
+}
+
 *, ::before, ::after {
   box-sizing: border-box;
   margin: 0;
diff --git a/components/NavigationBar.vue b/components/NavigationBar.vue
new file mode 100644
index 0000000..a180d58
--- /dev/null
+++ b/components/NavigationBar.vue
@@ -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>
diff --git a/layouts/none.vue b/layouts/none.vue
new file mode 100644
index 0000000..366bec2
--- /dev/null
+++ b/layouts/none.vue
@@ -0,0 +1,13 @@
+<template>
+  <nuxt/>
+</template>
+
+<style>
+
+</style>
+
+<script>
+  export default {
+    name: "NoneLayout"
+  };
+</script>
diff --git a/pages/index.vue b/pages/index.vue
index ff40879..8f1393f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -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>