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

test responsive

parent f0cf0eff
Branches
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
css/styleMenu.css
+ 38
− 3
View file @ f7a708d8
......@@ -131,12 +131,47 @@ body {
text-decoration: none;
}
/* La sidebar sur mobile */
@media (max-width: 991px) {
/* Par défaut, la sidebar est cachée */
.sidebar {
width: 0; /* Cache la sidebar par défaut sur mobile */
display: none; /* Cacher la sidebar */
}
.sidebar.collapse.show {
width: 250px; /* Définit la largeur de la sidebar ouverte sur mobile */
/* 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 */
}
}
/* Sur grand écran, afficher la sidebar normalement */
@media (min-width: 992px) {
.sidebar {
display: block;
width: 250px;
background-color: #00072D;
padding: 20px;
}
.main-content {
margin-left: 250px; /* Décalage pour la sidebar */
}
}
menu.jsp
+ 40
− 43
View file @ f7a708d8
......@@ -12,7 +12,6 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LilleConnect</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styleMenu.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
<link href="css/styleMenu2.css" rel="stylesheet">
......@@ -29,58 +28,58 @@
%>
<!-- Bouton hamburger visible sur mobile -->
<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">
<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">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 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>
<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() %>
<!-- 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>
<a href="LeaveFil?filId=<%= fil.getFid() %>" class="text-danger fs-3">
<a href="LogoutServlet" class="text-danger fs-3">
<i class="bi bi-box-arrow-right"></i>
</a>
</li>
</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>
<% } %>
</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 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>
</div>
<div class="main-content d-flex flex-column bg-image"
style="min-height: 100vh; background-image: url('images/login-bg.png'); background-size: cover; background-position: center;">
<%
......@@ -175,7 +174,5 @@ if(isAdmin){
}
};
</script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0-alpha1/js/bootstrap.min.js"></script>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment