Custom Hamburger Menu Links

テーマコンポーネント
77

以下を使用します。

<script>
  const customHeader = document.createElement("div")
  customHeader.className = "sidebar-section-wrapper sidebar-section-community"
  customHeader.innerHTML = `
            <div class="sidebar-section-header-wrapper sidebar-row">
              <button id="ember11" class="sidebar-section-header sidebar-section-header-collapsable btn-flat btn no-text" type="button">
                <span class="sidebar-section-header-text"> 法的事項 </span>
              </button>
          </div>
          <div class="sidebar-section-content" id="customNavigation"/>
      `

  $(document).ready(function () {
    // リンクを作成
    const links = [
      { title: "インプリント", src: "/impressum" },
      { title: "プライバシー", src: "/privacy" },
    ]

    // モバイル
    let hamburger = document.getElementById("toggle-hamburger-menu")
    if (hamburger) {
      hamburger.addEventListener("click", addCustomLinks)
    } else {
      addCustomLinks()
    }
    
    let bool = false;
    function addCustomLinks() {
      setTimeout(function () {
        // ナビゲーションがロードされるまで待機を強制
        const sidebar = document.getElementsByClassName("sidebar-sections")[0]
        if (sidebar) {
          sidebar.append(customHeader)
          if (bool) return;
          // customNav IDを取得
          const customNavigation = document.getElementById("customNavigation")
          if (customNavigation) {
            links.filter(function (link) {
              let linkDiv = document.createElement("div")
              linkDiv.className = "sidebar-section-link-wrapper"
              linkDiv.innerHTML = `<a href="${link.src}" class="sidebar-section-link sidebar-section-link-everything sidebar-row ember-view">
                        <span class="sidebar-section-link-prefix icon"></span>
                        <span class="sidebar-section-link-content-text"> ${link.title} </span>
                    </a>
                  `
              customNavigation.append(linkDiv)
              let linkIcon = document.getElementById("link_" + link.title)
            })
          }
        }
        bool = true
      }, 0)
      
    }
  })
</script>

結果は https://forum.courservio.de/ で確認できます。
このコードの元のバージョンは https://meta.discourse.org/t/add-custom-links-to-sidebar/246848 から来ています。参考になるかもしれません。

「いいね！」 6