From 6e12775bb8640e34b6965692bfcbe97c3381b376 Mon Sep 17 00:00:00 2001
From: Mickael Kerjean <mickael@kerjean.me>
Date: Sun, 23 Jul 2023 21:10:41 +1000
Subject: [PATCH] feature (admin): revamp side menu

---
 public/pages/adminpage/decorator_sidemenu.js | 33 +++++++++++++++++---
 1 file changed, 28 insertions(+), 5 deletions(-)

diff --git a/public/pages/adminpage/decorator_sidemenu.js b/public/pages/adminpage/decorator_sidemenu.js
index 0f3de5f6..66616866 100644
--- a/public/pages/adminpage/decorator_sidemenu.js
+++ b/public/pages/adminpage/decorator_sidemenu.js
@@ -11,7 +11,6 @@ import "../../components/icon.js";
 
 export default function(ctrl) {
     return (render) => {
-        const isActive = (route) => location.pathname.endsWith(route) ? "active" : "";
         const $page = createElement(`
             <div class="component_page_admin">
                 <div class="component_menu_sidebar no-select">
@@ -23,10 +22,26 @@ export default function(ctrl) {
                     </a>
                     <h2>Admin console</h2>
                     <ul>
-                        <li><a href="/admin/backend" class="${isActive("/admin/backend")}" data-link>Backend</a></li>
-                        <li><a href="/admin/settings" class="${isActive("/admin/settings")}" data-link>Settings</a></li>
-                        <li><a href="/admin/logs" class="${isActive("/admin/logs")}" data-link>Logs</a></li>
-                        <li class="version"><a href="/admin/about" class="${isActive("/admin/about")}" data-link data-bind="version"></a></li>
+                        <li>
+                            <a href="/admin/backend" data-link>
+                                Backend
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/admin/settings" data-link>
+                                Settings
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/admin/logs" data-link>
+                                Logs
+                            </a>
+                        </li>
+                        <li class="version">
+                            <a href="/admin/about" data-link data-bind="version">
+                                &nbsp;
+                            </a>
+                        </li>
                     </ul>
                 </div>
                 <div class="page_container scroll-y" data-bind="admin"></div>
@@ -55,6 +70,14 @@ export default function(ctrl) {
             stateMutation(qs($page, `[data-bind="logo"]`), "innerHTML"),
         ));
 
+        // feature: currently active menu link
+        effect(rxjs.of($page.querySelectorAll(".component_menu_sidebar li a")).pipe(
+            rxjs.mergeMap(($els) => $els),
+            rxjs.filter(($el) => location.pathname.endsWith($el.getAttribute("href"))),
+            rxjs.tap(($el) => $el.classList.add("active")),
+            rxjs.tap(($el) => $el.removeAttribute("href")),
+        ));
+
         return (route) => $content.innerHTML = `<div>loading "${route}"</div>`;
     };
 }