new sticky menu

main.js

@@ -170,8 +170,12 @@
     return pathNameSplit()[2]
   }
 
+  function urlParams() {
+    return new URLSearchParams(location.search)
+  }
+
   function getAction() {
-    let params = new URLSearchParams(document.location.search)
+    let params = urlParams()
     return params.get("action")
   }
 
@@ -211,7 +215,7 @@
   }
 
   async function deletePoint() {
-    return await fetch(`https://runcity.geo.rictum.ru/api/points/${new URLSearchParams(location.search).get("cp_id")}`, {
+    return await fetch(`https://runcity.geo.rictum.ru/api/points/${urlParams().get("cp_id")}`, {
       method: 'DELETE'
     })
   }
@@ -881,7 +885,7 @@
   
     if (needUpdateId) {
       let formData = new FormData()
-      formData.set("cp[id]", new URLSearchParams(document.location.search).get("cp_id"))
+      formData.set("cp[id]", urlParams().get("cp_id"))
       formData.set("cp[number]", document.querySelector(`input[name="cp[number]"]`).value)
       formData.set("update_id", true)
       updatePoint(formData).then(() => localStorage.removeItem(localStorageItems.NEED_UPDATE_ID))
@@ -930,14 +934,50 @@
     }
   }
 
-  function addStickyHeaderToMainList() {
-    let topMenu = document.querySelector(".large-menu")
-    let table = document.querySelector("#props")
-    if (topMenu) {
-      let caption = document.createElement("caption")
-      caption.appendChild(topMenu)
-      table.prepend(caption)
+  function addStickyMenu() {
+    let links = {
+      "Волонтеры": "suv_comp",
+      "Контрольные пункты": "cp_mgmt",
+      "Добавить новый КП": "cp_mgmt/?action=edit",
+      "Маршруты": "route_mgmt",
     }
+    let catLinks = {
+      "Редактор маршрута": (catId) => `route_mgmt?action=edit&cat_id=${catId}`,
+      "Конструктор маршрута": (catId) => `route_mgmt/?action=stages&cat_id=${catId}`,
+      "Карта": (catId) => `route_mgmt?action=map&cat_id=${catId}`,
+      "Этапы": (catId) => `route_mgmt/?action=stages&cat_id=${catId}`,
+      "Легенда": (catId) => `route_mgmt?action=preview&cat_id=${catId}&locale_id=ru`,
+    }
+
+    let menuContainer = document.createElement("nav")
+    menuContainer.classList.add("sticky-menu")
+    let menu = document.createElement("menu")
+    menuContainer.appendChild(menu)
+
+    let catId = urlParams().get("cat_id")
+    if (catId !== null) {
+      for (const [label, href] of Object.entries(catLinks)) {
+        links[label] = href(catId)
+      }
+    }
+
+    for (const [label, href] of Object.entries(links)) {
+      let menuItem = document.createElement("li")
+      let link = document.createElement("a")
+      link.href = `/${getCompetition()}/${href}`
+      link.innerText = label
+
+      menuItem.appendChild(link)
+      menu.appendChild(menuItem)
+    }
+
+    document.querySelector("#header").after(menuContainer)
+  }
+
+  function addClearBoth() {
+    let clearEl = document.createElement("div")
+    clearEl.style.clear = "both"
+    document.body.appendChild(clearEl)
   }
 
   function initMapbox() {
@@ -1370,12 +1410,24 @@
   }
 
   let styles = `
-    #props caption {
+    .sticky-menu {
       position: sticky;
       top: 0;
+      z-index: 9999;
     
-      .large-menu {
+      menu {
+        display: flex;
+        gap: .3rem;
         background: white;
+        font-size: 1.2rem;
+
+        li {
+          list-style-type: none;
+
+          &:not(:last-child)::after {
+            content: " | "
+          }
+        }
       }
     }
 
@@ -1723,12 +1775,11 @@
     return
   }
 
+  addClearBoth()
   initMapbox()
   addFullscreenButton()
 
-  if (isListCpPage()) {
-    addStickyHeaderToMainList()
-  }
+  addStickyMenu()
 
   if (isRouteBuildPage() || isRouteMapPage()) {
     centerMap()