Commit c7efe9f1 authored by Lucas Détré's avatar Lucas Détré

adding a top-side horizontal menu to the side-menu

parent 48ae921e
......@@ -231,6 +231,19 @@ dl:nth-child(even) {
/* Navbar stylesheet */
.horizontal-nav {
min-width: 100%;
width: 100%;
height: 5rem;
min-height: 5rem;
position: fixed;
top: 0;
left: 0;
transition: all 0.4s;
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
z-index: 0;
}
.vertical-nav {
min-width: 14rem;
width: 14rem;
......@@ -243,16 +256,24 @@ dl:nth-child(even) {
}
#nav-title {
font-size: 1em;
font-size: 3em;
margin-bottom:1rem;
margin-top:1rem;
margin-top:.5rem;
padding: .3rem 3rem;
}
.nav-link {
.vertical-nav .nav-link {
min-width : 14rem;
width: 14rem;
font-size: 16px;
padding: .5rem 3rem;
padding: 1rem 3rem;
}
.horizontal-nav .nav-link {
min-width : 1rem;
width: 5rem;
font-size: 16px;
padding: .5rem 1rem;
}
.nav-icon {
......@@ -265,6 +286,7 @@ dl:nth-child(even) {
.page-content {
width: calc(100% - 15rem);
margin-left: 15rem;
margin-top: 3rem;
transition: all 0.4s;
}
......
<navbar>
<progress style="display: none" id="progress" />
<!-- Horizontal navbar -->
<div class="horizontal-nav bg-light" id="sidebar">
<ul class="nav bg-light mb-0">
<li class="nav-item bg-light">
</li>
<li class="nav-item bg-light">
</li>
<li class="nav-item bg-light">
</li>
<li class="nav-item bg-light">
</li>
<li class="nav-item bg-light">
</li>
<li class="nav-item bg-light">
</li>
</ul>
</div>
<!-- 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">
<h1>
<a href="." id="nav-title" class="nav-link text-dark"></a>
</h1>
<a href="." id="nav-title" class="nav-link text-dark"></a>
</li>
<li class="nav-item">
<h4>
<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>
</h4>
<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>
</li>
<li class="nav-item">
<h4>
<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>
</h4>
<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>
</li>
<li class="nav-item">
<h4>
<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>
</h4>
<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>
</li>
<li class="nav-item">
<h4>
<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>