documentation-ui/src/partials/universal-nav.hbs at e5e1d39820fa5318d2ae55b16befe8160ea9cfbd · stackabletech/documentation-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
{{!--
  The Stackable universal navigation strip — links the three Stackable properties
  (stackable.tech, docs, hub), mirroring the hub's meta strip. Collapses to a
  property switcher on small screens.
--}}
<div class="universal-nav" role="region" aria-label="Stackable network">
  <div class="universal-nav__bar">
    <a class="universal-nav__brand" href="{{{ relativize (versioned "home" page "index.html") }}}" aria-label="Stackable Documentation home">
      <img class="universal-nav__logo" src="{{{uiRootPath}}}/img/stackable-mark.svg" alt="">
    </a>

    <span class="universal-nav__sep" aria-hidden="true"></span>

    <nav class="universal-nav__tabs" aria-label="Stackable properties">
      <a class="universal-nav__tab" href="https://stackable.tech">
        <span class="universal-nav__dot" aria-hidden="true"></span>
        <span>Stackable</span>
      </a>
      <a class="universal-nav__tab is-current" href="https://docs.stackable.tech" aria-current="page">
        <span class="universal-nav__dot" aria-hidden="true"></span>
        <span>Documentation</span>
      </a>
      <a class="universal-nav__tab" href="https://hub.stackable.tech">
        <span class="universal-nav__dot" aria-hidden="true"></span>
        <span>Hub</span>
      </a>
    </nav>

    <a class="universal-nav__icon" href="https://github.com/stackabletech" target="_blank" rel="noopener" aria-label="Stackable on GitHub">
      <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.56v-2c-3.2.7-3.87-1.36-3.87-1.36-.52-1.32-1.27-1.67-1.27-1.67-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.75 2.68 1.25 3.33.96.1-.75.4-1.25.73-1.54-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.18-3.1-.12-.29-.51-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11 11 0 015.79 0c2.21-1.49 3.18-1.18 3.18-1.18.62 1.58.23 2.75.11 3.04.74.81 1.18 1.84 1.18 3.1 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.68.8.56C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z"/></svg>
    </a>
    <a class="universal-nav__cta" href="https://stackable.tech/en/first-steps/">Get started (free)</a>

    <button type="button" class="universal-nav__disclosure" aria-expanded="false" aria-controls="universal-nav-sheet">
      <span class="universal-nav__dot" aria-hidden="true"></span>
      <span>Documentation</span>
      <span class="universal-nav__caret" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span>
      <span class="universal-nav__sr">Open Stackable property switcher</span>
    </button>
  </div>

  <div id="universal-nav-sheet" class="universal-nav__sheet" hidden>
    <nav aria-label="Switch Stackable property">
      <a class="universal-nav__sheet-row" href="https://stackable.tech">
        <span class="universal-nav__sheet-dot" aria-hidden="true"></span>
        <span class="universal-nav__sheet-text">
          <span class="universal-nav__sheet-name">Stackable</span>
          <span class="universal-nav__sheet-host">stackable.tech</span>
        </span>
        <span class="universal-nav__ext" aria-hidden="true">{{> universal-nav-icon-external}}</span>
      </a>
      <a class="universal-nav__sheet-row is-current" href="https://docs.stackable.tech" aria-current="page">
        <span class="universal-nav__sheet-dot" aria-hidden="true"></span>
        <span class="universal-nav__sheet-text">
          <span class="universal-nav__sheet-name">Documentation</span>
          <span class="universal-nav__sheet-host">docs.stackable.tech</span>
        </span>
        <span class="universal-nav__here">You are here</span>
      </a>
      <a class="universal-nav__sheet-row" href="https://hub.stackable.tech">
        <span class="universal-nav__sheet-dot" aria-hidden="true"></span>
        <span class="universal-nav__sheet-text">
          <span class="universal-nav__sheet-name">Hub</span>
          <span class="universal-nav__sheet-host">hub.stackable.tech</span>
        </span>
        <span class="universal-nav__ext" aria-hidden="true">{{> universal-nav-icon-external}}</span>
      </a>
    </nav>
    <a class="universal-nav__cta universal-nav__sheet-cta" href="https://stackable.tech/en/first-steps/">Get started (free)</a>
  </div>
</div>