kihashi/stardew_community_checklist
1
0
Fork 0
mirror of https://github.com/kihashi/stardew_community_checklist.git synced 2025-10-19 08:03:17 +00:00
Code Issues Releases Activity

Fix spacing and layout.

Browse Source
This commit is contained in:
John Cleaver 2018-04-26 22:53:19 -04:00
parent a2587c7e05
commit 222732cf70
1 changed files with 31 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/HeaderBar.vue
View File

@ -1,31 +1,34 @@
<template>
<section class="hero is-info is-bold">
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<h1 class="title is-hidden-mobile">Stardew Community Checklist</h1>
<h1 class="title is-hidden-tablet">SCC</h1>
</a>
<div class="navbar-burger"
v-bind:class="{ 'is-active': menu_active }"
@click="menu_active = !menu_active"
>
<span></span>
<span></span>
<span></span>
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="/">
<h1 class="is-size-3 has-text-weight-semibold is-hidden-mobile">Stardew Community Checklist</h1>
<h1 class="is-size-3 has-text-weight-semibold is-hidden-tablet">SCC</h1>
</a>
<div class="navbar-burger"
v-bind:class="{ 'is-active': menu_active }"
@click="menu_active = !menu_active"
>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<div class="navbar-menu"
v-bind:class="{ 'is-active': menu_active }">
<div class="navbar-end">
<router-link v-for="route in this.$router.options.routes"
:key="route.order"
class="navbar-item"
v-bind:class="{ 'is-active': menu_active }"
:to="route">
{{route.name}}
</router-link>
<div class="navbar-menu"
v-bind:class="{ 'is-active': menu_active }">
<div class="navbar-end">
<router-link v-for="route in named_routes"
:key="route.order"
class="navbar-item"
@click.native="menu_active = false"
:to="route">
{{route.name}}
</router-link>
</div>
</div>
</div>
</nav>
</section>
@ -38,6 +41,11 @@ export default {
return {
menu_active: false
}
},
computed: {
named_routes: function () {
return this.$router.options.routes.filter(route => route.hasOwnProperty('name'))
}
}
}
</script>