Merge pull request #139 from stackabletech/fix/search-script-loading

fix: cleanup header structure

Author: dervoeti

src/partials/head-scripts.hbs

@@ -38,3 +38,4 @@
     <!-- End Matomo Code -->
     {{/with}}
     <script>var uiRootPath = '{{{uiRootPath}}}'</script>
+    <script src="/pagefind/pagefind-modular-ui.js"></script>

src/partials/header-content.hbs

@@ -1,2 +1,81 @@
-{{> header-scripts}}
-{{> header-content}}
+<header class="header">
+  <nav class="navbar">
+    <div id="topbar-left" class="navbar-brand">
+      <a class="navbar-item" href="{{{ relativize (versioned "home" page "index.html") }}}">
+        <img src="{{{uiRootPath}}}/img/stackable-logo.png">
+      </a>
+      <a class="navbar-item documentation-link" href="{{{ relativize (versioned "home" page "index.html") }}}">
+        Docs
+      </a>
+    </div>
+    <div id="topbar-nav" class="navbar-menu">
+      {{#> navbar }}
+      <div class="navbar-item has-dropdown is-hoverable">
+        <a class="navbar-link" href="#">Dummy</a>
+        <div class="navbar-dropdown">
+          <div class="navbar-item"><strong>Core</strong></div>
+          <a class="navbar-item" href="https://gitlab.com/antora/antora">Repository</a>
+          <a class="navbar-item" href="https://gitlab.com/antora/antora/issues">Issue Tracker</a>
+          <hr class="navbar-divider">
+          <div class="navbar-item"><strong>Default UI</strong></div>
+          <a class="navbar-item" href="https://gitlab.com/antora/antora-ui-default">Repository</a>
+          <a class="navbar-item" href="https://gitlab.com/antora/antora-ui-default/issues">Issue Tracker</a>
+          <hr class="navbar-divider">
+          <a class="navbar-item" href="https://gitlab.com/antora/antora/blob/main/contributing.adoc">Contributing</a>
+        </div>
+      </div>
+      {{/navbar}}
+    </div>
+    <div id="topbar-right" class="navbar-end">
+      <button class="navbar-burger" data-target="popup-menu">
+        <span></span>
+        <span></span>
+        <span></span>
+      </button>
+      <div id="search-button" class="navbar-item">
+        <i class="fa-solid fa-magnifying-glass"></i>
+        <div id="search-background"></div>
+        <div id="search">
+          <div id="search-input"></div>
+          <ul id="search-results"></ul>
+        </div>
+      </div>
+      {{#if @root.page.versions}}
+      {{#with @root.page.versions}}
+      <div class="navbar-item has-dropdown is-hoverable version-button" data-target="version-dropdown">
+        <a class="navbar-link button" href="#">{{@root.page.componentVersion.displayVersion}}</a>
+        <div id="version-dropdown" class="navbar-dropdown">
+        {{#each this}}
+          <a class="navbar-item version
+          {{~#if (eq ./version @root.page.version)}} is-current{{/if~}}
+          {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
+        {{/each}}
+        </div>
+      </div>
+      {{/with}}
+      {{else}}
+      <div class="navbar-item has-dropdown is-hoverable version-button">
+        <a class="navbar-link button" href="#">latest</a>
+      </div>
+      {{/if}}
+    </div>
+  </nav>
+  <div id="popup-menu" class="mobile-popup-menu">
+    {{#> navbar }}
+    <div class="navbar-item has-dropdown is-hoverable">
+      <a class="navbar-link" href="#">Dummy</a>
+      <div class="navbar-dropdown">
+        <div class="navbar-item"><strong>Core</strong></div>
+        <a class="navbar-item" href="https://gitlab.com/antora/antora">Repository</a>
+        <a class="navbar-item" href="https://gitlab.com/antora/antora/issues">Issue Tracker</a>
+        <hr class="navbar-divider">
+        <div class="navbar-item"><strong>Default UI</strong></div>
+        <a class="navbar-item" href="https://gitlab.com/antora/antora-ui-default">Repository</a>
+        <a class="navbar-item" href="https://gitlab.com/antora/antora-ui-default/issues">Issue Tracker</a>
+        <hr class="navbar-divider">
+        <a class="navbar-item" href="https://gitlab.com/antora/antora/blob/main/contributing.adoc">Contributing</a>
+      </div>
+    </div>
+    {{/navbar}}
+  </div>
+</header>