From be67120d5ddc15e8d9cca6fb82ffdee3418513ea Mon Sep 17 00:00:00 2001
From: "Steven R. Loomis" <srl295@gmail.com>
Date: Mon, 9 Sep 2024 15:19:49 -0500
Subject: [PATCH] CLDR-17803 site: improved popup (#4029)

---
 docs/site/assets/css/page.css   | 35 ++++++++++++++++++++++-----------
 docs/site/assets/js/cldrsite.js | 33 ++++++++++++++++++++-----------
 2 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/docs/site/assets/css/page.css b/docs/site/assets/css/page.css
index 6e0af2c98e4..684f7bc8e85 100644
--- a/docs/site/assets/css/page.css
+++ b/docs/site/assets/css/page.css
@@ -36,20 +36,31 @@ header .nav > div {
   display: inline;
 }
 
-header .nav a {
+header .nav a.uplink {
   color: white;
 }
 
-header .nav ul b {
-  color: gray;
+header .nav div.subpages {
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    background-color: white;
+    position: absolute;
+    color: black;
+    padding: 0.5em;
 }
 
-.title ul.subpages {
-  display: none;
+div.subpages .hamburger {
+    left: 1em;
+    top: 1em;
+    color: darkslateblue;
 }
 
-.title:hover ul.subpages {
-  display: block;
+.subpages .hamburger:hover {
+    color: gray;
+}
+
+header .nav ul b {
+  color: gray;
 }
 
 header .nav .crumb {
@@ -59,19 +70,19 @@ header .nav .crumb {
 
 header .nav ul {
   display: inline;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
-  z-index: 1;
-  background-color: navy;
-  padding: 0.5em;
 }
 
 header .nav ul li {
   display: block;
-  padding: 0.5em;
+  padding: 0.25em;
   font-size: medium;
   margin: 0;
 }
 
+.subpages .li a {
+    color: black !important;
+}
+
 header .message {
   color: lightblue;
   display: list-item;
diff --git a/docs/site/assets/js/cldrsite.js b/docs/site/assets/js/cldrsite.js
index 70e5538cb20..8f27ecb9545 100644
--- a/docs/site/assets/js/cldrsite.js
+++ b/docs/site/assets/js/cldrsite.js
@@ -73,12 +73,17 @@ async function siteData() {
 const app = Vue.createApp(
   {
     setup(props) {
+      // the tree.json data
       const tree = ref({});
+      // loading status for tree.json
       const status = ref(null);
+      // is the popup menu shown?
+      const popup = ref(false);
 
       return {
         tree,
         status,
+        popup,
       };
     },
     mounted() {
@@ -211,18 +216,24 @@ const app = Vue.createApp(
          <a class="uplink" v-bind:href="ancestor.href">{{ ancestor.title }}</a><span class="crumb">❱</span>
        </span>
        <div v-if="!siblingPages || !siblingPages.length" class="title"> {{ ourTitle }} </div>
-       <div v-else class="title"><span class="hamburger">≡</span>
+       <div v-else class="title"  @mouseover="popup = true"><span class="hamburger" @click="popup = !popup">≡</span>
             {{ ourTitle }}
-        <ul class="subpages">
-            <li v-for="subpage of siblingPages" :key="subpage.path">
-                <span v-if="path == subpage.html">
-                    <b>{{ subpage.title }}</b>
-                </span>
-                <a v-else v-bind:href="'/'+subpage.html">
-                    {{ subpage.title }}
-                </a>
-            </li>
-        </ul>
+
+        <div class="subpages" v-if="popup">
+          <span class="hamburger" @click="popup=false">✕</span>
+          <ul class="subpages" >
+              <li v-for="subpage of siblingPages" :key="subpage.path">
+                  <span v-if="path == subpage.html">
+                      <b>{{ subpage.title }}</b>
+                  </span>
+                  <a v-else v-bind:href="'/'+subpage.html">
+                      {{ subpage.title }}
+                  </a>
+              </li>
+          </ul>
+        </div>
+
+
       </div>
 
     </div>`,