dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

{NAVBAR} Rewrote

Browse source
This commit is contained in:
Damien Broqua 2024-06-19 10:36:41 +02:00
parent 4f707ece88
commit 6ee117b583
2 changed files with 113 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
sass/navbar.scss
View file

@ -103,7 +103,7 @@
.navbar-item {
line-height: 1.5;
padding: .5rem .75rem;
padding: .5rem;
position: relative;
flex-grow: 0;
flex-shrink: 0;
@ -126,7 +126,7 @@
box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none;
font-size: .875rem;
min-width: 100%;
min-width: 280px;
position: absolute;
top: 100%;
}
@ -263,12 +263,6 @@
margin: .5rem 0 0 1.5rem;
}
.navbar-item {
cursor: pointer;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
@include respond-to("medium-up") {
background-color: var(--default-color);
border-bottom-left-radius: 6px;
@ -286,11 +280,10 @@
margin: 0.5rem 0;
}
.navbar-item {
white-space: nowrap;
padding: .375rem 1rem;
padding-right: 3rem;
}
// .navbar-item {
// white-space: nowrap;
// padding-block: .375rem;
// }
}
}
@ -324,4 +317,10 @@
.navbar {
box-shadow: none;
}
}
nav {
ul {
padding-inline: 16px;
}
}

174
views/index.ejs
View file

@ -64,22 +64,18 @@
Ajouter un album
</span>
</a>
<a class="button is-secondary" href="/ajouter-a-ma-liste-de-souhaits" aria-label="Ajouter un album à ma liste de souhaits">
<i class="icon-plus"></i>
<span>
Liste de souhaits
</span>
</a>
</div>
</div>
</div>
<% } %>
<div class="navbar-end">
<a class="navbar-item" href="/nous-contacter">
Nous contacter
</a>
<div class="navbar-item has-dropdown">
<ul class="navbar-end">
<li class="navbar-item">
<a href="/nous-contacter">
Nous contacter
</a>
</li>
<li class="navbar-item has-dropdown">
<a class="navbar-link">
<i class="icon-adjust theme-system icon-theme hidden"></i>
<i class="icon-sun theme-light icon-theme hidden"></i>
@ -89,29 +85,35 @@
</span>
</a>
<div class="navbar-dropdown">
<button class="navbar-item theme" data-value="system">
<i class="icon-adjust"></i>
<span>
Système
</span>
</button>
<button class="navbar-item theme" data-value="light">
<i class="icon-sun"></i>
<span>
Clair
</span>
</button>
<button class="navbar-item theme" data-value="dark">
<i class="icon-moon"></i>
<span>
Sombre
</span>
</button>
</div>
</div>
<ul class="navbar-dropdown">
<li>
<button class="navbar-item theme" data-value="system">
<i class="icon-adjust"></i>
<span>
Système
</span>
</button>
</li>
<li>
<button class="navbar-item theme" data-value="light">
<i class="icon-sun"></i>
<span>
Clair
</span>
</button>
</li>
<li>
<button class="navbar-item theme" data-value="dark">
<i class="icon-moon"></i>
<span>
Sombre
</span>
</button>
</li>
</ul>
</li>
<% if ( user ) { %>
<div class="navbar-item has-dropdown">
<li class="navbar-item has-dropdown">
<a class="navbar-link">
<i class="icon-user"></i>
<span>
@ -119,54 +121,80 @@
</span>
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/mon-compte">
Mon compte
</a>
<hr />
<a class="navbar-item" href="/ma-collection">
Ma collection
</a>
<a class="navbar-item" href="/ma-liste-de-souhaits">
Ma liste de souhaits
</a>
<a class="navbar-item" href="/ma-collection/on-air">
On air
</a>
<a class="navbar-item" href="/ma-collection/statistiques">
Statistiques
</a>
<hr />
<a class="navbar-item" href="/ma-collection/exporter">
Exporter ma collection
</a>
<a class="navbar-item" href="/ma-collection/importer">
Importer une collection
</a>
<hr />
<a class="navbar-item" href="/ma-liste-de-souhaits/exporter">
Exporter ma liste de souhaits
</a>
<a class="navbar-item" href="/ma-liste-de-souhaits/importer">
Importer une liste de souhaits
</a>
<hr />
<a class="navbar-item is-danger" href="/se-deconnecter">
Déconnexion
</a>
</div>
</div>
<ul class="navbar-dropdown">
<li>
<a class="navbar-item" href="/mon-compte">
Mon compte
</a>
</li>
<li><hr /></li>
<li>
<a class="navbar-item" href="/ma-collection">Ma collection</a>
<ul>
<li>
<a class="navbar-item" href="/ma-collection/on-air">
On air
</a>
</li>
<li>
<a class="navbar-item" href="/ma-collection/statistiques">
Statistiques
</a>
</li>
<li>
<a class="navbar-item" href="/ma-collection/exporter">
Exporter
</a>
</li>
<li>
<a class="navbar-item" href="/ma-collection/importer">
Importer
</a>
</li>
</ul>
</li>
<li><hr /></li>
<li>
<a class="navbar-item" href="/ma-liste-de-souhaits">
Ma liste de souhaits
</a>
<ul>
<li>
<a class="navbar-item" href="/ajouter-a-ma-liste-de-souhaits">
Ajouter
</a>
</li>
<li>
<a class="navbar-item" href="/ma-liste-de-souhaits/exporter">
Exporter
</a>
</li>
<li>
<a class="navbar-item" href="/ma-liste-de-souhaits/importer">
Importer
</a>
</li>
</ul>
</li>
<li><hr /></li>
<li>
<a class="navbar-item is-danger" href="/se-deconnecter">
Déconnexion
</a>
</li>
</ul>
</li>
<% } %>
<% if ( !user ) { %>
<div class="navbar-item">
<li class="navbar-item">
<div class="buttons">
<a class="button is-primary" href="/connexion">
<strong>Connexion</strong>
</a>
</div>
</div>
</li>
<% } %>
</div>
</ul>
</div>
</nav>
</nav>