Skip to content

Commit

Permalink
Merge pull request #14 from ViktorSvertoka/headernew
Browse files Browse the repository at this point in the history
  • Loading branch information
ViktorSvertoka authored Dec 14, 2023
2 parents 5879749 + 8596673 commit bdde176
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 95 deletions.
21 changes: 20 additions & 1 deletion src/css/layout/01-header.css
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
.header {
background-color: #f4f4f4;
color: #fff;
padding: 32px;
padding: 32px 0;
display: flex;
justify-content: space-between;
align-items: center;
Expand Down Expand Up @@ -97,3 +97,22 @@
display: none;
}
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 1000;
}

.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 10px;
text-align: center;
}
142 changes: 53 additions & 89 deletions src/js/01-mobile-menu.js
Original file line number Diff line number Diff line change
@@ -1,89 +1,53 @@
// const logo = document.getElementById('logo');
// const toggleButtons = document.getElementById('toggleButtons');
// const burgerMenu = document.getElementById('burgerMenu');
// const socialMedia = document.getElementById('socialMedia');
// const openHomeButton = document.getElementById('homeButton');
// const openFavoritesButton = document.getElementById('favoritesButton');
// const modal = document.getElementById('myModal');
// const closeModal = document.getElementById('closeModal');
// const modalContent = document.getElementById('modalContent');

// function openMobileMenu() {
// showModal();
// }

// function closeMobileMenu() {
// closeModal();
// }

// function toggleButtonsFunction() {
// if (!openHomeButton.classList.contains('active')) {
// openHomeButton.classList.add('active');
// openFavoritesButton.classList.remove('active');
// openMobileMenu();
// redirectToHome();
// } else {
// openHomeButton.classList.remove('active');
// openFavoritesButton.classList.add('active');
// openMobileMenu();
// redirectToFavorites();
// }
// }

// function redirectToHome() {
// window.location.href = '../partials/02-hero.html';
// }

// function redirectToFavorites() {
// window.location.href = '../partials/10-favorites.html';
// }

// function showModal() {
// modalContent.innerHTML = '<p>Content for Home or Favorite goes here.</p>';
// modal.style.display = 'block';
// }

// function closeModal() {
// modal.style.display = 'none';
// }

// toggleButtons.addEventListener('click', toggleButtonsFunction);
// burgerMenu.addEventListener('click', openMobileMenu);
// closeModal.addEventListener('click', closeMobileMenu);

// openHomeButton.addEventListener('click', () => {
// openMobileMenu();
// redirectToHome();
// });

// openFavoritesButton.addEventListener('click', () => {
// openMobileMenu();
// redirectToFavorites();
// });

// toggleButtons.addEventListener('click', function () {
// console.log('Toggle buttons clicked');
// toggleButtonsFunction();
// });

// burgerMenu.addEventListener('click', function () {
// console.log('Burger menu clicked');
// openMobileMenu();
// });

// closeModal.addEventListener('click', function () {
// console.log('Close modal clicked');
// closeMobileMenu();
// });

// openHomeButton.addEventListener('click', function () {
// console.log('Open home button clicked');
// openMobileMenu();
// redirectToHome();
// });

// openFavoritesButton.addEventListener('click', function () {
// console.log('Open favorites button clicked');
// openMobileMenu();
// redirectToFavorites();
// });
const burgerMenu = document.getElementById('burgerMenu');
const modalOverlay = document.getElementById('modalOverlay');
const closeModalButton = document.getElementById('closeModal');
const openHomeButton = document.getElementById('homeButton');
const openFavoritesButton = document.getElementById('favoritesButton');

burgerMenu.addEventListener('click', toggleMobileMenu);

closeModalButton.addEventListener('click', closeModal);

openHomeButton.addEventListener('click', () => {
toggleButtonsFunction();
redirectToHome();
});

openFavoritesButton.addEventListener('click', () => {
toggleButtonsFunction();
redirectToFavorites();
});

function toggleMobileMenu() {
if (modalOverlay.style.display === 'block') {
closeModal();
} else {
openModal();
}
}

function openModal() {
modalOverlay.style.display = 'block';
}

function closeModal() {
modalOverlay.style.display = 'none';
}

function toggleButtonsFunction() {
if (!openHomeButton.classList.contains('active')) {
openHomeButton.classList.add('active');
openFavoritesButton.classList.remove('active');
} else {
openHomeButton.classList.remove('active');
openFavoritesButton.classList.add('active');
}
}

function redirectToHome() {
window.location.href = '../partials/10-favorites.html';
}

function redirectToFavorites() {
window.location.href = '../partials/10-favorites.html';
}
34 changes: 29 additions & 5 deletions src/partials/01-header.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<div class="burger-menu" id="burgerMenu">
<a href="#">
<svg class="icon icon-align-justify" width="32" height="32">
<use href="./img/sprite.svg#icon-Frame-instagram"></use>
<use href="./img/sprite.svg#icon-align-justify"></use>
</svg>
</a>
</div>
Expand All @@ -45,9 +45,33 @@
</div>
</section>

<div id="myModal" class="modal">
<div class="modal-content">
<span id="closeModal" class="close">&times;</span>
<div id="modalContent"></div>
<div class="modal-overlay" id="modalOverlay">
<div class="modal-content" id="modalContent">
<nav>
<div class="toggle-buttons" id="toggleButtons">
<button id="homeButton" class="active js-open-home">Home</button>
<button id="favoritesButton" class="js-open-favorites">
Favorites
</button>
</div>
</nav>
<ul class="social-media" id="socialMedia">
<li>
<a href="https://www.facebook.com/goITclub/" target="_blank">
<svg><use href="./img/sprite.svg#icon-Frame-facebook"></use></svg>
</a>
</li>
<li>
<a href="https://www.instagram.com/goitclub/" target="_blank">
<svg><use href="./img/sprite.svg#icon-Frame-instagram"></use></svg>
</a>
</li>
<li>
<a href="https://www.youtube.com/c/GoIT" target="_blank">
<svg><use href="./img/sprite.svg#icon-Frame-youtube"></use></svg>
</a>
</li>
</ul>
<button id="closeModal" class="close">&times;</button>
</div>
</div>

0 comments on commit bdde176

Please sign in to comment.