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

Lucas Détré's avatar
Lucas Détré committed
4
    <!-- Horizontal navbar -->
5 6 7 8 9 10 11
    <div class="horizontal-nav bg-light" id="sidebar">

      <ul class="nav bg-light mb-0">
        <li class="nav-item bg-light">          
        </li>
      </ul>
    </div>
Lucas Détré's avatar
Lucas Détré committed
12
    <!-- End horizontal navbar -->
13

Lucas Détré's avatar
Lucas Détré committed
14
    <!-- Vertical navbar -->
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
15 16
    <div class="vertical-nav bg-light" id="sidebar">
      <ul class="nav flex-column bg-light mb-0">
17
        <li class="nav-item bg-light">
18
          <a href="." id="nav-title" class="nav-link text-dark"></a>
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
19 20
        </li>
        <li class="nav-item">
21 22 23 24
          <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
25 26
        </li>
        <li class="nav-item">
27 28 29 30
          <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
31 32
        </li>
        <li class="nav-item">
33 34 35 36
          <a href="#financements" class="{selected: window.location.hash.startsWith('#financements')} nav-link text-dark 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
37 38
        </li>
        <li class="nav-item">
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
        </li>
        <li class="nav-item">
45 46 47 48
          <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
49 50
        </li>
        <li class="nav-item">
51 52 53 54
          <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
55 56 57 58
        </li>
      </ul>
    </div>
    <!-- End vertical navbar -->
Yohan Boniface's avatar
Yohan Boniface committed
59

Yohan Boniface's avatar
Yohan Boniface committed
60
  <style scoped>
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
61

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

  <script>
    this.on('mount', () => init())
Jean-Yves Stervinou's avatar
Jean-Yves Stervinou committed
95 96 97 98 99 100 101

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

104
</navbar>