feat(navigation): add simple anchor mecanism for views

NodeSecure · Nov 28, 2023 · 7bff7ab · 7bff7ab
1 parent a38a550
commit 7bff7ab
Showing 1 changed file with 24 additions and 1 deletion.
diff --git a/public/js/components/navigation.js b/public/js/components/navigation.js
@@ -1,19 +1,27 @@
 // Import Internal Dependencies
 import { PackageInfo } from "./package/package.js";
 
+// CONSTANTS
+const kAvailableView = new Set([
+  "network--view",
+  "home--view",
+  "settings--view"
+]);
+
 export class ViewNavigation {
   static DefaultActiveMenu = "network--view";
 
   constructor() {
     this.activeMenu = null;
     this.menus = new Map();
 
+    const defaultMenu = this.getAnchor();
     const navElements = document.querySelectorAll("#view-navigation li");
     for (const navigationMenu of navElements) {
       const menuName = navigationMenu.getAttribute("data-menu");
       this.menus.set(menuName, navigationMenu);
 
-      if (menuName === ViewNavigation.DefaultActiveMenu) {
+      if (menuName === defaultMenu) {
         this.setNewActiveMenu(navigationMenu);
       }
 
@@ -54,6 +62,7 @@ export class ViewNavigation {
 
     document.getElementById(menuName).classList.remove("hidden");
     selectedNav.classList.add("active");
+    this.setAnchor(menuName);
 
     this.activeMenu = selectedNav;
   }
@@ -66,6 +75,20 @@ export class ViewNavigation {
     view.classList.add("hidden");
   }
 
+  getAnchor() {
+    const documentURL = new URL(document.URL);
+    const anchorName = documentURL.searchParams.get("view") ?? ViewNavigation.DefaultActiveMenu;
+
+    return kAvailableView.has(anchorName) ? anchorName : ViewNavigation.DefaultActiveMenu;
+  }
+
+  setAnchor(anchorName) {
+    const newDocumentURL = new URL(document.URL);
+    newDocumentURL.searchParams.set("view", anchorName);
+
+    window.history.replaceState(void 0, void 0, newDocumentURL);
+  }
+
   /**
    * @param {!HTMLElement} selectedNav
    */