Verified Commit 783e9b67 authored by Luc Didry's avatar Luc Didry
Browse files

Replace tabs with navbar

parent 08e25e13
......@@ -21,7 +21,7 @@ export default {
@import '../node_modules/bulma/sass/base/_all.sass'
@import '../node_modules/bulma/sass/layout/section.sass'
@import '../node_modules/bulma/sass/grid/columns.sass'
@import '../node_modules/bulma/sass/components/tabs.sass'
@import '../node_modules/bulma/sass/components/navbar.sass'
@import '../node_modules/bulma/sass/elements/table.sass'
@import '../node_modules/bulma/sass/elements/container.sass'
</style>
<template>
<div class="section">
<div class="tabs">
<ul>
<li v-for="tab in tabs"
:key="tab.name"
:class="{ 'is-active': tab.isActive }">
<a :href="tab.slug" @click="selectTab(tab, $event)">{{ tab.name }}</a>
</li>
</ul>
</div>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item is-size-5"
:href="this.selectedTab.slug">
{{ this.selectedTab.name }}
</a>
<a role="button"
class="navbar-burger"
aria-label="menu"
aria-expanded="false"
@click="toggleMenu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-start">
<div :class="{ 'navbar-menu': true, 'is-active': this.activeMenu }">
<a v-for="tab in tabs"
:href="tab.slug"
:key="tab.name"
:class="{ 'navbar-item': true, 'is-active': tab.isActive }"
@click="selectTab(tab, $event)">
{{ tab.name }}
</a>
</div>
</div>
</nav>
<div class="tabs-details">
<tab v-for="tab in tabs"
:key="tab.name"
......@@ -36,15 +55,22 @@ export default {
},
data() {
return { tabs: [] };
return {
tabs: [],
activeMenu: false,
selectedTab: { name: '', slug: '' }
};
},
methods: {
selectTab(selectedTab, event) {
Event.$emit('selectTab', selectedTab);
if (event) {
event.target.blur();
}
if (event) { event.target.blur(); }
this.activeMenu = false;
this.selectedTab = selectedTab;
},
toggleMenu() {
this.activeMenu = !this.activeMenu;
}
},
......@@ -53,7 +79,9 @@ export default {
axios.get('tabs.json', { responseType: 'json' }).
then(response => {
response.data.forEach(tab => {
this.tabs.push(new TabClass({ propsData: tab }));
let t = new TabClass({ propsData: tab });
this.tabs.push(t);
if (t.isActive) { this.selectedTab = t; }
});
}).
catch(error => alert(error));
......@@ -61,3 +89,29 @@ export default {
}
}
</script>
<style lang="sass">
@media screen and (max-width: 1087px)
.navbar-brand a.navbar-item
display: block
border-bottom-color: #3273dc
border-bottom-style: solid
border-bottom-width: 1px
color: #3273dc !important
@media screen and (min-width: 1088px)
a.navbar-item.is-active
border-bottom-color: #3273dc
border-bottom-style: solid
border-bottom-width: 1px
color: #3273dc !important
margin-bottom: -1px
padding-bottom: 9px
.navbar-brand a.navbar-item
display: none;
.navbar-menu
border-bottom-color: #dbdbdb
border-bottom-style: solid
border-bottom-width: 1px
</style>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment