Skip to content
Snippets Groups Projects
Commit 0a07d705 authored by xaralis's avatar xaralis
Browse files

Better naming for subnav items

parent 5557e00e
Branches
Tags
No related merge requests found
<div class="__js-root" data-app="Subnav"> <div class="__js-root" data-app="Subnav">
<ui-subnav inline-template> <ui-subnav inline-template>
<ui-subnav-view-provider :initial="{regions: false, calendar: false}" v-slot="{ showView, toggleView }"> <ui-subnav-view-provider :initial="{regions: false, calendar: false}" v-slot="{ isCurrentView, toggleView }">
<nav class="subnav"> <nav class="subnav">
<div class="container container--wide"> <div class="container container--wide">
<div class="flex"> <div class="flex">
<button <button
@click="toggleView('regions')" @click="toggleView('regions')"
class="btn btn--condensed btn--grey-500 btn--overlay btn--overlay-white text-sm mr-2" class="btn btn--condensed btn--grey-500 btn--overlay btn--overlay-white text-sm mr-2"
:class="{'btn--overlay-active': showView('regions')}" :class="{'btn--overlay-active': isCurrentView('regions')}"
> >
<div class="btn__body"> <div class="btn__body">
<span>Pardubický kraj</span> <span>Pardubický kraj</span>
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
<button <button
@click="toggleView('calendar')" @click="toggleView('calendar')"
class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-red-100 text-sm" class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-red-100 text-sm"
:class="{'btn--overlay-active': showView('calendar')}" :class="{'btn--overlay-active': isCurrentView('calendar')}"
> >
<div class="btn__body"> <div class="btn__body">
<i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-2"></i> <i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-2"></i>
...@@ -43,11 +43,11 @@ ...@@ -43,11 +43,11 @@
</div> </div>
</nav> </nav>
<aside class="subnav-aside"> <aside class="subnav-aside">
<div class="subnav-aside__item" :class="{'subnav-aside__item--visible': showView('regions')}"> <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('regions')}">
<a @click="toggleView('regions')" class="subnav-aside__close"><i class="fas fa-times"></i></a> <a @click="toggleView('regions')" class="subnav-aside__close"><i class="fas fa-times"></i></a>
<ui-region-map class="container container--default" /> <ui-region-map class="container container--default" />
</div> </div>
<div class="subnav-aside__item" :class="{'subnav-aside__item--visible': showView('calendar')}"> <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
<a @click="toggleView('calendar')" class="subnav-aside__close"><i class="fas fa-times"></i></a> <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="fas fa-times"></i></a>
<div class="container container--default"> <div class="container container--default">
{{> molecules-calendar }} {{> molecules-calendar }}
......
<template> <template>
<div> <div>
<slot v-bind:views="views" v-bind:showView="showView" v-bind:toggleView="toggleView"></slot> <slot v-bind:views="views" v-bind:isCurrentView="isCurrentView" v-bind:toggleView="toggleView"></slot>
</div> </div>
</template> </template>
...@@ -33,9 +33,9 @@ export default { ...@@ -33,9 +33,9 @@ export default {
} }
}); });
this.setView(viewId, !this.showView(viewId)); this.setView(viewId, !this.isCurrentView(viewId));
}, },
showView(viewId) { isCurrentView(viewId) {
return this.$data.views[viewId]; return this.$data.views[viewId];
}, },
hideAllViews() { hideAllViews() {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment