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

Subnav now enhanced with JS

parent 588903bf
No related branches found
No related tags found
No related merge requests found
<div class="__js-root" data-app="Subnav">
<ui-subnav inline-template>
<ui-subnav-view-provider :initial="{regions: false, calendar: false}" v-slot="{ showView, toggleView }">
<div class="subnav">
<div class="container container--wide">
<div class="flex">
<button class="btn btn--condensed btn--grey-500 btn--overlay btn--overlay-white text-sm mr-2">
<button
@click="toggleView('regions')"
class="btn btn--condensed btn--grey-500 btn--overlay btn--overlay-white text-sm mr-2"
:class="{'btn--overlay-active': showView('regions')}"
>
<div class="btn__body">
<span>Pardubický kraj</span>
<i class="fas fa-chevron-down ml-4"></i>
</div>
</button>
<button class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-red-100 text-sm">
<button
@click="toggleView('calendar')"
class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-red-100 text-sm"
:class="{'btn--overlay-active': showView('calendar')}"
>
<div class="btn__body">
<i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-2"></i>
<span class="hidden md:block">Krajský kalendář</span>
</div>
</button>
<a href="#" class="btn text-sm max-w-full hidden lg:block">
<a href="#" class="btn text-sm max-w-full hidden lg:block" @click="toggleView('calendar')">
<div class="btn__body bg-grey-800 text-grey-200 flex divide-x">
<span class="pr-4">{{ event.title }}</span>
<span class="pl-4">{{ event.date }}</span>
......@@ -31,3 +42,18 @@
</div>
</div>
</div>
<div class="subnav-aside">
<div class="subnav-aside__item" :class="{'subnav-aside__item--visible': showView('regions')}">
<a @click="toggleView('regions')" class="subnav-aside__close"><i class="fas fa-times"></i></a>
<ui-region-map class="container container--default" />
</div>
<div class="subnav-aside__item" :class="{'subnav-aside__item--visible': showView('calendar')}">
<a @click="toggleView('calendar')" class="subnav-aside__close"><i class="fas fa-times"></i></a>
<div class="container container--default">
{{> molecules-calendar }}
</div>
</div>
</div>
</ui-subnav-view-provider>
</ui-subnav>
</div>
......@@ -213,7 +213,8 @@
@apply text-white;
}
&:hover {
&:hover,
&.btn--overlay-active {
.btn__body {
@apply bg-white text-black;
}
......@@ -229,7 +230,8 @@
@apply text-red-100;
}
&:hover {
&:hover,
&.btn--overlay-active {
.btn__body {
@apply bg-red-100;
}
......
.subnav {
@apply bg-black text-white font-condensed py-2;
}
.subnav-aside {
@apply absolute;
}
.subnav-aside__close {
@apply hidden absolute text-3xl pr-8 cursor-pointer right-0;
@screen xl {
@apply block;
}
}
.subnav-aside__item {
@apply absolute w-screen opacity-0 pointer-events-none transition duration-500 py-4 bg-white elevation-21;
@screen lg {
@apply py-8;
}
}
.subnav-aside__item--visible {
@apply opacity-100 pointer-events-auto;
}
This diff is collapsed.
......@@ -3,10 +3,12 @@ import FlipClock from './apps/flip-clock';
import Footer from './apps/footer';
import Navbar from './apps/navbar';
import RegionMap from './apps/region-map';
import Subnav from './apps/subnav';
export default {
FlipClock,
Footer,
Navbar,
RegionMap,
Subnav,
};
<template>
<div class="region-map flex justify-center items-center space-x-16 ">
<div class="region-map flex justify-start items-center space-x-16 ">
<div class="">
<h1 class="head-alt-sm mb-2">Vyberte kraj</h1>
<ul class="region-map__list leading-loose whitespace-no-wrap text-sm">
......@@ -8,7 +8,7 @@
</li>
</ul>
</div>
<div class="w-full max-w-xl">
<div class="w-full max-w-xl hidden md:block">
<svg
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
......
<script>
import UiRegionMap from "../region-map/RegionMap";
import UiSubnavViewProvider from "./SubnavViewProvider";
export default {
components: {
UiSubnavViewProvider,
UiRegionMap,
},
}
</script>
<template>
<div>
<slot v-bind:views="views" v-bind:showView="showView" v-bind:toggleView="toggleView"></slot>
</div>
</template>
<script>
export default {
props: {
initial: {
default: () => {}
}
},
data() {
return {
views: this.$props.initial,
keyListener: e => {
// Esc
if (e.keyCode === 27) {
this.hideAllViews();
}
}
};
},
methods: {
setView(viewId, show) {
this.$data.views[viewId] = show;
},
toggleView(viewId) {
Object.keys(this.$data.views).forEach(key => {
if (key !== viewId) {
this.setView(key, false);
}
});
this.setView(viewId, !this.showView(viewId));
},
showView(viewId) {
return this.$data.views[viewId];
},
hideAllViews() {
Object.keys(this.$data.views).forEach(key => {
this.setView(key, false);
});
}
},
mounted() {
window.addEventListener('keydown', this.$data.keyListener);;
},
destroyed() {
window.removeEventListener('keydown', this.$data.keyListener);
}
}
</script>
import Vue from 'vue';
import UiSubnav from './Subnav.vue';
const appFactory = (el, attrs) => {
// Bootstrap Vue.js.
new Vue({el, components: { UiSubnav }});
};
export default appFactory;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment