myogpatterns
diff --git a/‎articles/3dCorners.html
+34-21 b/‎articles/3dCorners.html
+34-21
@@ -2,40 +2,43 @@
 
 <html>
 	<head>
-		<!-- Google Tag Manager -->
-		<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-		new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-		j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-		'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-		})(window,document,'script','dataLayer','GTM-NC2Q2HQ');</script>
-		<!-- End Google Tag Manager -->
-		
 		<title>Sewing Perfect 3D Corners</title>
-		<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
-		<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
-		<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
-		<link rel="manifest" href="images/site.webmanifest">
+		<link rel="apple-touch-icon" sizes="180x180" href="../images/apple-touch-icon.png">
+		<link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png">
+		<link rel="icon" type="image/png" sizes="16x16" href="../images/favicon-16x16.png">
+		<link rel="manifest" href="../images/site.webmanifest">
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 		<meta name="description" content="Learn to Make Your Own Gear (MYOG). Sewing patterns and tutorials for outdoor adventurers."></head>
 		<link rel="stylesheet" href="../assets/css/main.css" />
 		<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/footer.js" type="text/javascript" defer></script>
+		<script src="../assets/js/colorswitcher.js" defer></script>
+		<script src="../assets/js/header.js" type="text/javascript" defer></script>
+		<script defer src="../assets/js/nav.js" type="text/javascript"></script>
+		<script src="../assets/js/footer.js" type="text/javascript" defer></script>
+		 <!-- Global site tag (gtag.js) - Google Analytics GA4 -->
+		 <script async src="https://www.googletagmanager.com/gtag/js?id=G-WP4C42S5VW"></script>
+		 <script>
+		 window.dataLayer = window.dataLayer || [];
+		 function gtag(){dataLayer.push(arguments);}
+		 gtag('js', new Date());
+ 
+		 gtag('config', 'G-WP4C42S5VW');
+		 </script>
+		 <!-- Global site tag (gtag.js) - Google Analytics GA4 -->
 	</head>
 	<body class="is-preload">
 
-	<!-- Google Tag Manager (noscript) -->
-	<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NC2Q2HQ"
-	height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
-	<!-- End Google Tag Manager (noscript) -->
-
 	<!-- Wrapper -->
 		<div id="wrapper" class="divided">
 
 			<!-- Banner -->
 			<header-template></header-template>
+
+			<!-- Nav -->
+			<div class="spotlight-color invert align-center">
+				<nav-template></nav-template>
+			</div>
 
 			<div id="main">	<!-- Main -->
 
@@ -137,7 +140,17 @@ <h3>Turns & Tight Curves</h3>
 		<script src="../assets/js/util.js"></script>
 		<script src="../assets/js/main.js"></script>
 	<!-- MYOG Pattern Scripts -->
-
+		<script defer>
+			window.addEventListener('load', function () {
+				const pgtitle = document.location.href.match(/[^\/]+$/)[0] //get page name e.g. map.html
+				try {
+					document.querySelector(`#nav .links a[href*="${pgtitle}"`).parentElement.classList.add("active");
+					console.log(pgtitle,"is a nav element. Set active.")
+				} catch (TypeError) {
+					console.log(pgtitle,"not a nav element.")
+				}
+			}, false);
+		</script>
 	</body>
 
 	<!--