assets/css/style.css

@@ -102,11 +102,14 @@ body {
     background: #00660f;
 }
 
-
+/*placeholder for search and login section*/
 .search-and-login {
     display: flex;
     align-items: center;
     position: relative;
+    /* width: 277px;
+    height: 49px;
+    border: #000 solid 1px; */
 }
 
 .search-input {
@@ -123,33 +126,6 @@ body {
 
 }
 
-
-.search-results {
-    position: absolute;
-    top: 110%;
-    left: 0;
-    background-color: var(--panel-background);
-    border: 1px solid #A8C9AA;
-    border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-    width: 220px;
-    z-index: 1000;
-    overflow: hidden;
-}
-
-.search-result-item {
-    padding: 10px 16px;
-    font-size: 14px;
-    cursor: pointer;
-    color: var(--common-text);
-    font-family: var(--common-font);
-}
-
-.search-result-item a{
-    text-decoration: none;
-    color: var(--title-color);
-}
-
 .login-link {
     background-color: #C7E2C9;
     height: 36px;

assets/js/main.js

@@ -64,66 +64,3 @@ document.addEventListener('DOMContentLoaded', function () {
         }
     });
 });
-
-const searchInput = document.getElementById('search-input');
-const searchResults = document.getElementById('search-results');
-
-let searchTimeout;
-
-searchInput.addEventListener('input', function () {
-    clearTimeout(searchTimeout);
-
-    searchTimeout = setTimeout(async () => {
-        let searchValue = this.value.trim();
-
-
-        if (searchValue.length < 3) {
-            searchResults.innerHTML = '';
-            searchResults.hidden = true;
-            return;
-        }
-
-        const formData = new FormData();
-        formData.append('action', 'search');
-        formData.append('query', searchValue);
-
-        const response = await fetch('/ajax', {
-            method: 'POST',
-            body: formData
-        });
-
-        const json = await response.json();
-
-        if (!response.ok) {
-            const message = json.error || 'Something went wrong.';
-            showToastify(message, 'error');
-            return;
-        }
-
-        const results = json.result;
-
-        searchResults.innerHTML = '';
-
-        if (results.length > 0) {
-            results.forEach(result => {
-                searchResults.innerHTML += `
-        <div class="search-result-item hover-anim">
-            <a href="${result.url}" class="search-result-link">
-            ${result.field_title}
-            </a>
-        </div>
-        `;
-            });
-            searchResults.hidden = false;
-        } else {
-            searchResults.innerHTML = `<div class="search-result-item">No recipes found</div>`;
-            searchResults.hidden = false;
-        }
-    }, 300);
-});
-
-document.addEventListener('click', function (event) {
-    if (!searchResults.contains(event.target) && event.target !== searchInput) {
-        searchResults.hidden = true;
-    }
-});

components/templates/layout/header.php

@@ -54,24 +54,17 @@
                     <ul class="nav-list">
                         <li class="nav-item"><a href="<?php the_permalink("index:home") ?>" class="nav-link">HOME</a>
                         </li>
-                        <li class="nav-item"><a href="<?php the_permalink("recipes:catalog") ?>"
+                        <li class="nav-item"><a href="<?php the_permalink("recipes:catalog") ?>" class="nav-link">RECIPES</a></li>
-                                class="nav-link">RECIPES</a></li>
+                        <li class="nav-item"><a href="<?php the_permalink("recipes:favorites")?>" class="nav-link">FAVORITES</a></li>
-                        <li class="nav-item"><a href="<?php the_permalink("recipes:favorites") ?>"
+                        <li class="nav-item"><a href="<?php the_permalink("recipes:daily-meals") ?>" class="nav-link">MEAL A DAY</a></li>
-                                class="nav-link">FAVORITES</a></li>
-                        <li class="nav-item"><a href="<?php the_permalink("recipes:daily-meals") ?>"
-                                class="nav-link">MEAL A DAY</a></li>
                         <li class="nav-item"><a href="#" class="nav-link">SUBMIT RECIPE</a></li>
                     </ul>
                 </nav>
                
                 <div class="search-and-login">
                      <i class="fa-solid fa-magnifying-glass search-icon"></i>
-                    <input type="text" id="search-input" class="search-input" placeholder="Search recipes...">
+                    <input type="text" class="search-input" placeholder="Search recipes...">
-                    <div class="search-results" id="search-results" hidden>
+                    <a href="<?php the_permalink(CURRENT_USER ? 'users:profile' : 'users:login') ?>" class="login-link hover-anim">
-                        
-                    </div>
-                    <a href="<?php the_permalink(CURRENT_USER ? 'users:profile' : 'users:login') ?>"
-                        class="login-link hover-anim">
                         <i class="fa-regular fa-user"></i>
                     </a>
                 </div>