basic vertical navigation pannel created as a layout

69a85b91 · Harrison Davies · 5dc7c327 · 69a85b91 · 69a85b91 · 69a85b91
Commit 69a85b91 authored 9 months ago by Harrison Davies
--- a/build.gradle
+++ b/build.gradle
@@ -32,6 +32,7 @@ dependencies {
 	testImplementation 'org.springframework.boot:spring-boot-starter-test'
 	testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
 	implementation 'org.springframework.boot:spring-boot-starter-validation'
+	implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect:3.0.0'
 }

 tasks.named('test') {

--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
 spring.application.name=polish-community
+
+# Set prefix and suffix for Thymeleaf templates
+spring.thymeleaf.prefix=classpath:/templates/
+spring.thymeleaf.suffix=.html
+spring.thymeleaf.mode=HTML
+spring.thymeleaf.layout-dialect.enabled=true
--- a/src/main/resources/static/assests/sideBar/aboutUs.png
+++ b/src/main/resources/static/assests/sideBar/aboutUs.png
--- a/src/main/resources/static/assests/sideBar/blogs.png
+++ b/src/main/resources/static/assests/sideBar/blogs.png
--- a/src/main/resources/static/assests/sideBar/book-content-regular-24.png
+++ b/src/main/resources/static/assests/sideBar/book-content-regular-24.png
--- a/src/main/resources/static/assests/sideBar/events.png
+++ b/src/main/resources/static/assests/sideBar/events.png
--- a/src/main/resources/static/assests/sideBar/home.png
+++ b/src/main/resources/static/assests/sideBar/home.png
--- a/src/main/resources/static/assests/sideBar/info.png
+++ b/src/main/resources/static/assests/sideBar/info.png
--- a/src/main/resources/static/assests/sideBar/news.png
+++ b/src/main/resources/static/assests/sideBar/news.png
--- a/src/main/resources/static/assests/sideBar/userProfile.png
+++ b/src/main/resources/static/assests/sideBar/userProfile.png
--- a/src/main/resources/static/css/layout/layout.css
+++ b/src/main/resources/static/css/layout/layout.css
+.sidebar {
+    font-family: Arial, sans-serif;
+    position: fixed;
+    left: 0;
+    top: 50%; 
+    transform: translateY(-50%); /* combined with the top it centers the nav bar*/
+    background-color: #EE4C7C;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    border-radius: 0 10px 10px 0; /* round only the right corners */
+    width: 20px;
+}
+
+.sidebar .navLink {
+    padding: 10px;
+    color: #E3E2DF;
+    text-decoration: none;
+    
+}
+
+.sidebar:hover {
+    width: 150px; 
+}
+
+.sidebar .navLink:hover {
+    background-color: #9A1750;
+    border-radius: 10px;
+    opacity: 1;
+}
+
+/* for showing text when the sidebar is hovered */
+.sidebar:hover .navText {
+    display: inline-block; 
+    opacity: 1; 
+}
+
+
+.navIcons {
+    width: 25px; 
+    height: 25px; 
+    margin-right: 10px;
+    vertical-align: middle; 
+    
+}
+
+.navText {
+    display: none; 
+    opacity: 0; /* for hiding text */
+    margin-left: 10px; /* for space between the icon and the text */
+}
+
+.mainContent {
+    padding-left: 80px; 
+}
--- a/src/main/resources/templates/home/home.html
+++ b/src/main/resources/templates/home/home.html
 <!DOCTYPE html>
-<html lang="en">
+<html xmlns:th="http://www.thymeleaf.org"
+xmlns:layout="https://ultraq.net.nz/thymeleaf/layout"
+    layout:decorate="~{layout/layout}"> 
+<head>
+    <meta charset="UTF-8">
+    <title>HOME</title>
    <head>
        <meta charset="UTF-8">
        <title>HOME</title>
    </head>
    <body>
+        <!-- This content will be inserted into the 'content' fragment of the layout -->
+        <section layout:fragment="content">
            <h1>POLISH COMMUNITY GROUP</h1>
-
+        </section>
    </body>
    </html>
\ No newline at end of file
--- a/src/main/resources/templates/layout/layout.html
+++ b/src/main/resources/templates/layout/layout.html
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org"
+xmlns:layout="https://www.ultraq.net.nz/thymeleaf/layout">
+
+<head>
+    <meta charset="UTF-8">
+    <title>My Application</title>
+    <link rel="stylesheet" href="/css/layout/layout.css">
+</head>
+<body>
+    <nav class="sidebar">
+        <a th:href="@{/profile}" class="navLink">
+            <img src="/assests/sidebar/userProfile.png" class = "navIcons"><span class="navText">Profile</span>
+        </a>
+        
+        <a th:href="@{/}" class="navLink">
+            <img src="/assests/sidebar/home.png" class="navIcons"><span class="navText">Home</span>
+        </a>
+
+        <a th:href="@{/events}" class="navLink"> 
+            <img src="/assests/sidebar/events.png" class="navIcons"><span class="navText">Events</span>
+        </a>
+
+        <a th:href="@{/info}" class="navLink">
+            <img src="/assests/sidebar/info.png" class="navIcons"><span class="navText">Info</span>
+        </a>
+
+        <a th:href="@{/news}" class="navLink">
+            <img src="/assests/sidebar/news.png" class="navIcons"><span class="navText">News</span>
+        </a>
+
+        <a th:href="@{/blogs}" class="navLink">
+            <img src="/assests/sidebar/blogs.png" class="navIcons"><span class="navText">Blogs</span>
+        </a>
+
+        <a th:href="@{/aboutus}" class="navLink">
+            <img src="/assests/sidebar/aboutUs.png" class="navIcons"><span class="navText">About Us</span>
+        </a>
+        
+    </nav>
+    <div class="mainContent">
+        <div layout:fragment="content"></div>
+    </div>
+</body>
+</html>
\ No newline at end of file