From b8d022335e20c41ee802ef3da701086cfa7dcd89 Mon Sep 17 00:00:00 2001
From: mfahampshire <mfahampshire@pm.me>
Date: Wed, 7 Feb 2024 13:53:12 +0100
Subject: [PATCH] themed dropdown menus

---
 documentation/docs/nym_themes/custom.css |  6 ++++++
 documentation/docs/nym_themes/index.hbs  | 23 +++++++++++++++--------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/documentation/docs/nym_themes/custom.css b/documentation/docs/nym_themes/custom.css
index 71768a2b32..8005eb68df 100644
--- a/documentation/docs/nym_themes/custom.css
+++ b/documentation/docs/nym_themes/custom.css
@@ -12,6 +12,9 @@
     color: #121726;
     background-color: #c5573d;
   }
+  select option {
+    background-color: #121726;
+  }
 }
 
 .light {
@@ -29,6 +32,7 @@
   position: absolute;
   left: 50%;
 }
+.menu-bar .a:hover,
 
 /*necessary because of ^*/
 .right-buttons {
@@ -40,6 +44,8 @@ select {
   font-size: 16px;
 }
 
+
+
 footer {
   font-size: 0.8em;
   text-align: center;
diff --git a/documentation/docs/nym_themes/index.hbs b/documentation/docs/nym_themes/index.hbs
index a1352a057c..0d5a1428dd 100644
--- a/documentation/docs/nym_themes/index.hbs
+++ b/documentation/docs/nym_themes/index.hbs
@@ -159,7 +159,6 @@
                         </ul>
 
                         <!-- CUSTOM -->
-                        <!-- TODO style everything -->
                         <select id="dropdown-menu" class="icon-button">
                             <option value="">Developer Docs</option>
                             <option value="https://nymtech.net/developers">Dev Portal</option>
@@ -167,17 +166,17 @@
                             <option value="https://sdk.nymtech.net">Typescript SDK</option>
                         </select>
 
-
                         <select id="dropdown-menu2" class="icon-button">
                             <option value="">Setup Guides</option>
-                            <option value="">NymVPN</option>
                             <option value="https://nymtech.net/operators">Operators</option>
+                            <option value="https://nymtech.net/developers/nymvpn/intro.html">NymVPN Testing</option>
                         </select>
 
-                        <!-- TODO make orange only on hover -->
-                        <div class="icon-button">
-                            <a href="https://nymtech.net/docs">Network Docs</a>
-                        </div>
+                        <select id="dropdown-menu3" class="icon-button">
+                            <option value="">Network Protocol</option>
+                            <option value="https://nymtech.net/docs">Network Docs</option>
+                            <option value="https://nymtech.net/learn/papers">Academic Papers</option>
+                        </select>
 
                         <script>
                             document.getElementById('dropdown-menu').addEventListener('change', function() {
@@ -196,8 +195,16 @@
                                 }
                             });
                         </script>
-                        <!-- END CUSTOM -->
 
+                        <script>
+                            document.getElementById('dropdown-menu3').addEventListener('change', function() {
+                                const selected = this.options[this.selectedIndex];
+                                if (selected.value !== '') {
+                                    window.location.href = selected.value;
+                                }
+                            });
+                        </script>
+                        <!-- END CUSTOM -->
                     </div>
 
                     <h1 class="menu-title"> {{ book_title }}</h1>