GitBlixt
teagles/forestry-vuepress

Added mobile navigation

Nichlas W. Andersen committed Aug 10, 2018
commit f50d76adb941f570829543a5914241635f06420c
Showing 3 changed files with 157 additions and 9 deletions
portfolio/.vuepress/components/Navbar.vue +126 -9
@@ @@ -9,7 +9,7 @@
}"
>
- <nav v-if="navLinks" class="navigation left">
+ <nav v-if="navLinks" class="navigation left desktop-nav">
<ul>
<router-link
v-for="nav in navLinks"
@@ @@ -28,16 +28,18 @@
</nav>
<div class="brand">
- <div
- v-if="logo"
- class="logo"
- :style="{ backgroundImage: `url(${logo})`}"
- :title="$site.title"
- />
- <span v-else>{{ $site.title }}</span>
+ <router-link to="/">
+ <div
+ v-if="logo"
+ class="logo"
+ :style="{ backgroundImage: `url(${logo})`}"
+ :title="$site.title"
+ />
+ <span v-else>{{ $site.title }}</span>
+ </router-link>
</div>
- <nav v-if="navLinks" class="navigation right">
+ <nav v-if="navLinks" class="navigation right desktop-nav">
<ul>
<router-link
v-for="nav in navLinks"
@@ @@ -55,6 +57,28 @@
</ul>
</nav>
+ <div class="mobile-nav-toggle" @click="toggleMobileNav" />
+ <div class="mobile-nav" :class="{'mobile-nav--active': mobileNavActive}">
+ <nav>
+ <ul @click="toggleMobileNav">
+ <router-link
+ v-for="nav in navLinks"
+ :key="nav.text"
+ v-if="!nav.external"
+ tag="li"
+ :to="nav.link"
+ active-class="active"
+ v-text="nav.text"
+ exact
+ />
+ <li v-for="nav in navLinks" v-if="nav.external" @click="toggleMobileNav">
+ <a :href="nav.link" target="_blank">{{ nav.text }}</a>
+ </li>
+ </ul>
+ <div class="mobile-nav-close" @click="toggleMobileNav" />
+ </nav>
+ </div>
+
</header>
</template>
@@ @@ -70,10 +94,20 @@
required: false,
}
},
+ data() {
+ return {
+ mobileNavActive: false
+ }
+ },
computed: {
navLinks() {
return this.$site.themeConfig.nav
},
+ },
+ methods: {
+ toggleMobileNav() {
+ this.mobileNavActive = !this.mobileNavActive
+ }
}
}
</script>
@@ @@ -85,6 +119,7 @@
position: relative;
align-items: center;
justify-content: space-between;
+ height: 6rem;
padding: 5vw;
font-size: 0.8rem;
font-weight: 600;
@@ @@ -132,4 +167,86 @@
a:active { color: inherit; }
a:visited { color: inherit; }
+ .desktop-nav {
+ display: none;
+ }
+
+ .mobile-nav {
+ display: block;
+ position: absolute;
+ background: #ffffff;
+ top: 0;
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ padding: 2rem;
+ transform: translateY(-100%);
+ transition: transform 0.35s ease-in-out;
+ text-align: center;
+ font-size: 2rem;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ line-height: 2;
+ }
+
+ .mobile-nav li {
+ list-style: none;
+ cursor: pointer;
+ transition: opacity 0.15s;
+ }
+
+ .mobile-nav li:hover {
+ opacity: 0.6;
+ }
+
+ .mobile-nav--active {
+ transform: translateY(0);
+ }
+
+ .mobile-nav-close {
+ position: absolute;
+ content: '';
+ right: 0;
+ top: 0;
+ width: 3rem;
+ height: 3rem;
+ padding: 3rem;
+ background-image: url('/close.svg');
+ background-position: center;
+ background-size: 1.5rem;
+ background-repeat: no-repeat;
+ transition: opacity 0.15s;
+ cursor: pointer;
+ }
+
+ .mobile-nav-toggle {
+ display: block;
+ width: 3rem;
+ height: 3rem;
+ background-image: url('/burger.svg');
+ background-position: center;
+ background-size: 1.5rem;
+ background-repeat: no-repeat;
+ transition: opacity 0.15s;
+ cursor: pointer;
+ }
+
+ .mobile-nav-toggle:hover,
+ .mobile-nav-close:hover {
+ opacity: 0.6;
+ }
+
+ @media screen and (min-width: 600px) {
+ .desktop-nav {
+ display: block;
+ }
+ .mobile-nav-toggle {
+ display: none;
+ }
+ .mobile-nav {
+ display: none;
+ }
+ }
+
</style>
portfolio/.vuepress/public/burger.svg +16 -0
@@ @@ -0,0 +1,16 @@
+ <?xml version="1.0" encoding="UTF-8"?>
+ <svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+ <title>Group 2</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Desktop" transform="translate(-418.000000, -387.000000)" fill="#1C1C1C">
+ <g id="Group-2" transform="translate(418.000000, 387.000000)">
+ <rect id="Rectangle" x="0" y="0" width="18" height="2"></rect>
+ <rect id="Rectangle-Copy" x="0" y="6" width="18" height="2"></rect>
+ <rect id="Rectangle-Copy-2" x="0" y="12" width="18" height="2"></rect>
+ </g>
+ </g>
+ </g>
+ </svg>
\ No newline at end of file
portfolio/.vuepress/public/close.svg +15 -0
@@ @@ -0,0 +1,15 @@
+ <?xml version="1.0" encoding="UTF-8"?>
+ <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+ <title>Group</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+ <g id="Desktop" transform="translate(-449.000000, -386.000000)" fill="#1C1C1C">
+ <g id="Group" transform="translate(449.000000, 386.000000)">
+ <rect id="Rectangle-Copy-4" transform="translate(8.000000, 8.000000) rotate(-315.000000) translate(-8.000000, -8.000000) " x="-1" y="7" width="18" height="2"></rect>
+ <rect id="Rectangle-Copy-5" transform="translate(8.000000, 8.000000) scale(-1, 1) rotate(-315.000000) translate(-8.000000, -8.000000) " x="-1" y="7" width="18" height="2"></rect>
+ </g>
+ </g>
+ </g>
+ </svg>
\ No newline at end of file