diff --git a/source/_patterns/02-organisms/00-global/navbar.mustache b/source/_patterns/02-organisms/00-global/navbar.mustache index de423d83d832c484575e15ca17f87c52fde52a80..5e86d17e2d80020a8f1935974bb9460a6153a389 100644 --- a/source/_patterns/02-organisms/00-global/navbar.mustache +++ b/source/_patterns/02-organisms/00-global/navbar.mustache @@ -28,9 +28,9 @@ <a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a> </li> <li class="navbar-menu__item"> - <ui-navbar-subitem label="Lidé" href="{{ link.templates-people }}"> + <ui-navbar-subitem label="Lidé"> <ul class="navbar-menu__submenu"> - <li><a href="#" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li> + <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li> </ul> </ui-navbar-subtitem> </li> @@ -42,7 +42,11 @@ </ui-navbar-subtitem> </li> <li class="navbar-menu__item"> - <a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volby</a> + <ui-navbar-subitem label="Volby"> + <ul class="navbar-menu__submenu"> + <li><a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volební rozcestník</a></li> + </ul> + </ui-navbar-subtitem> </li> <li class="navbar-menu__item"> <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a> diff --git a/source/js/components/footer/FooterCollapsible.vue b/source/js/components/footer/FooterCollapsible.vue index 4e241e7f65c82d6ef4747fad7d7fb7fa65e08183..6503acca239e016ca1912786662ac89ccb4dd9b1 100644 --- a/source/js/components/footer/FooterCollapsible.vue +++ b/source/js/components/footer/FooterCollapsible.vue @@ -9,17 +9,15 @@ </template> <script> -import screens from "../../../../screens"; - -const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10); +import { isLgScreenSize } from "../../utils"; export default { data() { return { - isLgScreenSize: this.getWindowWidth() >= lgScreenSize, + isLgScreenSize: isLgScreenSize(), show: false, resizeHandler: () => { - this.$data.isLgScreenSize = this.getWindowWidth() >= lgScreenSize; + this.$data.isLgScreenSize = isLgScreenSize(); }, }; }, @@ -43,9 +41,6 @@ export default { } }, methods: { - getWindowWidth() { - return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); - }, handleClick() { if (this.$props.href) { window.location = this.$props.href; diff --git a/source/js/components/navbar/Navbar.vue b/source/js/components/navbar/Navbar.vue index 3360f5384aef761153528a8613317ba862d1cbdd..bf73f55f2ff5b2d510b90b8a2ca02cd4d1239d09 100644 --- a/source/js/components/navbar/Navbar.vue +++ b/source/js/components/navbar/Navbar.vue @@ -1,8 +1,6 @@ <script> import UiNavbarSubitem from "./NavbarSubitem"; - import screens from "../../../../screens"; - - const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10); + import { isLgScreenSize } from "../../utils"; export default { components: { @@ -10,18 +8,13 @@ }, data() { return { - isLgScreenSize: this.getWindowWidth() >= lgScreenSize, + isLgScreenSize: isLgScreenSize(), show: false, resizeHandler: () => { - this.$data.isLgScreenSize = this.getWindowWidth() >= lgScreenSize; + this.$data.isLgScreenSize = isLgScreenSize(); }, }; }, - methods: { - getWindowWidth() { - return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); - } - }, mounted() { this.$nextTick(() => { window.addEventListener("resize", this.$data.resizeHandler); diff --git a/source/js/components/navbar/NavbarSubitem.vue b/source/js/components/navbar/NavbarSubitem.vue index dad7335f481ca2e66fbbbd39d8115f88b5b694fc..a3b550ec597cd6726d069a73ad78911932130047 100644 --- a/source/js/components/navbar/NavbarSubitem.vue +++ b/source/js/components/navbar/NavbarSubitem.vue @@ -1,7 +1,6 @@ <template> - <div @mouseenter="show = true" @mouseleave="show = false"> + <div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave"> <span class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span> - <div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap"> <slot> </slot> @@ -10,6 +9,8 @@ </template> <script> +import { isLgScreenSize } from "../../utils"; + export default { data() { return { @@ -25,6 +26,16 @@ export default { } }, methods: { + onMouseEnter() { + if (isLgScreenSize()) { + this.$data.show = true; + } + }, + onMouseLeave() { + if (isLgScreenSize()) { + this.$data.show = false; + } + }, handleClick() { if (this.$props.href) { window.location = this.$props.href; diff --git a/source/js/utils.js b/source/js/utils.js index 467970e0b62cbf30fd34550476efc930f612ad35..dd7ac5d3dbad7cf3156f9f80e1a3c706d0220431 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -1,5 +1,17 @@ +import screens from "../../screens"; + +const lgScreenSize = parseInt(screens.lg.replace("px", ""), 10); + export const forEachNode = function (array, callback, scope) { for (var i = 0; i < array.length; i++) { callback.call(scope, array[i]); // passes back stuff we need } }; + +export function getWindowWidth() { + return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0); +} + +export function isLgScreenSize() { + return getWindowWidth() >= lgScreenSize; +}