feat(DevWeb): Update hero style and navbar

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/forgotten-password.jsp

@@ -6,7 +6,7 @@
 <layout:base>
     <jsp:attribute name="title">CardRush - Mot de passe oublié</jsp:attribute>
     <jsp:body>
-        <div class="hero is-light is-fullheight-with-navbar">
+        <div class="hero is-light is-fullheight">
             <div class="hero-body">
                 <div class="container">
                     <div class="columns is-centered">

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/login.jsp

@@ -6,7 +6,7 @@
 <layout:base>
     <jsp:attribute name="title">Cards Rush - Connexion</jsp:attribute>
     <jsp:body>
-        <div class="hero is-primary is-fullheight-with-navbar">
+        <div class="hero is-primary is-fullheight">
             <div class="hero-body">
                 <div class="container">
                     <div class="columns is-centered">

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/main-menu.jsp

@@ -6,7 +6,7 @@
 <layout:base>
     <jsp:attribute name="title">Menu principal</jsp:attribute>
     <jsp:body>
-        <div class="hero is-primary is-fullheight-with-navbar">
+        <div class="hero is-primary is-fullheight">
             <div class="hero-body">
                 <div class="container">
                     <div class="columns is-centered">

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/register.jsp

@@ -6,7 +6,7 @@
 <layout:base>
   <jsp:attribute name="title">Cards Rush - Inscription</jsp:attribute>
   <jsp:body>
-    <div class="hero is-light is-fullheight-with-navbar">
+    <div class="hero is-light is-fullheight">
       <div class="hero-body">
         <div class="container">
           <div class="columns is-centered">

S2/DevWeb/Projet/src/main/webapp/WEB-INF/pages/reset-password.jsp

@@ -4,7 +4,7 @@
 <layout:base>
     <jsp:attribute name="title">Cards Rush - Récuperation mot de passe</jsp:attribute>
     <jsp:body>
-        <div class="hero is-light is-fullheight-with-navbar">
+        <div class="hero is-light is-fullheight">
             <div class="hero-body">
                 <div class="container">
                     <div class="columns is-centered">

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/components/navbar.tag

@@ -1,6 +1,7 @@
+<%@ tag import="uppa.project.database.pojo.User" %>
 <%@tag description="component/navbar" pageEncoding="UTF-8" %>
 
-<nav class="navbar" role="navigation" aria-label="main navigation">
+<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
     <div class="navbar-brand">
         <a class="navbar-item" href="${pageContext.request.contextPath}/">
             <img src="${pageContext.request.contextPath}/static/img/CardsRushLogoBlack.svg" height="260">
@@ -17,19 +18,44 @@
     <div id="navbarMenu" class="navbar-menu">
 
         <div class="navbar-end">
+            <%if (session.getAttribute("user") != null) {
+                User user = (User) session.getAttribute("user");
+            %>
             <div class="navbar-item">
-                <div class="buttons">
+                <a href="${pageContext.request.contextPath}/profile" class="is-fullwidth button is-light"><%= user.getUsername() %></a>
-
-                    <%if (session.getAttribute("user") != null) {%>
-<%--                    TODO: Profil de l'utilisateur--%>
-                        <a href="${pageContext.request.contextPath}/profile" class="button is-primary has-text-white"><strong>Profil</strong></a>
-                        <a href="${pageContext.request.contextPath}/logout" class="button is-danger is-light">Déconnexion</a>
-                    <% } else {%>
-                        <a href="${pageContext.request.contextPath}/register" class="button is-primary has-text-white"><strong>Inscription</strong></a>
-                        <a href="${pageContext.request.contextPath}/login" class="button is-light">Connexion</a>
-                    <% } %>
-                </div>
             </div>
+            <div class="navbar-item">
+                <a href="${pageContext.request.contextPath}/logout" class="is-fullwidth button is-light is-danger">Déconnexion</a>
+            </div>
+
+            <% } else {%>
+            <div class="navbar-item">
+                <a href="${pageContext.request.contextPath}/register" class="is-fullwidth button is-primary has-text-white">Inscription</a>
+            </div>
+            <div class="navbar-item">
+                <a href="${pageContext.request.contextPath}/login" class="is-fullwidth button is-light">Connexion</a>
+            </div>
+            <% } %>
         </div>
     </div>
-</nav>
+</nav>
+
+<script type="module" defer>
+    // Get all "navbar-burger" elements
+    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+    // Add a click event on each of them
+    $navbarBurgers.forEach(el => {
+        el.addEventListener('click', () => {
+
+            // Get the target from the "data-target" attribute
+            const target = el.dataset.target;
+            const $target = document.getElementById(target);
+
+            // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+            el.classList.toggle('is-active');
+            $target.classList.toggle('is-active');
+
+        });
+    });
+</script>

S2/DevWeb/Projet/src/main/webapp/WEB-INF/tags/layouts/base.tag

@@ -20,6 +20,10 @@
             --bulma-primary-s: 70%;
             --bulma-primary-l: 35%;
         }
+
+        .hero {
+            background: url("${pageContext.request.contextPath}/static/img/Home.svg") lightgray 50% / cover no-repeat;
+        }
     </style>
 
     <jsp:invoke fragment="head"/>