diff options
author | Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com> | 2019-11-09 08:28:09 +0100 |
---|---|---|
committer | Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com> | 2019-11-09 08:28:09 +0100 |
commit | dec87e2a665c5cd1c75686dda388c042a1b042f6 (patch) | |
tree | 3c4be4f258e7767c56dd1be5a4258ebf389d4bb4 /components/NavBar.vue | |
parent | 2103c12d42a7d10ef15886119929ef7326822833 (diff) | |
download | puszcza-dec87e2a665c5cd1c75686dda388c042a1b042f6.tar.gz puszcza-dec87e2a665c5cd1c75686dda388c042a1b042f6.zip |
Add stories for Header & JoinUs
Diffstat (limited to 'components/NavBar.vue')
-rw-r--r-- | components/NavBar.vue | 211 |
1 files changed, 0 insertions, 211 deletions
diff --git a/components/NavBar.vue b/components/NavBar.vue deleted file mode 100644 index 4bbae72..0000000 --- a/components/NavBar.vue +++ /dev/null @@ -1,211 +0,0 @@ -<template> - <nav :class="navbarClass"> - <div class="title"> - <img v-if="logo" class="logo" :src="logo" alt="ZHR" /> - <nuxt-link :class="titleClass" to="/">{{ title }}</nuxt-link> - </div> - <div class="space"></div> - <button @click="toggleMenu" class="menu-toggler">Menu</button> - <ul :class="linksClass" @click="toggleMenu"> - <!-- Loop for generating links --> - <NavLink v-for="route in routes" :key="route.path" :link="route.path" :name="route.name" /> - <NavLink - v-for="route in staticRoutes" - :key="route.path" - :link="route.path" - :name="route.name" - pure - /> - <NavLink - v-for="route in externalRoutes" - :key="route.path" - :link="route.path" - :name="route.name" - external - /> - </ul> - </nav> -</template> - -<script> -import NavLink from './NavLink' - -export default { - components: { - NavLink - }, - props: { - routes: Array, - externalRoutes: Array, - staticRoutes: Array, - title: String, - logo: String - }, - computed: { - titleClass() { - if (this.logo) { - return 'title-name margin' - } - return 'title-name' - }, - navbarClass() { - if (this.menuCollapsed) { - return 'navbar' - } - return 'navbar menu-open' - }, - linksClass() { - if (this.menuCollapsed) { - return 'links' - } - return 'links show' - } - }, - data: function() { - return { - menuCollapsed: true - } - }, - methods: { - toggleMenu() { - this.menuCollapsed = !this.menuCollapsed - }, - linksClick() { - this.toggleMenu() - } - } -} -</script> - -<style scoped> -.navbar { - font-family: 'Roboto Slab', serif; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - color: #181818; - - box-sizing: border-box; - width: 100%; - height: 80px; - - background: #ffffff; - box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); - - padding: 0 200px 0 200px; - - display: flex; - align-items: center; - justify-content: center; -} - -.space { - flex: 1; - max-width: 500px; -} - -.title { - font-size: 30px; - flex-shrink: 0; - - display: flex; -} - -.title-name { - text-decoration: none; - color: #181818; - padding: 10px; -} - -.title-name.margin { - margin-left: 100px; -} - -.links { - display: flex; - flex-direction: row; - padding: 0; -} - -.logo { - position: absolute; - top: 0; - z-index: 1; -} - -.menu-toggler { - display: none; -} - -@media (max-width: 1300px) { - .navbar { - padding: 0 50px 0 50px; - } -} - -@media (max-width: 900px) { - .navbar.menu-open { - box-shadow: none; - } - - .title { - font-size: 24px; - } - - .links { - position: absolute; - /* width: 100vw; */ - - margin-top: 80px; - - flex-direction: column; - display: none; - } - - .menu-toggler { - display: block; - } - - .links.show { - display: flex !important; - flex-direction: column; - justify-content: center; - align-items: flex-start; - - margin-bottom: 0; - padding: 50px 10px; - - width: 100%; - left: 0; - top: 0; - - background: #fff; - } - - .links.show li { - padding: 2vh; - font-size: 30px; - } -} - -@media (max-width: 500px) { - .navbar { - padding: 0 10px 0 10px; - } - - .logo { - width: 65px; - } - - .title-name { - font-size: 20px; - } - - .title-name.margin { - margin-left: 70px; - } - - .links.show { - height: calc(100% - 80px); - } -} -</style> \ No newline at end of file |