dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 10 Pull Requests Releases 14 Activity

Updated navbar size

This commit is contained in:
Damien Broqua 2023-12-15 08:29:55 +01:00
parent 77de7d54ca
commit 209ba0f5f0
2 changed files with 82 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
sass/navbar.scss
View File

@ -1,5 +1,5 @@
.navbar { .navbar {
min-height: 3.25rem; min-height: 3.5rem;
background-color: var(--navbar-color); background-color: var(--navbar-color);
box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px; box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px;
color: rgba(0,0,0,.7); color: rgba(0,0,0,.7);
@ -11,11 +11,15 @@
@include transition() {} @include transition() {}
@include respond-to("medium-up") { @include respond-to("medium-up") {
min-height: 3.25rem;
align-items: stretch; align-items: stretch;
display: flex; display: flex;
} }
&.container {
max-width: 1330px;
margin: 0 auto;
}
.navbar-brand { .navbar-brand {
align-items: stretch; align-items: stretch;
display: flex; display: flex;

150
views/index.ejs
View File

@ -35,89 +35,91 @@
<% } %> <% } %>
</head> </head>
<body> <body>
<nav class="navbar" aria-label="Navigation principale"> <nav class="navbar">
<div class="navbar-brand"> <nav class="navbar container" aria-label="Navigation principale">
<a class="navbar-item" href="/"> <div class="navbar-brand">
<img src="/img/logo.png" alt="Logo MusicTopus"> <a class="navbar-item" href="/">
<span>MusicTopus</span> <img src="/img/logo.png" alt="Logo MusicTopus">
</a> <span>MusicTopus</span>
<a role="button" class="navbar-burger" aria-label="Afficher le menu" aria-expanded="false" data-target="navbar">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbar" class="navbar-menu">
<% if ( user ) { %>
<div class="navbar-start">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary" href="/ajouter-un-album">
<i class="icon-plus"></i>
<span>
Ajouter un album
</span>
</a>
</div>
</div>
</div>
<% } %>
<div class="navbar-end">
<a class="navbar-item" href="/nous-contacter">
Nous contacter
</a> </a>
<% if ( user ) { %>
<div class="navbar-item has-dropdown">
<a class="navbar-link">
<i class="icon-user"></i>
<span>
<%= user.username %>
</span>
</a>
<div class="navbar-dropdown"> <a role="button" class="navbar-burger" aria-label="Afficher le menu" aria-expanded="false" data-target="navbar">
<a class="navbar-item" href="/mon-compte"> <span aria-hidden="true"></span>
Mon compte <span aria-hidden="true"></span>
</a> <span aria-hidden="true"></span>
<hr /> </a>
<a class="navbar-item" href="/ma-collection"> </div>
Ma collection
</a> <div id="navbar" class="navbar-menu">
<a class="navbar-item" href="/ma-collection/exporter"> <% if ( user ) { %>
Exporter ma collection <div class="navbar-start">
</a> <div class="navbar-item">
<a class="navbar-item" href="/ma-collection/importer"> <div class="buttons">
Importer une collection <a class="button is-primary" href="/ajouter-un-album">
</a> <i class="icon-plus"></i>
<span>
Ajouter un album
</span>
</a>
</div>
</div> </div>
</div> </div>
<% } %> <% } %>
<div class="navbar-item apparence">
<div class="theme-switch-wrapper"> <div class="navbar-end">
<label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement"> <a class="navbar-item" href="/nous-contacter">
<input type="checkbox" id="checkbox" /> Nous contacter
<div class="slider round"></div> </a>
</label> <% if ( user ) { %>
<div class="navbar-item has-dropdown">
<a class="navbar-link">
<i class="icon-user"></i>
<span>
<%= user.username %>
</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-collection/exporter">
Exporter ma collection
</a>
<a class="navbar-item" href="/ma-collection/importer">
Importer une collection
</a>
</div>
</div> </div>
</div> <% } %>
<div class="navbar-item"> <div class="navbar-item apparence">
<div class="buttons"> <div class="theme-switch-wrapper">
<% if ( !user ) { %> <label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement">
<a class="button is-primary" href="/connexion"> <input type="checkbox" id="checkbox" />
<strong>Connexion</strong> <div class="slider round"></div>
</a> </label>
<% } else { %> </div>
<a class="button is-danger" href="/se-deconnecter"> </div>
Déconnexion <div class="navbar-item">
</a> <div class="buttons">
<% } %> <% if ( !user ) { %>
<a class="button is-primary" href="/connexion">
<strong>Connexion</strong>
</a>
<% } else { %>
<a class="button is-danger" href="/se-deconnecter">
Déconnexion
</a>
<% } %>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </nav>
</nav> </nav>
<div id="toastr"> <div id="toastr">