new recipe bar on home working

src/main/resources/templates/home.html

@@ -60,12 +60,22 @@
     <div class="body-right">
         <div class="sidebar-right">
             <h1> NEW </h1>
+            <div class="new-recipes">
+            <a th:each="recipe : ${newestRecipes}"
+               th:href="@{/recipes/{id}(id=${recipe.id})}"
+               class="new-recipe-item">
+               <p th:text="${recipe.title}">Title</p>
+                <div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
+                    <img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
+                </div>
+            </a>
+        </div>
         </div>
     </div>
 </div>
 
 <script>
-/// For cost display
+// For cost display
 	document.querySelectorAll('.card-cost').forEach(el => {
     	const num = parseInt(el.textContent);
     	el.textContent = num === 0 ? '' : '$'.repeat(num);