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

Better naming for subnav items

parent 5557e00e
No related branches found
No related tags found
No related merge requests found
Pipeline #810 passed
<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