navbar.tag.html 3.72 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

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

      <ul class="nav flex-column bg-light mb-0">
8
        <li class="nav-item bg-light">
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
9
            <h1>
10
              <a href="." id="nav-title" class="nav-link text-dark"></a>
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
11 12 13 14
            </h1>
        </li>
        <li class="nav-item">
          <h4>
15 16 17 18
			      <a href="." class="{selected: window.location.hash.startsWith('')} nav-link text-dark bg-light">
              <img src="/explorer/images/Icone_Home.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
              Accueil
            </a>
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
19 20 21 22
          </h4>
        </li>
        <li class="nav-item">
          <h4>
23 24 25 26
            <a href="#rules" class="{selected: window.location.hash.startsWith('#rules')} nav-link text-dark bg-light">
              <img src="/explorer/images/Icone_Referentiel.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
              Référentiel
            </a>
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
27 28 29 30
          </h4>
        </li>
        <li class="nav-item">
          <h4>
31 32 33 34
            <a href="#financements" class="{selected: window.location.hash.startsWith('#financements')} nav-link bg-light">
              <img src="/explorer/images/Icone_Financement.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
              Financements
            </a>
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
35 36 37 38
          </h4>
        </li>
        <li class="nav-item">
          <h4>
39 40 41 42
            <a href="#simulate" class="{selected: window.location.hash.startsWith('#simulate')} nav-link text-dark bg-light">
              <img src="/explorer/images/Icone_Simulateur.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
              Simulateur
            </a>
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
43 44 45 46
          </h4>
        </li>
        <li class="nav-item">
          <h4>
47 48 49 50
            <a href="#scenarios" class="{selected: window.location.hash.startsWith('#scenarios')} nav-link text-dark bg-light">
              <img src="/explorer/images/Icone_Scenarios.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
              Scénarios
            </a>
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
51 52 53 54
          </h4>
        </li>
        <li class="nav-item">
          <h4>
55 56 57 58
            <a href="#tools" class="{selected: window.location.hash.startsWith('#tools')} nav-link text-dark bg-light">
              <img src="/explorer/images/Icone_Outils.svg" width="23" height="23" class="d-inline-block nav-icon" alt="">
              Outils
            </a>
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
59 60
          </h4>
        </li>
61
<!--
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
62 63
        <li class="nav-item">
          <h4>
64
            <a href="#glossary" class="{selected: window.location.hash.startsWith('#glossary')} nav-link bg-light">Glossaire</a>
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
65 66
          </h4>
        </li>
67 68 69 70 71 72
        <li class="nav-item">
          <h4>
			  <a href="#schema" class="{selected: window.location.hash.startsWith('#schema')} nav-link bg-light">Schéma</a>
          </h4>
        </li>
-->
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
73 74 75
      </ul>
    </div>
    <!-- End vertical navbar -->
Yohan Boniface's avatar
Yohan Boniface committed
76

Yohan Boniface's avatar
Yohan Boniface committed
77
  <style scoped>
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
78

Yohan Boniface's avatar
Yohan Boniface committed
79 80
    :scope {
      display: grid;
Yohan Boniface's avatar
Yohan Boniface committed
81 82 83
      grid-template-columns: 1fr 4fr;
      padding: 2em;
      border-bottom: 1px solid #eee;
Yohan Boniface's avatar
Yohan Boniface committed
84
    }
Yohan Boniface's avatar
Yohan Boniface committed
85
    h1 {
Yohan Boniface's avatar
Yohan Boniface committed
86 87 88 89
      display: inline-block;
      font-size: 3em;
      line-height: 1em;
    }
Yohan Boniface's avatar
Yohan Boniface committed
90
    nav a {
Yohan Boniface's avatar
Yohan Boniface committed
91 92 93
      font-size: 1.4em;
      font-variant: small-caps;
    }
David Foucher's avatar
David Foucher committed
94 95
    nav a:hover, nav a.selected {
      text-decoration: underline;
Yohan Boniface's avatar
Yohan Boniface committed
96
    }
Yohan Boniface's avatar
Yohan Boniface committed
97
    a + a {
Yohan Boniface's avatar
Yohan Boniface committed
98 99
      margin-left: 1em;
    }
100 101 102 103 104 105 106 107
    progress {
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      top: 0;
      height: 5px;
    }
Yohan Boniface's avatar
Yohan Boniface committed
108
  </style>
109 110 111

  <script>
    this.on('mount', () => init())
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
112 113 114 115 116 117 118

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

121
</navbar>