From 4b8b38d71e7189f3ae9f25e8cf0fb67b4bef8796 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Thu, 29 Jun 2023 20:32:46 +0200
Subject: [PATCH] show submenus on hover

---
 components/Header.vue  | 73 +++++++++++++++++++++++++-----------------
 components/Submenu.vue |  8 ++++-
 2 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/components/Header.vue b/components/Header.vue
index e4ddae26e..466cbf20f 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -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>
diff --git a/components/Submenu.vue b/components/Submenu.vue
index 55e14f971..22724303d 100644
--- a/components/Submenu.vue
+++ b/components/Submenu.vue
@@ -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>