dynamic onpage class set based on currentPath

tem/html/core/head.html

@@ -8,8 +8,8 @@
   <meta name="description" content="{{ .Desc }}">
   <meta name="og:image" content="/public/img/knuckles_owo.png">
   <link rel="shortcut icon" href="https://media.dof.dev/kit/logo.svg" type="image/svg+xml">
-  <link rel="stylesheet" href="/public/style.css?v4">
-  <script src="/public/js/mono.js?v1"></script>
+  <link rel="stylesheet" href="/public/style.css?v5">
+  <script src="/public/js/mono.js?v2"></script>
   <link rel="canonical" href="https://{{ .Host }}{{ .PagePath }}">
 </head>
 
@@ -81,7 +81,7 @@
       gap: 6px;
     "
   >
-    <a href="/" class="onpage">
+    <a href="/">
       <img src="/public/img/icons/home.svg?v1" height="32" width="auto" />
       <div>home</div>
     </a>

web/public/js/mono.js

@@ -16,6 +16,15 @@ document.addEventListener("DOMContentLoaded", () => {
   const main_el = elbyid("main");
   const top_img_el = elbyid("top_img");
 
+  const currentPath = window.location.pathname;
+  const sideLinks = side_el.getElementsByTagName('a');
+  
+  for (const link of sideLinks) {
+    if (link.pathname === currentPath) {
+      link.classList.add('onpage');
+    }
+  }
+
   nav_fade = () => {
     if (window.scrollY == 0) {
       if (!side_open) {

web/public/style.css

@@ -134,9 +134,6 @@ body {
       margin: 0;
     }
   }
-  > a.onpage {
-    background-color: #11111166;
-  }
   > #support {
     display: none;
   }
@@ -144,6 +141,9 @@ body {
     display: none;
   }
 }
+#side a.onpage {
+  background-color: #11111133;
+}
 #side a:hover {
   background-color: #11111166;
   transition: 0.166s;