import React, { useEffect, useState } from "react"; import { Link, useNavigate } from "react-router-dom"; import { connect } from "react-redux"; import _ from "lodash"; import Drawer from "../Drawer"; import Search from "../Search"; //assets import cartIcon from "./dark-crimson-cart-icon.svg"; import whiteCartIcon from "./white-cart-icon.svg"; import profileIcon from "./dark-crimson-profile-icon.svg"; import searchIcon from "./dark-crimson-search-box.svg"; import lightGraySearchIcon from "./light-gray-search-box.svg"; import darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg"; import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg"; import grayBagIcon from "../../assets/icons/gray-bag.svg"; import graySearchIcon from "../../assets/icons/gray-search.svg"; import logoIcon from "../../assets/icons/logo.svg"; import qrIcon from "../../assets/icons/qr-white.svg"; import qrBlueIcon from "../../assets/icons/qr-blue.svg"; import arIcon from "../../assets/icons/ar-white.svg"; import arBlueIcon from "../../assets/icons/ar-blue.svg"; import hamburgerIcon from "../../assets/icons/hamburger.svg"; import hamburgerBlueIcon from "../../assets/icons/hamburger-blue.svg"; import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg"; import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg"; import dotsMenuDarkIcon from "../../assets/icons/dots-menu-dark.svg"; import bookmarkDeactiveDarkIcon from "../../assets/icons/bookmark-deactive-dark.svg"; import dotsMenuLightIcon from "../../assets/icons/dots-menu-light.svg"; import bookmarkDeactiveLightIcon from "../../assets/icons/bookmark-deactive-light.svg"; function Navbar({ pages, isDark, isMobile, headerOptions, loginBtn, menuItems, category, searchBox, topHeader, bottomHeader, productCategoryTextColor, menuItemsColor, }) { const navigation = useNavigate(); const { logo, hamburgerMenu, qr, shown, menu, title, back, bookmark } = headerOptions; const [top, setTop] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false); const [desktopMiddleFix, setDesktopMiddleFix] = useState(false); const [desktopEndTransform, setDesktopEndTransform] = useState(false); useEffect(() => { var lastScroll = window.scrollY; if (window.scrollY === 0) { setTop(() => true); } if (isMobile) { window.addEventListener("scroll", () => { if (window.scrollY === 0) { setTop(() => true); } else { setTop(() => false); } }); } if (!isMobile) { window.addEventListener("scroll", () => { if (window.scrollY >= 64) { setDesktopMiddleFix(() => true); } else { setDesktopMiddleFix(() => false); } if (window.scrollY > lastScroll && window.scrollY >= 90) { setDesktopEndTransform(() => true); } else { setDesktopEndTransform(() => false); } lastScroll = window.scrollY; }); } }, []); return isMobile ? (