about summary refs log tree commit diff
path: root/components/NavBar.vue
diff options
context:
space:
mode:
authorPatryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>2019-11-09 08:28:09 +0100
committerPatryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>2019-11-09 08:28:09 +0100
commitdec87e2a665c5cd1c75686dda388c042a1b042f6 (patch)
tree3c4be4f258e7767c56dd1be5a4258ebf389d4bb4 /components/NavBar.vue
parent2103c12d42a7d10ef15886119929ef7326822833 (diff)
downloadpuszcza-dec87e2a665c5cd1c75686dda388c042a1b042f6.tar.gz
puszcza-dec87e2a665c5cd1c75686dda388c042a1b042f6.zip
Add stories for Header & JoinUs
Diffstat (limited to 'components/NavBar.vue')
-rw-r--r--components/NavBar.vue211
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