Skip to content
Snippets Groups Projects
Commit ebd40ee5 authored by Giorgio Utzeri's avatar Giorgio Utzeri
Browse files

test responsive

parent f7a708d8
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
css/styleMenu.css
+ 14
− 38
View file @ ebd40ee5
...@@ -131,47 +131,23 @@ body { ...@@ -131,47 +131,23 @@ body {
text-decoration: none; text-decoration: none;
} }
/* La sidebar sur mobile */ /* Pour la sidebar, en mode mobile (quand elle est ouverte) */
@media (max-width: 991px) { #sidebar {
/* Par défaut, la sidebar est cachée */ position: absolute;
.sidebar { top: 0;
display: none; /* Cacher la sidebar */ left: 0;
} right: 0;
bottom: 0;
/* Quand la sidebar est affichée, c'est-à-dire quand le menu est ouvert */ background-color: #00072D;
.navbar-collapse.show { z-index: 1050; /* Assure que la sidebar sera au-dessus du contenu */
display: block; padding-top: 50px; /* Pour laisser de l'espace sous le bouton hamburger */
} box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
/* Optionnel : styliser la navbar mobile */
.navbar-collapse {
background-color: #00072D;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 100vw;
z-index: 1050;
padding: 20px;
transition: all 0.3s ease-in-out;
}
/* Masquer le reste du contenu lorsque la navbar est ouverte */
.main-content {
display: none; /* Cacher les messages et autres éléments */
}
} }
/* Sur grand écran, afficher la sidebar normalement */ /* Pour ajuster la marge de la sidebar quand elle est affichée en mode mobile */
@media (min-width: 992px) { @media (max-width: 991px) {
.sidebar { .sidebar {
display: block;
width: 250px; width: 250px;
background-color: #00072D; height: 100%;
padding: 20px;
}
.main-content {
margin-left: 250px; /* Décalage pour la sidebar */
} }
} }
menu.jsp
+ 38
− 40
View file @ ebd40ee5
...@@ -28,55 +28,53 @@ ...@@ -28,55 +28,53 @@
%> %>
<!-- Bouton hamburger visible sur mobile --> <!-- Bouton hamburger visible sur mobile -->
<button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar" aria-controls="sidebar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<!-- Navbar mobile (visible quand on clique sur le hamburger) --> <!-- Sidebar (visible sur PC et cachée sur mobile) -->
<div class="collapse navbar-collapse d-lg-none" id="navbarMenu"> <div class="sidebar collapse d-lg-block col-12 col-md-3" id="sidebar">
<div class="sidebar"> <div class="d-flex align-items-center justify-content-between w-100">
<div class="d-flex align-items-center justify-content-between w-100"> <a href="UserInfo" class="d-flex align-items-center gap-3 fs-4 text-decoration-none text-light">
<a href="UserInfo" class="d-flex align-items-center gap-3 fs-4 text-decoration-none text-light"> <i class="bi bi-person"></i>
<i class="bi bi-person"></i> <span><%= utilisateur.getPrenom() + " " + utilisateur.getNom() %></span>
<span><%= utilisateur.getPrenom() + " " + utilisateur.getNom() %></span> </a>
</a>
<a href="LogoutServlet" class="text-danger fs-3"> <a href="LogoutServlet" class="text-danger fs-3">
<i class="bi bi-box-arrow-right"></i> <i class="bi bi-box-arrow-right"></i>
</a> </a>
</div> </div>
<div class="border-top border-3 border-primary my-4"></div> <div class="border-top border-3 border-primary my-4"></div>
<h3>Vos fils de discussion</h3> <h3>Vos fils de discussion</h3>
<div class="separator"></div> <div class="separator"></div>
<% if (isUserInFil) { %> <% if (isUserInFil) { %>
<ul class="list-group"> <ul class="list-group">
<% for (Fil fil : fils) { %> <% for (Fil fil : fils) { %>
<li class="list-group-item d-flex justify-content-center align-items-center text-white border-0" style="background-color: #00072D;"> <li class="list-group-item d-flex justify-content-center align-items-center text-white border-0" style="background-color: #00072D;">
<a href="Menu?filId=<%= fil.getFid() %>" class="gap-2 px-5 py-2"> <a href="Menu?filId=<%= fil.getFid() %>" class="gap-2 px-5 py-2">
<%= fil.getTitre() %> <%= fil.getTitre() %>
</a> </a>
<a href="LeaveFil?filId=<%= fil.getFid() %>" class="text-danger fs-3"> <a href="LeaveFil?filId=<%= fil.getFid() %>" class="text-danger fs-3">
<i class="bi bi-box-arrow-right"></i> <i class="bi bi-box-arrow-right"></i>
</a> </a>
</li> </li>
<% } %>
</ul>
<% } else { %>
<p>Aucun fil de discussion trouvé.</p>
<% } %> <% } %>
</ul>
<% } else { %>
<p>Aucun fil de discussion trouvé.</p>
<% } %>
<div class="separator"></div> <div class="separator"></div>
<div class="mt-3 text-center"> <div class="mt-3 text-center">
<a href="creerFil.html" class="btn btn-primary d-flex align-items-center gap-2 px-4 py-2"> <a href="creerFil.html" class="btn btn-primary d-flex align-items-center gap-2 px-4 py-2">
<span class="d-inline-flex justify-content-center align-items-center border border-light rounded" style="width: 24px; height: 24px;"> <span class="d-inline-flex justify-content-center align-items-center border border-light rounded" style="width: 24px; height: 24px;">
<i class="bi bi-plus-lg"></i> <i class="bi bi-plus-lg"></i>
</span> </span>
Ajouter un fil Ajouter un fil
</a> </a>
</div>
</div> </div>
</div> </div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment