TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-10 07:56:50 -04:00
Code Issues Packages Projects Releases Wiki Activity

show submenus on hover

Browse Source
This commit is contained in:
Andrea Vos 2023-06-29 20:32:46 +02:00
parent cc83af40f2
commit 4b8b38d71e
2 changed files with 50 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
components/Header.vue
View File

@ -1,39 +1,42 @@
<template> <template>
<div v-if="config.header" class="mb-lg-4"> <div v-if="config.header" class="mb-lg-4">
<header> <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"> <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' : ''}`"> <nuxt-link v-for="link in links" :key="link.link" :to="link.link"
<h1 v-if="link.header" class="text-nowrap"> :class="`nav-item btn btn-sm ${link.header ? 'nav-header' : ''} ${isActiveRoute(link) ? 'active' : ''} ${link.header ? 'flex-grow-0' : ''}`"
<Logo flag/> @mouseenter.native="hoverItem = link"
<span class="higher"><T>title</T></span> >
</h1> <h1 v-if="link.header" class="text-nowrap">
<template v-else> <Logo flag/>
<Icon :v="link.icon" size="1.6"/> <span class="higher"><T>title</T></span>
<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>
</h1> </h1>
<template v-else>
<Icon :v="link.icon" size="1.6"/>
<br/>
<span class="text-nowrap"><Spelling :text="link.text"/></span>
</template>
</nuxt-link> </nuxt-link>
<VersionDropdown/> <div class="nav-item flex-grow-0">
<VersionDropdown end/>
</div>
</div> </div>
<div class="btn-group-vertical d-flex nav-custom mb-2"> <div class="d-block-force d-lg-none p-4">
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`"> <div class="text-center mb-3">
<Icon :v="link.icon"/> <nuxt-link to="/">
<Spelling :text="link.textLong || link.text"/> <h1 class="text-nowrap">
</nuxt-link> <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> <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' : '']" <button :class="['btn btn-outline-secondary btn-hamburger', hamburgerActive ? 'active' : '']"
@click.stop="hamburgerActive = !hamburgerActive" @click.stop="hamburgerActive = !hamburgerActive"
> >
@ -48,6 +51,9 @@
</div> </div>
</div> </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> </header>
<div v-if="config.locale === 'zh' && new Date() < new Date(2022, 0, 1, 0, 0, 0) && $route.path === '/'" class="container"> <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"> <div class="alert alert-info my-3">
@ -165,14 +171,17 @@
import { mapState } from 'vuex' import { mapState } from 'vuex'
import {DateTime} from "luxon"; import {DateTime} from "luxon";
import forbidden from "../src/forbidden"; import forbidden from "../src/forbidden";
import NounsNav from "../data/nouns/NounsNav";
export default { export default {
components: { NounsNav },
data() { data() {
return { return {
hamburgerActive: false, hamburgerActive: false,
hamburgerShown: false, hamburgerShown: false,
censusDismissed: false, censusDismissed: false,
forbidden, forbidden,
hoverItem: null,
}; };
}, },
computed: { computed: {
@ -522,4 +531,8 @@
opacity: 1; opacity: 1;
} }
} }
.hide-if-empty:empty {
display: none !important;
}
</style> </style>

8
components/Submenu.vue
View File

@ -1,5 +1,5 @@
<template> <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"> <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" <router-link v-for="{name, icon, iconInverse, route, routesExtra, condition} in links" :key="name"
v-if="condition === undefined || condition === true" v-if="condition === undefined || condition === true"
@ -26,6 +26,7 @@
props: { props: {
prefix: {'default': ''}, prefix: {'default': ''},
links: {required: true}, links: {required: true},
extraClass: {'default': ''}
}, },
methods: { methods: {
buildRoute(route) { buildRoute(route) {
@ -45,5 +46,10 @@
return current === expected || current.startsWith(expected + '/'); return current === expected || current.startsWith(expected + '/');
}, },
}, },
computed: {
visibleLinksCount() {
return this.links.filter(l => l.condition === undefined || l.condition === true).length;
},
}
} }
</script> </script>