themed dropdown menus

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;

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>