Merge branch 'main' of https://gitlab.univ-nantes.fr/E228313R/projet-web

public/connexion.html

@@ -7,10 +7,13 @@
     <!-- Mustache JS -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js" async></script>
     <!-- Main JS -->
-    <script src="./js/connexion.js" defer></script>
+    <script src="./js/main.js" defer></script>
+    <!-- Bootstrap JS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
+          crossorigin="anonymous">
     <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
-          integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
+            crossorigin="anonymous"></script>
     <!-- Style CSS -->
     <link rel="stylesheet" href="./css/style.css">
 </head>

public/css/style.css

@@ -2,9 +2,23 @@
     max-height: 80vh;
 }
 
+.navbar .nav-item .dropdown-menu {
+    display: none;
+}
+
+.navbar .nav-item:hover .nav-link {
+}
+
+.navbar .nav-item:hover .dropdown-menu {
+    display: block;
+}
+
+.navbar .nav-item .dropdown-menu {
+    margin-top: 0;
+}
+
 .categorie {
     margin: 1em;
-    width: 85%;
 }
 
 .categorie > h1 {
@@ -74,12 +88,7 @@
     margin-bottom: 0.5em;
 }
 
-.navbar-toggler {
-    margin-left: 1em;
-}
-
 .rounded-circle {
-    margin-right: 1em;
     height: 50px;
     width: 50px;
 }
@@ -137,4 +146,8 @@ footer {
 
 .navbar-collapse ul {
     margin-left: 1em;
+}
+
+.navbar-brand {
+    margin-left: 0;
 }
\ No newline at end of file

public/index.html

@@ -8,9 +8,12 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js" async></script>
     <!-- Main JS -->
     <script src="./js/main.js" defer></script>
+    <!-- Bootstrap JS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
+          crossorigin="anonymous">
     <!-- Bootstrap CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
-          integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
+            crossorigin="anonymous"></script>
     <!-- Style CSS -->
     <link rel="stylesheet" href="./css/style.css">
 </head>

public/js/connexion.js

@@ -15,20 +15,9 @@ async function render() {
             const rendered = Mustache.render(template, context, partials);
             let body = document.querySelector('body');
             body.innerHTML = rendered;
-            navbarListener();
         });
 }
 
-function navbarListener() {
-    document.querySelector('button').addEventListener('click', () => {
-        let nav = document.querySelector('#navbarSupportedContent');
-        if (nav.style.display === 'block')
-            nav.style.display = 'none';
-        else
-            nav.style.display = 'block';
-    });
-}
-
 window.onload = () => {
     render().then(() => console.log('Rendered'));
 };
\ No newline at end of file

public/js/main.js

@@ -32,22 +32,10 @@ async function render() {
             const rendered = Mustache.render(template, context, partials);
             let body = document.querySelector('body');
             body.innerHTML = rendered;
-
-            navbarListener();
             produitListener();
         });
 }
 
-function navbarListener() {
-    document.querySelector('button').addEventListener('click', () => {
-        let nav = document.querySelector('#navbarSupportedContent');
-        if (nav.style.display === 'block')
-            nav.style.display = 'none';
-        else
-            nav.style.display = 'block';
-    });
-}
-
 function produitListener() {
     document.querySelectorAll('.produit').forEach((produit) => {
         produitInfoListener(produit);

public/templates/header.mustache

-<nav class="navbar navbar-dark bg-dark">
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
-            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="titre">
-        <h1>Poly</h1>
-        <h1>Gestion</h1>
-    </div>
-    <img src="../images/profil.jpg" alt="Photo de profil" class="rounded-circle">
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav mr-auto">
-            <li class="nav-item active">
-                <a class="nav-link" href="../connexion.html">Accueil</a>
-            </li>
-            <li class="nav-item">
-                <a class="nav-link" href="/logout">Se déconnecter</a>
-            </li>
-        </ul>
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <div class="container-fluid">
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav"
+                aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <a class="navbar-brand" href="#">
+            <div class="titre">
+                <h1>Poly</h1>
+                <h1>Gestion</h1>
+            </div>
+        </a>
+        <img src="../images/profil.jpg" alt="Photo de profil" class="rounded-circle">
+        <div class="collapse navbar-collapse" id="main_nav">
+            <ul class="navbar-nav">
+                <li class="nav-item active">
+                    <a class="nav-link" href="/">Accueil</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="/logout">Se déconnecter</a>
+                </li>
+            </ul>
+        </div>
     </div>
 </nav>
\ No newline at end of file