mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-09-08 06:51:43 -04:00
show submenus on hover
This commit is contained in:
Andrea Vos
parent
cc83af40f2
commit
4b8b38d71e
@ -1,39 +1,42 @@
|
||||
<template>
|
||||
<div v-if="config.header" class="mb-lg-4">
|
||||
<header>
|
||||
<div class="d-none d-lg-flex justify-content-between align-items-center flex-row nav-custom btn-group mb-0">
|
||||
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`nav-item btn btn-sm ${link.header ? 'nav-header' : ''} ${isActiveRoute(link) ? 'active' : ''} ${link.header ? 'flex-grow-0' : ''}`">
|
||||
<h1 v-if="link.header" class="text-nowrap">
|
||||
<Logo flag/>
|
||||
<span class="higher"><T>title</T></span>
|
||||
</h1>
|
||||
<template v-else>
|
||||
<Icon :v="link.icon" size="1.6"/>
|
||||
<br/>
|
||||
<span class="text-nowrap"><Spelling :text="link.text"/></span>
|
||||
</template>
|
||||
</nuxt-link>
|
||||
<div class="nav-item flex-grow-0">
|
||||
<VersionDropdown end/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-block-force d-lg-none p-4">
|
||||
<div class="text-center mb-3">
|
||||
<nuxt-link to="/">
|
||||
<h1 class="text-nowrap">
|
||||
<Logo flag class="me-2"/><span class="higher"><T>title</T></span>
|
||||
<header @mouseleave="hoverItem = null">
|
||||
<div class="d-none d-lg-flex justify-content-between align-items-center flex-row nav-custom btn-group mb-0">
|
||||
<nuxt-link v-for="link in links" :key="link.link" :to="link.link"
|
||||
:class="`nav-item btn btn-sm ${link.header ? 'nav-header' : ''} ${isActiveRoute(link) ? 'active' : ''} ${link.header ? 'flex-grow-0' : ''}`"
|
||||
@mouseenter.native="hoverItem = link"
|
||||
>
|
||||
<h1 v-if="link.header" class="text-nowrap">
|
||||
<Logo flag/>
|
||||
<span class="higher"><T>title</T></span>
|
||||
</h1>
|
||||
<template v-else>
|
||||
<Icon :v="link.icon" size="1.6"/>
|
||||
<br/>
|
||||
<span class="text-nowrap"><Spelling :text="link.text"/></span>
|
||||
</template>
|
||||
</nuxt-link>
|
||||
<VersionDropdown/>
|
||||
<div class="nav-item flex-grow-0">
|
||||
<VersionDropdown end/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group-vertical d-flex nav-custom mb-2">
|
||||
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
|
||||
<Icon :v="link.icon"/>
|
||||
<Spelling :text="link.textLong || link.text"/>
|
||||
</nuxt-link>
|
||||
<div class="d-block-force d-lg-none p-4">
|
||||
<div class="text-center mb-3">
|
||||
<nuxt-link to="/">
|
||||
<h1 class="text-nowrap">
|
||||
<Logo flag class="me-2"/><span class="higher"><T>title</T></span>
|
||||
</h1>
|
||||
</nuxt-link>
|
||||
<VersionDropdown/>
|
||||
</div>
|
||||
<div class="btn-group-vertical d-flex nav-custom mb-2">
|
||||
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
|
||||
<Icon :v="link.icon"/>
|
||||
<Spelling :text="link.textLong || link.text"/>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="['hamburger-menu']" :style="`opacity: ${hamburgerShown ? 1 : 0}`">
|
||||
<div :class="['hamburger-menu']" :style="`opacity: ${hamburgerShown ? 1 : 0}`">
|
||||
<button :class="['btn btn-outline-secondary btn-hamburger', hamburgerActive ? 'active' : '']"
|
||||
@click.stop="hamburgerActive = !hamburgerActive"
|
||||
>
|
||||
@ -48,6 +51,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<NounsNav class="mb-0 container py-5 hide-if-empty" v-if="hoverItem && hoverItem.link === `/${config.nouns.route}`"/>
|
||||
<LinksNav class="mb-0 container py-5 hide-if-empty" v-if="hoverItem && hoverItem.link === `/${config.links.route}`"/>
|
||||
<CommunityNav class="mb-0 container py-5 hide-if-empty" v-if="hoverItem && hoverItem.link === `/${config.community.route}`"/>
|
||||
</header>
|
||||
<div v-if="config.locale === 'zh' && new Date() < new Date(2022, 0, 1, 0, 0, 0) && $route.path === '/'" class="container">
|
||||
<div class="alert alert-info my-3">
|
||||
@ -165,14 +171,17 @@
|
||||
import { mapState } from 'vuex'
|
||||
import {DateTime} from "luxon";
|
||||
import forbidden from "../src/forbidden";
|
||||
import NounsNav from "../data/nouns/NounsNav";
|
||||
|
||||
export default {
|
||||
components: { NounsNav },
|
||||
data() {
|
||||
return {
|
||||
hamburgerActive: false,
|
||||
hamburgerShown: false,
|
||||
censusDismissed: false,
|
||||
forbidden,
|
||||
hoverItem: null,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -522,4 +531,8 @@
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hide-if-empty:empty {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<section class="mt-4 mt-lg-0 d-print-none">
|
||||
<section class="mt-4 mt-lg-0 d-print-none" v-if="visibleLinksCount">
|
||||
<div class="d-none d-md-inline-flex btn-group btn-block mb-2 w-100">
|
||||
<router-link v-for="{name, icon, iconInverse, route, routesExtra, condition} in links" :key="name"
|
||||
v-if="condition === undefined || condition === true"
|
||||
@ -26,6 +26,7 @@
|
||||
props: {
|
||||
prefix: {'default': ''},
|
||||
links: {required: true},
|
||||
extraClass: {'default': ''}
|
||||
},
|
||||
methods: {
|
||||
buildRoute(route) {
|
||||
@ -45,5 +46,10 @@
|
||||
return current === expected || current.startsWith(expected + '/');
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
visibleLinksCount() {
|
||||
return this.links.filter(l => l.condition === undefined || l.condition === true).length;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user