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

test responsive

parent f7a708d8
Branches
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 {
text-decoration: none;
}
/* La sidebar sur mobile */
@media (max-width: 991px) {
/* Par défaut, la sidebar est cachée */
.sidebar {
display: none; /* Cacher la sidebar */
}
/* Quand la sidebar est affichée, c'est-à-dire quand le menu est ouvert */
.navbar-collapse.show {
display: block;
}
/* 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 */
}
/* Pour la sidebar, en mode mobile (quand elle est ouverte) */
#sidebar {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #00072D;
z-index: 1050; /* Assure que la sidebar sera au-dessus du contenu */
padding-top: 50px; /* Pour laisser de l'espace sous le bouton hamburger */
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
}
/* Sur grand écran, afficher la sidebar normalement */
@media (min-width: 992px) {
/* Pour ajuster la marge de la sidebar quand elle est affichée en mode mobile */
@media (max-width: 991px) {
.sidebar {
display: block;
width: 250px;
background-color: #00072D;
padding: 20px;
}
.main-content {
margin-left: 250px; /* Décalage pour la sidebar */
height: 100%;
}
}
menu.jsp
+ 38
− 40
View file @ ebd40ee5
......@@ -28,55 +28,53 @@
%>
<!-- 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>
</button>
<!-- Navbar mobile (visible quand on clique sur le hamburger) -->
<div class="collapse navbar-collapse d-lg-none" id="navbarMenu">
<div class="sidebar">
<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">
<i class="bi bi-person"></i>
<span><%= utilisateur.getPrenom() + " " + utilisateur.getNom() %></span>
</a>
<!-- Sidebar (visible sur PC et cachée sur mobile) -->
<div class="sidebar collapse d-lg-block col-12 col-md-3" id="sidebar">
<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">
<i class="bi bi-person"></i>
<span><%= utilisateur.getPrenom() + " " + utilisateur.getNom() %></span>
</a>
<a href="LogoutServlet" class="text-danger fs-3">
<i class="bi bi-box-arrow-right"></i>
</a>
</div>
<a href="LogoutServlet" class="text-danger fs-3">
<i class="bi bi-box-arrow-right"></i>
</a>
</div>
<div class="border-top border-3 border-primary my-4"></div>
<h3>Vos fils de discussion</h3>
<div class="separator"></div>
<div class="border-top border-3 border-primary my-4"></div>
<h3>Vos fils de discussion</h3>
<div class="separator"></div>
<% if (isUserInFil) { %>
<ul class="list-group">
<% 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;">
<a href="Menu?filId=<%= fil.getFid() %>" class="gap-2 px-5 py-2">
<%= fil.getTitre() %>
</a>
<a href="LeaveFil?filId=<%= fil.getFid() %>" class="text-danger fs-3">
<i class="bi bi-box-arrow-right"></i>
</a>
</li>
<% } %>
</ul>
<% } else { %>
<p>Aucun fil de discussion trouvé.</p>
<% if (isUserInFil) { %>
<ul class="list-group">
<% 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;">
<a href="Menu?filId=<%= fil.getFid() %>" class="gap-2 px-5 py-2">
<%= fil.getTitre() %>
</a>
<a href="LeaveFil?filId=<%= fil.getFid() %>" class="text-danger fs-3">
<i class="bi bi-box-arrow-right"></i>
</a>
</li>
<% } %>
</ul>
<% } else { %>
<p>Aucun fil de discussion trouvé.</p>
<% } %>
<div class="separator"></div>
<div class="separator"></div>
<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">
<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>
</span>
Ajouter un fil
</a>
</div>
<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">
<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>
</span>
Ajouter un fil
</a>
</div>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment