diff --git a/assets/css/style.css b/assets/css/style.css index 81e8aef..292d432 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -618,6 +618,15 @@ label span { color: var(--panel-text); } + +.menu-toggle { + display: none; + font-size: 1.5rem; + background: none; + border: none; + cursor: pointer; + color: var(--panel-text); +} @media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; @@ -628,4 +637,58 @@ label span { width: 100%; max-width: 100%; } + + .menu-toggle { + display: block; + } + + .nav { + display: none; + flex-direction: column; + align-items: center; + text-align: center; + background-color: var(--panel-background); + position: absolute; + top: 100%; + left: 0; + right: 0; + z-index: 1000; + border-top: 1px solid #0DBB99; + } + +.nav-item a{ + margin-right: 0; +} + .nav.nav-open { + display: flex; + } + + .nav-list { + flex-direction: column; + padding: 1rem; + } + + .nav-item { + margin: 0.5rem 0; + } + + .footer{ + height: auto; + } + .footer-links{ + flex-direction: column; + } + + .footer-links li { + margin-right: 0; + margin-bottom: 10px; + } + + .footer-inner{ + /* padding: 10px 0; */ + padding: 20px 0; + } + .footer-nav{ + margin-top: 0; + } } \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index 350a1ff..b97a6ba 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -7,14 +7,14 @@ * @param {Function} onSuccess * @param {Function} onError */ -function sendAjax(action, - args = [ ], - onLoad = () => { }, - onSuccess = (data) => { }, +function sendAjax(action, + args = [], + onLoad = () => { }, + onSuccess = (data) => { }, onError = (error) => { }) { - + onLoad(); - + fetch('/ajax', { method: 'POST', headers: { @@ -25,17 +25,17 @@ function sendAjax(action, 'args': args }) }) - .then(response => response.json().then(data => ({ data, response }))) - .then(({ data, response }) => { - if (!response.ok) { - throw new Error(data.error || `HTTP error! Status: ${response.status}`); - } - - onSuccess(data); - }) - .catch(error => { - onError(error); - }); + .then(response => response.json().then(data => ({ data, response }))) + .then(({ data, response }) => { + if (!response.ok) { + throw new Error(data.error || `HTTP error! Status: ${response.status}`); + } + + onSuccess(data); + }) + .catch(error => { + onError(error); + }); } function showToastify(message, type = "info") { Toastify({ @@ -43,6 +43,24 @@ function showToastify(message, type = "info") { gravity: "bottom", position: "left", className: type, - duration: 3000 }) - .showToast(); + duration: 3000 + }) + .showToast(); } + +document.addEventListener('DOMContentLoaded', function () { + const toggle = document.getElementById('menu-toggle'); + const nav = document.querySelector('.nav'); + const icon = document.getElementById('menu-icon'); + + toggle.addEventListener('click', function () { + nav.classList.toggle('nav-open'); + if (nav.classList.contains('nav-open')) { + icon.classList.remove('fa-bars'); + icon.classList.add('fa-xmark'); + } else { + icon.classList.remove('fa-xmark'); + icon.classList.add('fa-bars'); + } + }); +}); diff --git a/components/templates/layout/header.php b/components/templates/layout/header.php index b7717b9..64a9e45 100644 --- a/components/templates/layout/header.php +++ b/components/templates/layout/header.php @@ -1,5 +1,6 @@ + @@ -11,14 +12,16 @@ - - + + - + @@ -36,28 +39,35 @@ +
+ +
-
\ No newline at end of file +
\ No newline at end of file