Add JS bundling for navbar

Author: Techassi

js/nav.js

@@ -0,0 +1,5 @@
+import halfmoon from 'halfmoon'
+
+document.addEventListener('DOMContentLoaded', () => {
+  halfmoon.onDOMContentLoaded()
+})

package.json

@@ -1,9 +1,10 @@
 {
   "scripts": {
+    "build:doc": "esbuild js/doc.js --bundle  --minify --sourcemap --format=esm --outfile=static/js/doc.js",
     "build:home": "esbuild js/home.js --bundle  --minify --sourcemap --outfile=static/js/home.js",
     "build:org": "esbuild js/org.js --bundle  --minify --sourcemap --outfile=static/js/org.js",
-    "build:doc": "esbuild js/doc.js --bundle  --minify --sourcemap --format=esm --outfile=static/js/doc.js",
-    "build": "pnpm build:home && pnpm build:org && pnpm build:doc"
+    "build:nav": "esbuild js/nav.js --bundle  --minify --sourcemap --outfile=static/js/nav.js",
+    "build": "pnpm build:nav && pnpm build:home && pnpm build:org && pnpm build:doc"
   },
   "devDependencies": {
     "esbuild": "^0.19.10",
@@ -25,4 +26,4 @@
     "react-table": "7",
     "slugify": "1.4.6"
   }
-}
+}

static/js/doc.js.map

@@ -9,7 +9,7 @@
       </li>
       <li class="nav-item dropdown with-arrow">
         <a class="nav-link" data-toggle="dropdown" id="nav-link-dropdown-toggle">
-          Operators 
+          Operators
           <i class="fa fa-angle-down ml-5" aria-hidden="true"></i> <!-- ml-5= margin-left: 0.5rem (5px) -->
         </a>
         <div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-link-dropdown-toggle">
@@ -33,5 +33,4 @@
     </ul>
   </div>
 </nav>
-<!-- TODO: remove -- this is used for the menu dropdown. Can we use plain CSS for that? -->
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/halfmoon.min.js"></script>
+<script src="static/js/nav.js"></script>