navbar.tag.html 2.74 KB
Newer Older
Yohan Boniface's avatar
Yohan Boniface committed
1
<navbar>
2
  <progress style="display: none" id="progress" />
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
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

      <!-- Vertical navbar -->
    <div class="vertical-nav bg-light" id="sidebar">

      <ul class="nav flex-column bg-light mb-0">
        <li class="nav-item bg-light" style="margin-bottom:4em">
            <h1>
              <a href="." class="nav-link text-dark"></a>
            </h1>
        </li>
        <li class="nav-item">
          <h4>
            <a href="#schema" class="{selected: window.location.hash.startsWith('#schema')} nav-link text-dark bg-light">Schéma</a>
          </h4>
        </li>
        <li class="nav-item">
          <h4>
            <a href="#rules" class="{selected: window.location.hash.startsWith('#rules')} nav-link text-dark bg-light">Règles de gestion</a>
          </h4>
        </li>
        <li class="nav-item">
          <h4>
            <a href="#simulate" class="{selected: window.location.hash.startsWith('#simulate')} nav-link text-dark bg-light">Simuler</a>
          </h4>
        </li>
        <li class="nav-item">
          <h4>
            <a href="#financements" class="{selected: window.location.hash.startsWith('#financements')} nav-link text-dark bg-light">Financements</a>
          </h4>
        </li>
        <li class="nav-item">
          <h4>
            <a href="#scenarios" class="{selected: window.location.hash.startsWith('#scenarios')} nav-link text-dark bg-light">Scénarios</a>
          </h4>
        </li>
        <li class="nav-item">
          <h4>
            <a href="#tools" class="{selected: window.location.hash.startsWith('#tools')} nav-link text-dark bg-light">Outils</a>
          </h4>
        </li>
        <li class="nav-item">
          <h4>
            <a href="#glossary" class="{selected: window.location.hash.startsWith('#glossary')} nav-link text-dark bg-light">Glossaire</a>
          </h4>
        </li>
      </ul>
    </div>
    <!-- End vertical navbar -->
Yohan Boniface's avatar
Yohan Boniface committed
51

Yohan Boniface's avatar
Yohan Boniface committed
52
  <style scoped>
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
53

Yohan Boniface's avatar
Yohan Boniface committed
54 55
    :scope {
      display: grid;
Yohan Boniface's avatar
Yohan Boniface committed
56 57 58
      grid-template-columns: 1fr 4fr;
      padding: 2em;
      border-bottom: 1px solid #eee;
Yohan Boniface's avatar
Yohan Boniface committed
59
    }
Yohan Boniface's avatar
Yohan Boniface committed
60
    h1 {
Yohan Boniface's avatar
Yohan Boniface committed
61 62 63 64
      display: inline-block;
      font-size: 3em;
      line-height: 1em;
    }
Yohan Boniface's avatar
Yohan Boniface committed
65
    nav a {
Yohan Boniface's avatar
Yohan Boniface committed
66 67 68
      font-size: 1.4em;
      font-variant: small-caps;
    }
David Foucher's avatar
David Foucher committed
69 70
    nav a:hover, nav a.selected {
      text-decoration: underline;
Yohan Boniface's avatar
Yohan Boniface committed
71
    }
Yohan Boniface's avatar
Yohan Boniface committed
72
    a + a {
Yohan Boniface's avatar
Yohan Boniface committed
73 74
      margin-left: 1em;
    }
Yohan Boniface's avatar
Yohan Boniface committed
75
    * {
Yohan Boniface's avatar
Yohan Boniface committed
76 77 78
      display: flex;
      align-items: center;
    }
79 80 81 82 83 84 85 86
    progress {
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      top: 0;
      height: 5px;
    }
Yohan Boniface's avatar
Yohan Boniface committed
87
  </style>
88 89 90

  <script>
    this.on('mount', () => init())
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
91 92 93 94 95 96 97

    $(function() {
      // Sidebar toggle behavior
      $('#sidebarCollapse').on('click', function() {
        $('#sidebar, #content').toggleClass('active');
      });
    });
98 99
  </script>

Yohan Boniface's avatar
Yohan Boniface committed
100
</navbar>