diff options
| -rw-r--r-- | components/JoinUs.stories.js | 16 | ||||
| -rw-r--r-- | components/JoinUs.vue | 5 | ||||
| -rw-r--r-- | components/NavLink.stories.js | 19 | ||||
| -rw-r--r-- | components/NavLink.vue | 20 | ||||
| -rw-r--r-- | components/TheHeader.stories.js | 24 | ||||
| -rw-r--r-- | components/TheHeader.vue (renamed from components/NavBar.vue) | 62 | ||||
| -rw-r--r-- | layouts/default.vue | 6 |
7 files changed, 98 insertions, 54 deletions
diff --git a/components/JoinUs.stories.js b/components/JoinUs.stories.js new file mode 100644 index 0000000..81bf934 --- /dev/null +++ b/components/JoinUs.stories.js @@ -0,0 +1,16 @@ +import { storiesOf } from '@storybook/vue' +import { center } from '../.storybook/decorators' + +import JoinUs from './JoinUs' + +const joinUs = {} + +storiesOf('JoinUs', module) + .addDecorator(center) + .add('default', () => { + return { + components: { JoinUs }, + template: `<join-us />`, + data: () => joinUs + } + }) diff --git a/components/JoinUs.vue b/components/JoinUs.vue index f534d22..6ffec91 100644 --- a/components/JoinUs.vue +++ b/components/JoinUs.vue @@ -5,7 +5,7 @@ <div class="text">Rozpocznij swoją harcerską przygodę!</div> </div> <div class="button"> - <router-link to="/kontakt">Dołącz do nas!</router-link> + <nuxt-link to="/kontakt">Dołącz do nas!</nuxt-link> </div> </div> </section> @@ -53,10 +53,11 @@ background-color: #507b34; padding: 10px; max-width: 150px; + color: #ffffff; + text-align: center; } .button a { - color: #ffffff; text-decoration: none; } diff --git a/components/NavLink.stories.js b/components/NavLink.stories.js new file mode 100644 index 0000000..44fe6ae --- /dev/null +++ b/components/NavLink.stories.js @@ -0,0 +1,19 @@ +import { storiesOf } from '@storybook/vue' +import { center } from '../.storybook/decorators' + +import NavLink from './NavLink' + +const navLink = { + name: 'Test', + link: '/test' +} + +storiesOf('NavLink', module) + .addDecorator(center) + .add('default', () => { + return { + components: { NavLink }, + template: `<nav-link :name="name" :link="link" />`, + data: () => navLink + } + }) diff --git a/components/NavLink.vue b/components/NavLink.vue index bb86ef8..0418172 100644 --- a/components/NavLink.vue +++ b/components/NavLink.vue @@ -9,10 +9,22 @@ <script> export default { props: { - link: String, - name: String, - external: { type: Boolean, default: false }, - pure: { type: Boolean, default: false } + link: { + type: String, + required: true + }, + name: { + type: String, + required: true + }, + external: { + type: Boolean, + default: false + }, + pure: { + type: Boolean, + default: false + } } } </script> diff --git a/components/TheHeader.stories.js b/components/TheHeader.stories.js new file mode 100644 index 0000000..ee320b7 --- /dev/null +++ b/components/TheHeader.stories.js @@ -0,0 +1,24 @@ +import { storiesOf } from '@storybook/vue' +import { routes } from './TheFooter.stories' + +import TheHeader from './TheHeader' + +const header = { + routes, + title: '19 PDH Puszcza', + logo: '/assets/krajka-logo.svg' +} + +const alwaysTop = () => ({ + template: `<div style="display:flex;flex-direction:column;min-height:100vh"><story/><div style="flex:1"></div></div>` +}) + +storiesOf('TheHeader', module) + .addDecorator(alwaysTop) + .add('default', () => { + return { + components: { TheHeader }, + template: `<the-header :routes="routes" :title="title" :logo="logo"/>`, + data: () => header + } + }) diff --git a/components/NavBar.vue b/components/TheHeader.vue index 4bbae72..431b945 100644 --- a/components/NavBar.vue +++ b/components/TheHeader.vue @@ -1,28 +1,14 @@ <template> - <nav :class="navbarClass"> + <nav class="navbar" :class="{'menu-open': isMenuCollapsed}"> <div class="title"> <img v-if="logo" class="logo" :src="logo" alt="ZHR" /> - <nuxt-link :class="titleClass" to="/">{{ title }}</nuxt-link> + <nuxt-link class="title-name" :class="{margin: logo}" to="/">{{ title }}</nuxt-link> </div> <div class="space"></div> <button @click="toggleMenu" class="menu-toggler">Menu</button> - <ul :class="linksClass" @click="toggleMenu"> + <ul class="links" :class="{show: this.isMenuCollapsed}" @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 - /> + <nav-link v-for="route in routes" :key="route.path" :link="route.path" :name="route.name" /> </ul> </nav> </template> @@ -31,47 +17,33 @@ import NavLink from './NavLink' export default { + name: 'TheHeader', 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' + routes: { + type: Array, + required: true }, - navbarClass() { - if (this.menuCollapsed) { - return 'navbar' - } - return 'navbar menu-open' + title: { + type: String, + required: true }, - linksClass() { - if (this.menuCollapsed) { - return 'links' - } - return 'links show' + logo: { + type: String, + required: false, + default: () => '' } }, data: function() { return { - menuCollapsed: true + isMenuCollapsed: true } }, methods: { toggleMenu() { - this.menuCollapsed = !this.menuCollapsed - }, - linksClick() { - this.toggleMenu() + this.isMenuCollapsed = !this.isMenuCollapsed } } } diff --git a/layouts/default.vue b/layouts/default.vue index 53416bf..58970ba 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,18 +1,18 @@ <template> <div id="app"> - <NavBar :routes="routes" title="19 PDH Puszcza" logo="/assets/krajka-logo.svg" /> + <the-header :routes="routes" title="19 PDH Puszcza" logo="/assets/krajka-logo.svg" /> <nuxt id="content" :key="$route.path" /> <the-footer :routes="routes" /> </div> </template> <script> -import NavBar from '../components/NavBar.vue' +import TheHeader from '../components/TheHeader.vue' import TheFooter from '../components/TheFooter.vue' export default { name: 'app', - components: { NavBar, TheFooter }, + components: { TheHeader, TheFooter }, data() { return { routes: [ |