Created the navbar

TODO: waiting for all pages to be completed for optimal redirect and selected icons
pastore99 · Dec 28, 2023 · c4c76a5 · c4c76a5
1 parent 91666e1
commit c4c76a5
Show file tree

Hide file tree

Showing 11 changed files with 115 additions and 0 deletions.
diff --git a/src/main/webapp/CSS/navbar.css 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%;
+}
diff --git a/src/main/webapp/JS/navbar.js 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
+}
diff --git a/src/main/webapp/JSP/navbar.jsp 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
diff --git a/src/main/webapp/images/calendarSelected.svg b/src/main/webapp/images/calendarSelected.svg
diff --git a/src/main/webapp/images/home.svg b/src/main/webapp/images/home.svg
diff --git a/src/main/webapp/images/homeSelected.svg b/src/main/webapp/images/homeSelected.svg
diff --git a/src/main/webapp/images/message.svg b/src/main/webapp/images/message.svg
diff --git a/src/main/webapp/images/messageSelected.svg b/src/main/webapp/images/messageSelected.svg
diff --git a/src/main/webapp/images/profile.svg b/src/main/webapp/images/profile.svg
diff --git a/src/main/webapp/images/profileSelected.svg b/src/main/webapp/images/profileSelected.svg