cellar/cs-design
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile nav (instagram feel)

Browse Source
This commit is contained in:
free ko 2025-04-14 22:56:37 +03:00
parent 88f71c4b78
commit b6dff5f653
5 changed files with 153 additions and 32 deletions

41
assets/js/popups.js

@ -6,17 +6,35 @@ document.addEventListener('DOMContentLoaded', function() {
popup.classList.remove('flex');
popup.classList.add('hidden');
});
document.body.classList.remove('overflow-hidden'); // Remove overflow-hidden class from body
// Only remove overflow-hidden if no popups are open
if (!isAnyPopupOpen()) {
document.body.classList.remove('overflow-hidden'); // Remove overflow-hidden class from body
}
}
// Function to open the popup
// Function to check if any popup is currently open
function isAnyPopupOpen() {
return Array.from(document.querySelectorAll('[popupID]')).some(popup => popup.classList.contains('flex'));
}
// Function to open or toggle the popup
function openPopup(popupID) {
closeAllPopups(); // Close all other popups first
const popup = document.querySelector(`[popupID="${popupID}"]`);
if (popup) {
popup.classList.remove('hidden');
popup.classList.add('flex');
document.body.classList.add('overflow-hidden'); // Add overflow-hidden class to body
if (popup.classList.contains('flex')) {
// If the popup is already open, close it
closePopup(popupID);
} else {
// Close all other popups first
closeAllPopups();
popup.classList.remove('hidden');
popup.classList.add('flex');
// Check if the popup has the popupKeepScroll attribute
if (!popup.hasAttribute('popupKeepScroll')) {
document.body.classList.add('overflow-hidden'); // Add overflow-hidden class to body
}
}
}
}
@ -26,7 +44,14 @@ document.addEventListener('DOMContentLoaded', function() {
if (popup) {
popup.classList.remove('flex');
popup.classList.add('hidden');
document.body.classList.remove('overflow-hidden'); // Remove overflow-hidden class from body
// Check if the popup has the popupKeepScroll attribute
if (!popup.hasAttribute('popupKeepScroll')) {
// Only remove overflow-hidden if no other popups are open
if (!isAnyPopupOpen()) {
document.body.classList.remove('overflow-hidden'); // Remove overflow-hidden class from body
}
}
}
}
@ -38,7 +63,7 @@ document.addEventListener('DOMContentLoaded', function() {
if (match) {
const actionType = match[1]; // 'open' or 'close'
const popupBaseID = match[2]; // The part after 'open' or 'close'
const popupBaseID = match[2].trim(); // The part after 'open' or 'close'
if (actionType === 'open') {
openPopup(popupBaseID);

50
index.html

@ -24,7 +24,7 @@
<div class="w-full flex flex-col justify-center items-center relative">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
<div class="w-full flex flex-row gap-[25px] justify-between p-[10px] flex-wrap">
<div class="max-w-[200px] min-w-[200px]">
<div class="max-w-[200px] min-w-[200px] flex flex-row justify-start items-center">
<!-- <img src="./assets/images/logo.png" class=""></img> -->
<a href="index.html" class="font-bold text-2xl transition-all ease duration-[0.3s] hover:text-linkMain">Cellar Social</a>
</div>
@ -39,18 +39,13 @@
<button class="px-[15] py-[3px] transition-all ease duration-[0.3s] hover:bg-bgMain hover:text-bgMain2">Login</button>
</div>
</div>
<div class="lg:hidden">
<button class="flex flex-col justify-center items-center">
<i class="bx bx-menu text-3xl"></i>
</button>
</div>
</div>
</div>
</div>
<div class="w-full flex flex-col justify-center items-center border-t-[1px] border-bgMain/10">
<div class="max-w-[1400px] w-full flex flex-col justify-center items-center px-[10px] relative">
<div class="flex flex-row grow-[1] gap-[50px] justify-end items-center py-[10px] max-lg:hidden">
<a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<a href="events.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Events</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@ -80,7 +75,7 @@
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
<a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<a href="promotions.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Promotions</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@ -90,11 +85,48 @@
</div>
</div>
</div>
<!-- mobile bottom nav start -->
<div class="w-full hidden flex-col bg-bgMain2 text-bgMain border-t-[1px] border-bgMain/10 fixed bottom-[0px] max-lg:flex">
<div popupID="MobileNav" popupKeepScroll class="hide-scrollbar w-full h-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10">
<a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Sake</a>
<a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Coffee</a>
<a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Spirits & Liqueurs</a>
<a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Wine</a>
</div>
<div popupID="ProfileMobile" popupKeepScroll class="hide-scrollbar w-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10">
<a href="profile.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Profile</a>
<a href="settings.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Settings</a>
<a href="index.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Logout</a>
</div>
<div class="w-full flex flex-row gap-[10px]">
<a href="index.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
<i class="bx bxs-home text-2xl"></i>
</a>
<a href="promotions.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
<i class="bx bx-purchase-tag text-2xl"></i>
</a>
<a href="events.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
<i class="bx bx-calendar-event text-2xl"></i>
</a>
<a href="search.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
<i class="bx bx-search text-2xl"></i>
</a>
<button popupAction="openProfileMobile" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-[30px] h-[30px] object-cover bg-black/50">
</button>
<d popupAction="openMobileNav" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
<i class="bx bx-menu text-2xl"></i>
</d>
</div>
</div>
<!-- mobile bottom nav end -->
</div>
<!-- main navbar end -->
<!-- main middle start -->
<div class="w-full flex flex-col grow-[1] pt-[100px]">
<div class="w-full flex flex-col grow-[1] pt-[100px] overflow-hidden">
<!-- hero start -->
<div class="w-full flex flex-col gap-[25px] justify-center items-center relative h-[calc(100vh-100px)] relative overflow-hidden border-b-[1px] border-bgMain2/15">

8
product.html

@ -24,7 +24,7 @@
<div class="w-full flex flex-col justify-center items-center relative">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
<div class="w-full flex flex-row gap-[25px] justify-between p-[10px] flex-wrap">
<div class="max-w-[200px] min-w-[200px]">
<div class="max-w-[200px] min-w-[200px] flex flex-row justify-start items-center">
<!-- <img src="./assets/images/logo.png" class=""></img> -->
<a href="index.html" class="font-bold text-2xl transition-all ease duration-[0.3s] hover:text-linkMain">Cellar Social</a>
</div>
@ -58,7 +58,7 @@
<div class="w-full flex flex-col justify-center items-center border-t-[1px] border-bgMain/10">
<div class="max-w-[1400px] w-full flex flex-col justify-center items-center px-[10px] relative">
<div class="flex flex-row grow-[1] gap-[50px] justify-end items-center py-[10px] max-lg:hidden">
<a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<a href="events.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Events</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@ -88,7 +88,7 @@
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
<a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<a href="promotions.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Promotions</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@ -154,7 +154,7 @@
</div>
<div class="w-full flex flex-row gap-[10px] flex-wrap">
<button popupAction="openReviewsSum" class="flex flex-row bg-bgScore5 text-bgMain text-sm relative">
<p class="px-[10px] py-[5px]">Average score</p>
<p class="px-[10px] py-[5px]">cellar.social Rating</p>
<p class="px-[10px] py-[5px] bg-white/25">Exceptional</p>
<span class="absolute inset-[0] bg-white/0 transition-all ease duration-[0.4s] hover:bg-white/10"></span>
</button>

80
profile.html

@ -24,7 +24,7 @@
<div class="w-full flex flex-col justify-center items-center relative">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
<div class="w-full flex flex-row gap-[25px] justify-between p-[10px] flex-wrap">
<div class="max-w-[200px] min-w-[200px]">
<div class="max-w-[200px] min-w-[200px] flex flex-row justify-start items-center">
<!-- <img src="./assets/images/logo.png" class=""></img> -->
<a href="index.html" class="font-bold text-2xl transition-all ease duration-[0.3s] hover:text-linkMain">Cellar Social</a>
</div>
@ -47,18 +47,13 @@
</div>
</div>
</div>
<div class="lg:hidden">
<button class="flex flex-col justify-center items-center">
<i class="bx bx-menu text-3xl"></i>
</button>
</div>
</div>
</div>
</div>
<div class="w-full flex flex-col justify-center items-center border-t-[1px] border-bgMain/10">
<div class="max-w-[1400px] w-full flex flex-col justify-center items-center px-[10px] relative">
<div class="flex flex-row grow-[1] gap-[50px] justify-end items-center py-[10px] max-lg:hidden">
<a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<a href="events.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Events</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@ -88,7 +83,7 @@
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
<a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<a href="promotions.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Promotions</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@ -98,6 +93,44 @@
</div>
</div>
</div>
<!-- mobile bottom nav start -->
<div class="w-full hidden flex-col bg-bgMain2 text-bgMain border-t-[1px] border-bgMain/10 fixed bottom-[0px] max-lg:flex">
<div popupID="MobileNav" popupKeepScroll class="hide-scrollbar w-full h-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10">
<a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Sake</a>
<a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Coffee</a>
<a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Spirits & Liqueurs</a>
<a href="search.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Wine</a>
</div>
<div popupID="ProfileMobile" popupKeepScroll class="hide-scrollbar w-full hidden flex-row gap-[10px] overflow-auto text-bgMain font-bold border-b-[1px] border-bgMain/10">
<a href="profile.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Profile</a>
<a href="settings.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Settings</a>
<a href="index.html" class="text-base flex flex-row grow-[1] px-[10px] py-[10px] justify-center">Logout</a>
</div>
<div class="w-full flex flex-row gap-[10px]">
<a href="index.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
<i class="bx bxs-home text-2xl"></i>
</a>
<a href="promotions.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
<i class="bx bx-purchase-tag text-2xl"></i>
</a>
<a href="events.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
<i class="bx bx-calendar-event text-2xl"></i>
</a>
<a href="search.html" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
<i class="bx bx-search text-2xl"></i>
</a>
<button popupAction="openProfileMobile" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
<img src="https://preview.free3d.com/img/2015/01/2154247191454024843/dn06b30e.jpg" class="w-[30px] h-[30px] object-cover bg-black/50">
</button>
<d popupAction="openMobileNav" class="grow-[1] flex flex-col gap-[2px] text-bgMain/50 justify-center items-center text-sm p-[10px]">
<i class="bx bx-menu text-2xl"></i>
</d>
</div>
</div>
<!-- mobile bottom nav end -->
</div>
<!-- main navbar end -->
@ -188,6 +221,37 @@
<!-- main footer end -->
<!-- popups start -->
<div popupID="MobileNav" class="fixed inset-[0] z-[90] bg-black/25 backdrop-blur-sm hidden flex-col justify-start items-center">
<div class="w-full h-full flex flex-col justify-start items-center relative">
<div class="w-full h-full flex flex-col justify-start items-center">
<div class="w-full grow-[1] flex flex-col justify-start items-center">
<div class="w-full flex flex-col grow-[1] bg-bgMain shadow-lg gap-[5px] px-[10px]">
<div class="flex flex-row justify-between items-center gap-[10px] p-[10px] border-b-[1px] border-b-bgMain2/25">
<p class="font-bold text-2xl">Cellar Social</p>
<button popupAction="closeMobileNav" class="mr-[-10px] transition-all ease duration-[0.3s] px-[10px] hover:bg-bgMain2 hover:text-bgMain">
<i class="bx bx-menu text-3xl"></i>
</button>
</div>
<div class="w-full grow-[1] flex flex-col pt-[10px]">
<!-- popup x start -->
<div class="w-full flex flex-col gap-[15px] grow-[1]">
<div class="w-full flex flex-row">
<p>s1</p>
</div>
<div class="w-full flex flex-col gap-[10px] grow-[1] border-y-[1px] border-bgMain2/25 overflow-auto">
<p>s2</p>
</div>
<div class="w-full flex flex-row">
<p>s3</p>
</div>
</div>
<!-- popup x end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- popups end -->
<!-- SCRIPTS START-->

6
search.html

@ -24,7 +24,7 @@
<div class="w-full flex flex-col justify-center items-center relative">
<div class="max-w-[1400px] w-full flex flex-col justify-start items-end px-[10px] relative">
<div class="w-full flex flex-row gap-[25px] justify-between p-[10px] flex-wrap">
<div class="max-w-[200px] min-w-[200px]">
<div class="max-w-[200px] min-w-[200px] flex flex-row justify-start items-center">
<!-- <img src="./assets/images/logo.png" class=""></img> -->
<a href="index.html" class="font-bold text-2xl transition-all ease duration-[0.3s] hover:text-linkMain">Cellar Social</a>
</div>
@ -58,7 +58,7 @@
<div class="w-full flex flex-col justify-center items-center border-t-[1px] border-bgMain/10">
<div class="max-w-[1400px] w-full flex flex-col justify-center items-center px-[10px] relative">
<div class="flex flex-row grow-[1] gap-[50px] justify-end items-center py-[10px] max-lg:hidden">
<a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<a href="events.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Events</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>
@ -88,7 +88,7 @@
<div class="h-[2px] w-full bg-bgMain"></div>
</div>
</a>
<a href="#" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<a href="promotions.html" class="text-lg transition-all ease duration-[0.4s] font-bold text-textMain2 group">
<p class="px-[10px]">Promotions</p>
<div class="px-[50%] transition-all ease duration-[0.4s] group-hover:px-[0%]">
<div class="h-[2px] w-full bg-bgMain"></div>