x
This commit is contained in:
Your Name committed
1 parent
173c583787
commit
b415fb2eb4
2 files changed
+169
-147
No files matched your search
@@ -27,6 +27,7 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
const [scrolled, setScrolled] = useState(false)
|
||||
const [hasAnnouncement, setHasAnnouncement] = useState(false)
|
||||
const [isClientReady, setIsClientReady] = useState(false)
|
||||
const [settings, setSettings] = useState<StoreSettings | null>(null)
|
||||
const navigate = useNavigate()
|
||||
|
||||
@@ -55,6 +56,7 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setIsClientReady(true)
|
||||
fetchMegaMenu()
|
||||
|
||||
const checkAnnouncement = () => {
|
||||
@@ -173,7 +175,7 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
|
||||
</div>
|
||||
|
||||
{/* Center: Desktop mega menu */}
|
||||
{isDesktop && (
|
||||
{isClientReady && isDesktop && (
|
||||
<div className="flex-1 flex justify-center">
|
||||
<DesktopMegaMenu items={megaMenu} />
|
||||
</div>
|
||||
@@ -219,7 +221,7 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
|
||||
)}
|
||||
</button>
|
||||
|
||||
{isDesktop && (
|
||||
{isClientReady && isDesktop && (
|
||||
<>
|
||||
<div className="relative group flex items-center">
|
||||
<button className="px-3 py-2 rounded-full text-[10px] font-bold transition-all text-pop-black border border-pop-black/20 hover:bg-pop-black/5 bg-pop-bg flex items-center gap-1.5 uppercase tracking-wider">
|
||||
@@ -286,7 +288,7 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
|
||||
</>
|
||||
)}
|
||||
|
||||
{!isDesktop && (
|
||||
{isClientReady && !isDesktop && (
|
||||
<button
|
||||
onClick={() => setMobileOpen(prev => !prev)}
|
||||
className="p-1.5 rounded-full text-pop-black/80 hover:bg-pop-black/5 transition-all"
|
||||
@@ -299,7 +301,7 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{!isDesktop && (
|
||||
{isClientReady && !isDesktop && mobileOpen && (
|
||||
<MobileDrawer
|
||||
isOpen={mobileOpen}
|
||||
onClose={() => setMobileOpen(false)}
|
||||
@@ -345,47 +347,45 @@ export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = f
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div
|
||||
className={`fixed inset-0 z-[110] md:hidden transition-all duration-300 ${langSheetOpen ? 'visible' : 'invisible'}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute inset-0 bg-pop-black/40 backdrop-blur-sm transition-opacity duration-300 ${langSheetOpen ? 'opacity-100' : 'opacity-0'}`}
|
||||
onClick={() => setLangSheetOpen(false)}
|
||||
/>
|
||||
<div
|
||||
className={`absolute bottom-0 left-0 right-0 bg-pop-bg rounded-t-3xl transition-transform duration-300 shadow-2xl pb-safe ${langSheetOpen ? 'translate-y-0' : 'translate-y-full'}`}
|
||||
>
|
||||
<div className="flex justify-center pt-3 pb-1">
|
||||
<div className="w-12 h-1.5 bg-pop-black/20 rounded-full" />
|
||||
</div>
|
||||
<div className="px-6 pb-6 pt-2">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-sm font-bold uppercase tracking-widest text-pop-black flex items-center gap-2">
|
||||
<Globe className="w-4 h-4" />
|
||||
Select Language
|
||||
</h3>
|
||||
<button onClick={() => setLangSheetOpen(false)} className="p-2 rounded-full hover:bg-pop-black/5 text-pop-black/80">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
{langSheetOpen && (
|
||||
<div className="fixed inset-0 z-[110] md:hidden transition-all duration-300">
|
||||
<div
|
||||
className="absolute inset-0 bg-pop-black/40 backdrop-blur-sm transition-opacity duration-300"
|
||||
onClick={() => setLangSheetOpen(false)}
|
||||
/>
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-pop-bg rounded-t-3xl transition-transform duration-300 shadow-2xl pb-safe">
|
||||
<div className="flex justify-center pt-3 pb-1">
|
||||
<div className="w-12 h-1.5 bg-pop-black/20 rounded-full" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{LANGUAGES.map(lang => {
|
||||
const isActive = i18n.language.startsWith(lang.code)
|
||||
return (
|
||||
<button
|
||||
key={lang.code}
|
||||
onClick={() => changeLanguage(lang.code)}
|
||||
className={`w-full flex items-center justify-between px-4 py-4 rounded-xl transition-colors font-medium border border-transparent ${isActive ? 'bg-pop-black/10 border-pop-black/20 text-pop-black font-bold' : 'bg-pop-bg/50 text-pop-black/80 hover:bg-pop-black/5'}`}
|
||||
>
|
||||
<span className="text-base">{lang.label}</span>
|
||||
{isActive && <Check className="w-5 h-5" />}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
<div className="px-6 pb-6 pt-2">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="text-sm font-bold uppercase tracking-widest text-pop-black flex items-center gap-2">
|
||||
<Globe className="w-4 h-4" />
|
||||
Select Language
|
||||
</h3>
|
||||
<button onClick={() => setLangSheetOpen(false)} className="p-2 rounded-full hover:bg-pop-black/5 text-pop-black/80">
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{LANGUAGES.map(lang => {
|
||||
const isActive = i18n.language.startsWith(lang.code)
|
||||
return (
|
||||
<button
|
||||
key={lang.code}
|
||||
onClick={() => changeLanguage(lang.code)}
|
||||
className={`w-full flex items-center justify-between px-4 py-4 rounded-xl transition-colors font-medium border border-transparent ${isActive ? 'bg-pop-black/10 border-pop-black/20 text-pop-black font-bold' : 'bg-pop-bg/50 text-pop-black/80 hover:bg-pop-black/5'}`}
|
||||
>
|
||||
<span className="text-base">{lang.label}</span>
|
||||
{isActive && <Check className="w-5 h-5" />}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in new issue
Block a user