From c4c76a55e62f454400b3465371aa7c7783483363 Mon Sep 17 00:00:00 2001
From: "ms@Nicro" <ms@Nicro>
Date: Thu, 28 Dec 2023 13:40:24 +0100
Subject: [PATCH] Created the navbar

TODO: waiting for all pages to be completed for optimal redirect and selected icons
---
 src/main/webapp/CSS/navbar.css              | 23 +++++++++
 src/main/webapp/JS/navbar.js                | 56 +++++++++++++++++++++
 src/main/webapp/JSP/navbar.jsp              | 28 +++++++++++
 src/main/webapp/images/calendar.svg         |  1 +
 src/main/webapp/images/calendarSelected.svg |  1 +
 src/main/webapp/images/home.svg             |  1 +
 src/main/webapp/images/homeSelected.svg     |  1 +
 src/main/webapp/images/message.svg          |  1 +
 src/main/webapp/images/messageSelected.svg  |  1 +
 src/main/webapp/images/profile.svg          |  1 +
 src/main/webapp/images/profileSelected.svg  |  1 +
 11 files changed, 115 insertions(+)
 create mode 100644 src/main/webapp/CSS/navbar.css
 create mode 100644 src/main/webapp/JS/navbar.js
 create mode 100644 src/main/webapp/JSP/navbar.jsp
 create mode 100644 src/main/webapp/images/calendar.svg
 create mode 100644 src/main/webapp/images/calendarSelected.svg
 create mode 100644 src/main/webapp/images/home.svg
 create mode 100644 src/main/webapp/images/homeSelected.svg
 create mode 100644 src/main/webapp/images/message.svg
 create mode 100644 src/main/webapp/images/messageSelected.svg
 create mode 100644 src/main/webapp/images/profile.svg
 create mode 100644 src/main/webapp/images/profileSelected.svg

diff --git a/src/main/webapp/CSS/navbar.css b/src/main/webapp/CSS/navbar.css
new file mode 100644
index 0000000..d947bb2
--- /dev/null
+++ b/src/main/webapp/CSS/navbar.css
@@ -0,0 +1,23 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    width: 100%;
+}
+
+#navbarDiv{
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.divButtons{
+    display: flex;
+    justify-content: center;
+    width: 25%;
+    height: 10%;
+}
\ No newline at end of file
diff --git a/src/main/webapp/JS/navbar.js b/src/main/webapp/JS/navbar.js
new file mode 100644
index 0000000..1c32a6c
--- /dev/null
+++ b/src/main/webapp/JS/navbar.js
@@ -0,0 +1,56 @@
+const homeIcon = $("#homeIcon")
+const homeIconS = $("#homeIconSelected")
+const messageIcon = $("#messageIcon")
+const messageIconS = $("#messageIconSelected")
+const calendarIcon = $("#calendarIcon")
+const calendarIconS = $("#calendarIconSelected")
+const profileIcon = $("#profileIcon")
+const profileIconS = $("#profileIconSelected")
+
+const page =  window.location.pathname.split('/').pop()
+const homePages = [] //TODO: Mettere le pagine da considerare "Home"
+const messagePages = [] //TODO: Mettere le pagine da considerare "Message"
+const calendarPages = [] //TODO: Mettere le pagine da considerare "Calendar"
+const profilePages = [] //TODO: Mettere le pagine da considerare "Profile"
+
+$("document").ready(()=>{
+    hideSelectedIcons();
+    showRightIcons();
+    manageOnClick();
+})
+
+function hideSelectedIcons(){
+    homeIconS.hide()
+    messageIconS.hide()
+    calendarIconS.hide()
+    profileIconS.hide()
+}
+
+function showRightIcons(){
+    if (homePages.includes(page)){
+        homeIcon.hide();
+        homeIconS.show();
+    }else if (messagePages.includes(page)){
+        messageIcon.hide();
+        messageIconS.show();
+    }else if (calendarPages.includes(page)){
+        calendarIcon.hide();
+        calendarIconS.show();
+    }else if (profilePages.includes(page)){
+        profileIcon.hide();
+        profileIconS.show();
+    }else{
+        $("#navbarDiv").hide();
+    }
+}
+
+function manageOnClick(){
+    $("#home").click(() => redirect("home.jsp")); //TODO: METTERE I GIUSTI REDIRECT
+    $("#message").click(() => redirect("message.jsp")); //TODO: METTERE I GIUSTI REDIRECT
+    $("#calendar").click(() => redirect("calendar.jsp")); //TODO: METTERE I GIUSTI REDIRECT
+    $("#profile").click(() => redirect("profile.jsp")); //TODO: METTERE I GIUSTI REDIRECT
+}
+
+function redirect(where){
+    window.location.href = where
+}
\ No newline at end of file
diff --git a/src/main/webapp/JSP/navbar.jsp b/src/main/webapp/JSP/navbar.jsp
new file mode 100644
index 0000000..997958e
--- /dev/null
+++ b/src/main/webapp/JSP/navbar.jsp
@@ -0,0 +1,28 @@
+<html lang="it">
+<head>
+    <title>navbar</title>
+</head>
+<body>
+    <div id="navbarDiv" >
+        <div id="home" class="divButtons">
+            <img id="homeIcon" src="../images/home.svg" alt="homeIcon">
+            <img id="homeIconSelected" src="../images/homeSelected.svg" alt="homeIconSelected">
+        </div>
+        <div id="message" class="divButtons">
+            <img id="messageIcon" src="../images/message.svg" alt="messageIcon">
+            <img id="messageIconSelected" src="../images/messageSelected.svg" alt="messageIconSelected">
+        </div>
+        <div id="calendar" class="divButtons">
+            <img id="calendarIcon" src="../images/calendar.svg" alt="calendarIcon">
+            <img id="calendarIconSelected" src="../images/calendarSelected.svg" alt="calendarIconSelected">
+        </div>
+        <div id="profile" class="divButtons">
+            <img id="profileIcon" src="../images/profile.svg" alt="profileIcon">
+            <img id="profileIconSelected" src="../images/profileSelected.svg" alt="profileIconSelected">
+        </div>
+    </div>
+</body>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous"></script>
+<script src="../JS/navbar.js"></script>
+<link rel="stylesheet" href="../CSS/navbar.css">
+</html>
diff --git a/src/main/webapp/images/calendar.svg b/src/main/webapp/images/calendar.svg
new file mode 100644
index 0000000..55669ea
--- /dev/null
+++ b/src/main/webapp/images/calendar.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path opacity="1" fill="#1E3050" d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/></svg>
\ No newline at end of file
diff --git a/src/main/webapp/images/calendarSelected.svg b/src/main/webapp/images/calendarSelected.svg
new file mode 100644
index 0000000..0183db5
--- /dev/null
+++ b/src/main/webapp/images/calendarSelected.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path opacity="1" fill="#199a8e" d="M128 0c17.7 0 32 14.3 32 32V64H288V32c0-17.7 14.3-32 32-32s32 14.3 32 32V64h48c26.5 0 48 21.5 48 48v48H0V112C0 85.5 21.5 64 48 64H96V32c0-17.7 14.3-32 32-32zM0 192H448V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V192zm64 80v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm128 0v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H208c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V272c0-8.8-7.2-16-16-16H336zM64 400v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H80c-8.8 0-16 7.2-16 16zm144-16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H208zm112 16v32c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16V400c0-8.8-7.2-16-16-16H336c-8.8 0-16 7.2-16 16z"/></svg>
\ No newline at end of file
diff --git a/src/main/webapp/images/home.svg b/src/main/webapp/images/home.svg
new file mode 100644
index 0000000..066f14d
--- /dev/null
+++ b/src/main/webapp/images/home.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path opacity="1" fill="#1E3050" d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>
\ No newline at end of file
diff --git a/src/main/webapp/images/homeSelected.svg b/src/main/webapp/images/homeSelected.svg
new file mode 100644
index 0000000..9bbf605
--- /dev/null
+++ b/src/main/webapp/images/homeSelected.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path opacity="1" fill="#199a8e" d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>
\ No newline at end of file
diff --git a/src/main/webapp/images/message.svg b/src/main/webapp/images/message.svg
new file mode 100644
index 0000000..129e1cd
--- /dev/null
+++ b/src/main/webapp/images/message.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path opacity="1" fill="#1E3050" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
\ No newline at end of file
diff --git a/src/main/webapp/images/messageSelected.svg b/src/main/webapp/images/messageSelected.svg
new file mode 100644
index 0000000..f2142c2
--- /dev/null
+++ b/src/main/webapp/images/messageSelected.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path opacity="1" fill="#199a8e" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>
\ No newline at end of file
diff --git a/src/main/webapp/images/profile.svg b/src/main/webapp/images/profile.svg
new file mode 100644
index 0000000..f0220ee
--- /dev/null
+++ b/src/main/webapp/images/profile.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path opacity="1" fill="#1E3050" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
\ No newline at end of file
diff --git a/src/main/webapp/images/profileSelected.svg b/src/main/webapp/images/profileSelected.svg
new file mode 100644
index 0000000..6c9ab13
--- /dev/null
+++ b/src/main/webapp/images/profileSelected.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path opacity="1" fill="#199a8e" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>
\ No newline at end of file