nav-template test on map

Author: myogpatterns

assets/css/main.css

@@ -2157,6 +2157,8 @@ input, select, textarea {
 	}
 
 /* Nav */
+	.spotlight-color {background-color: var(--spotlight) !important; color: white !important;}
+
 	#nav ul {
 		display: flex;
 		flex: 1;

assets/js/colorswitcher.js

@@ -4,19 +4,16 @@ const mainColors=[
     "#312744", //--dark-purple: #312744ff
     "#133653", //--prussian-blue: #133653ff
     "#2a3d37", //--green-mountain: #2a3d37ff
-    "#4e0d0f", //--barn-red: #4e0d0fff
     "#433818", //--army-olive: #433818ff
     "#375466", //--blue-wave: #375466ff;
-    "#800007", //--brick-red: #800007ff;
 ];
 
 const accentColors = [
     "#1874dd", //--bright-navy-blue: #1874ddff
     "#019aa5", //--viridian-green: #019aa5ff
-    "#ffcc37", //--sunglow: #ffcc37ff
+    "#e76f51", // earthy orange
     "#b063aa", //--pearly-purple: #b063aaff
     "#d0046f", //--magenta-dye: #d0046fff
-    "#c2c1c2", //--silver-bullet: #c2c1c2ff
     "#a0743c", //--coyote-brown: #a0743cff
 ];
 

assets/js/nav.js

@@ -0,0 +1,23 @@
+class Nav extends HTMLElement {
+    constructor() {
+      super();
+    }
+
+    connectedCallback() {
+        this.innerHTML = `
+        <nav id="nav">
+            <ul >
+                <li class="links"><a href="zerotohero.html">Getting Started</a></li>
+                <li class="links"><a href="index.html">Patterns</a></li>
+                <li class="links"><a href="fabrics.html">Fabrics</a></li>
+                <li class="links"><a href="hardware.html">Hardware</a></li>
+                <li class="links"><a href="map.html">MYOG Suppliers</a></li>
+                <li class="menu"><a href="javascript:void(0);" class="icon" onclick="navCollapse()">
+                    <i class="fa fa-compass fa-2x"></i>
+                </a></li>
+            </ul>
+        </nav>
+        `;
+    }
+}
+customElements.define('nav-template', Nav);

map.html

@@ -27,6 +27,7 @@
     <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
     <script src="assets/js/colorswitcher.js" defer></script>
     <script src="assets/js/header.js" type="text/javascript" defer></script>
+    <script src="assets/js/nav.js" type="text/javascript" defer></script>
     <script src="assets/js/footer.js" type="text/javascript" defer></script>
 
     <link defer rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin=""/>
@@ -49,21 +50,12 @@
         <!-- Banner -->
         <header-template></header-template>
 
-        <section class="color8 invert align-center">
-            <nav id="nav">
-                <ul >
-                    <li class="links"><a href="zerotohero.html">Getting Started</a></li>
-                    <li class="links"><a href="index.html">Patterns</a></li>
-                    <li class="links"><a href="fabrics.html">Fabrics</a></li>
-                    <li class="links"><a href="hardware.html">Hardware</a></li>
-                    <li class="links active"><a href="map.html">MYOG Suppliers</a></li>
-                    <li class="menu"><a href="javascript:void(0);" class="icon" onclick="navCollapse()">
-                        <i class="fa fa-compass fa-2x"></i>
-                    </a></li>
-                </ul>
-            </nav>
-        </section>
+        <!-- Nav -->
+        <div class="spotlight-color invert align-center">
+            <nav-template></nav-template>
+        </div>
 
+        <!-- Main -->
         <section id="main" class="wrapper style1 align-center">
             <div class="inner">
                 <!-- map.js insert -->
@@ -88,5 +80,11 @@
     <script defer src="assets/js/breakpoints.min.js"></script>
     <script defer src="assets/js/util.js"></script>
     <script defer src="assets/js/main.js"></script>
+    <script defer>
+        window.addEventListener('load', function () {
+            const pgtitle = document.location.href.match(/[^\/]+$/)[0] //get page name e.g. map.html
+            document.querySelector(`#nav .links a[href*="${pgtitle}"`).parentElement.classList.add("active");
+        }, false);
+    </script>
 </body>
 </html>