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

fix(navbar): js submenu acting weird, replaced by NavbarSubitemReplacing

parent 56ebe08b
No related branches found
Tags 2.9.0
No related merge requests found
Pipeline #7820 passed
Stage: build
Hide whitespace changes
Inline Side-by-side
source/_patterns/01-molecules/15-navbar/navbar-menu.mustache
+ 8
− 5
View file @ 2c336f13
......@@ -3,11 +3,14 @@
<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é">
<ul class="navbar-menu__submenu">
<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>
<ui-navbar-subitem-replacing label="Lidé">
<span class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</span>
<div class="navbar-menu__submenu-wrap">
<ul class="navbar-menu__submenu">
<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>
</div>
</ui-navbar-subtitem-replacing>
</li>
<li class="navbar-menu__item">
<a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
......
source/_patterns/02-organisms/01-navbar/navbar.mustache
+ 24
− 15
View file @ 2c336f13
......@@ -28,25 +28,34 @@
<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é">
<ul class="navbar-menu__submenu">
<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>
<ui-navbar-subitem-replacing label="Lidé" items="[[&quot;Delší link co je delší než hlavní menu položka&quot;, &quot;{{ link.templates-people }}&quot;]]">
<span class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</span>
<div class="navbar-menu__submenu-wrap">
<ul class="navbar-menu__submenu">
<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>
</div>
</ui-navbar-subtitem-replacing>
</li>
<li class="navbar-menu__item">
<ui-navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
<ul class="navbar-menu__submenu">
<li><a href="#" data-href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
</ul>
</ui-navbar-subtitem>
<ui-navbar-subitem-replacing label="Aktuality" href="{{ link.templates-article-listing }}" items="[[&quot;Detail aktuality&quot;, &quot;{{ link.templates-article-detail }}&quot;]]">
<a href="{{ link.templates-article-listing }}" class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</a>
<div class="navbar-menu__submenu-wrap">
<ul class="navbar-menu__submenu">
<li><a href="#" data-href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
</ul>
</div>
</ui-navbar-subtitem-replacing>
</li>
<li class="navbar-menu__item">
<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>
<ui-navbar-subitem-replacing label="Volby" items="[[&quot;Volební rozcestník&quot;, &quot;{{ link.templates-elections }}&quot;]]">
<span class="navbar-menu__link navbar-menu__submenu-toggle">Volby</span>
<div class="navbar-menu__submenu-wrap">
<ul class="navbar-menu__submenu">
<li><a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volební rozcestník</a></li>
</ul>
</div>
</ui-navbar-subtitem-replacing>
</li>
<li class="navbar-menu__item">
<a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>
......
source/js/components/navbar/Navbar.vue
+ 3
− 1
View file @ 2c336f13
<script>
import UiNavbarSubitem from "./NavbarSubitem";
import UiNavbarSubitemReplacing from "./NavbarSubitemReplacing";
import { isLgScreenSize } from "../../utils";
export default {
components: {
UiNavbarSubitem
UiNavbarSubitem,
UiNavbarSubitemReplacing,
},
data() {
return {
......
source/js/components/navbar/NavbarSubitemReplacing.vue 0 → 100644
+ 59
− 0
View file @ 2c336f13
<template>
<div @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
<span v-if="!href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click="handleClick">{{ label }}</span>
<a v-if="href" :href="href" class="navbar-menu__link navbar-menu__submenu-toggle" :class="{'navbar-menu__submenu-toggle--open': show}" @click.prevent="handleClick">{{ label }}</a>
<div :class="{'navbar-menu__submenu-wrap--show': show}" class="navbar-menu__submenu-wrap">
<ul class="navbar-menu__submenu">
<li v-for="(item, index) in parsedItems" :key="index">
<a :href="item[1]" class="navbar-menu__link">{{ item[0] }}</a>
</li>
</ul>
</div>
</div>
</template>
<script>
import { isLgScreenSize } from "../../utils";
export default {
data() {
return {
show: false,
parsedItems: JSON.parse(this.items),
};
},
props: {
href: {
type: String,
},
label: {
type: String,
},
items: {
type: String,
}
},
methods: {
onMouseEnter() {
if (isLgScreenSize()) {
this.$data.show = true;
}
},
onMouseLeave() {
if (isLgScreenSize()) {
this.$data.show = false;
}
},
handleClick(evt) {
// On mobile screens, first click should just toggle and redir on second one
if (isLgScreenSize() || this.$data.show) {
if (this.$props.href) {
window.location = this.$props.href;
}
}
this.$data.show = !this.$data.show;
}
}
}
</script>
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

Pirátský GitLab - Home of the CopyLeft