700 lines
24 KiB
JavaScript
700 lines
24 KiB
JavaScript
import { MdOutlineWatchLater } from "react-icons/md";
|
|
import { FiSearch } from "react-icons/fi";
|
|
import { IoIosArrowDown, IoMdClose } from "react-icons/io";
|
|
import { MdOutlineMyLocation } from "react-icons/md";
|
|
import { AiOutlineClose } from "react-icons/ai";
|
|
import { useState, useEffect, useRef } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
|
|
import pozologo from "../../Images/PozoStore.svg";
|
|
import { HiLocationMarker } from "react-icons/hi";
|
|
import {
|
|
PiShoppingCartLight,
|
|
PiStorefrontLight,
|
|
PiUserCircleLight,
|
|
} from "react-icons/pi";
|
|
import { FaChevronDown } from "react-icons/fa6";
|
|
import { GoHeart } from "react-icons/go";
|
|
import { RxHamburgerMenu } from "react-icons/rx";
|
|
import "../../Styles/HomePage/PozoPublicNavbar.scss";
|
|
|
|
import PozoPublicSearch from "./PozoPublicSearch/PozoPublicSearch";
|
|
import { CiViewList } from "react-icons/ci";
|
|
import FullPageLoader from "../Loader/PozoPublicLoader";
|
|
import samplepic from "../../Images/Restaurant.png";
|
|
import { LuChevronDownCircle, LuChevronUpCircle } from "react-icons/lu";
|
|
import { breadCrumbSelector, changeBreadCrumb } from "../../Features/LandingPage/landingPage";
|
|
const subDirectory = import.meta.env.BASE_URL;
|
|
|
|
const PozoPublicNavbar = () => {
|
|
const dispatch = useDispatch();
|
|
const navigate = useNavigate();
|
|
const [Searchquery, setSearchquery] = useState('');
|
|
const breadCrumb = useSelector(breadCrumbSelector);
|
|
const dropdownRef = useRef(null);
|
|
const ref = useRef(null);
|
|
const PageName = breadCrumb?.[breadCrumb.length - 1]?.name
|
|
const [profile, setProfile] = useState(false);
|
|
const [loading, setLoading] = useState(false);
|
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
const [isCollapsedbook, setIsCollapsedbook] = useState(true);
|
|
const [sidedrawer, setSidedrawer] = useState(true);
|
|
const [locationDropdown, setLocationDropdown] = useState(false);
|
|
const [dropdownClosing, setDropdownClosing] = useState(false);
|
|
const [showLocationList, setShowLocationList] = useState(false);
|
|
const [Locationdata, setLocationdata] = useState([]);
|
|
const [currentLocation, setCurrentLocation] = useState(
|
|
localStorage.getItem("currentLocation") || "Hosur,, PRPH+33F, Hamumanth..."
|
|
);
|
|
|
|
const selectLocation = (locName) => {
|
|
if (locName) {
|
|
setCurrentLocation(locName);
|
|
localStorage.setItem("currentLocation", locName);
|
|
}
|
|
toggleLocationDropdown();
|
|
};
|
|
|
|
const handleTrackCurrentLocation = () => {
|
|
if (navigator.geolocation) {
|
|
setCurrentLocation("Detecting location...");
|
|
navigator.geolocation.getCurrentPosition(
|
|
async (position) => {
|
|
const { latitude, longitude } = position.coords;
|
|
try {
|
|
const res = await fetch(
|
|
`https://nominatim.openstreetmap.org/reverse?lat=${latitude}&lon=${longitude}&format=json`
|
|
);
|
|
const data = await res.json();
|
|
if (data && data.display_name) {
|
|
const address = data.display_name;
|
|
setCurrentLocation(address);
|
|
localStorage.setItem("currentLocation", address);
|
|
} else {
|
|
const fallback = `${latitude.toFixed(4)}, ${longitude.toFixed(4)}`;
|
|
setCurrentLocation(fallback);
|
|
localStorage.setItem("currentLocation", fallback);
|
|
}
|
|
} catch (err) {
|
|
console.error("Reverse geocoding error:", err);
|
|
const fallback = `Lat: ${latitude.toFixed(2)}, Lon: ${longitude.toFixed(2)}`;
|
|
setCurrentLocation(fallback);
|
|
localStorage.setItem("currentLocation", fallback);
|
|
}
|
|
if (locationDropdown) {
|
|
toggleLocationDropdown();
|
|
}
|
|
},
|
|
(error) => {
|
|
console.error("Geolocation error:", error);
|
|
alert("Location permission denied. Please allow location access in your browser.");
|
|
setCurrentLocation(localStorage.getItem("currentLocation") || "Hosur,, PRPH+33F, Hamumanth...");
|
|
}
|
|
);
|
|
} else {
|
|
alert("Geolocation is not supported by your browser.");
|
|
}
|
|
};
|
|
|
|
const GotoHomepage = () => {
|
|
const items = [
|
|
{
|
|
name: "Home",
|
|
link: `${subDirectory}app-page`,
|
|
},
|
|
];
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
navigate(`${subDirectory}app-page`);
|
|
dispatch(changeBreadCrumb({ items: items }));
|
|
}, 500);
|
|
};
|
|
|
|
const toSignIn = () => {
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
navigate(`${subDirectory}app-page/signin`);
|
|
}, 500);
|
|
}
|
|
|
|
const toMyProfile = () => {
|
|
const items = [
|
|
{
|
|
name: "Home",
|
|
link: `${subDirectory}app-page`,
|
|
},
|
|
{
|
|
name: "My Profile",
|
|
link: `${subDirectory}app-page/myprofile`,
|
|
},
|
|
];
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
navigate(`${subDirectory}app-page/myprofile`);
|
|
dispatch(changeBreadCrumb({ items: items }));
|
|
}, 500);
|
|
};
|
|
|
|
const toFavOrder = () => {
|
|
const items = [
|
|
{
|
|
name: "Home",
|
|
link: `${subDirectory}app-page`,
|
|
},
|
|
{
|
|
name: "My Orders",
|
|
link: `${subDirectory}app-page/order`,
|
|
},
|
|
];
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
navigate(`${subDirectory}app-page/order`);
|
|
dispatch(changeBreadCrumb({ items: items }));
|
|
}, 500);
|
|
};
|
|
|
|
const toFavShop = () => {
|
|
const items = [
|
|
{
|
|
name: "Home",
|
|
link: `${subDirectory}app-page`,
|
|
},
|
|
{
|
|
name: "Fav Shop",
|
|
link: `${subDirectory}app-page/favshop`,
|
|
},
|
|
];
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
navigate(`${subDirectory}app-page/favshop`);
|
|
dispatch(changeBreadCrumb({ items: items }));
|
|
}, 500);
|
|
};
|
|
|
|
const toFavList = () => {
|
|
const items = [
|
|
{
|
|
name: "Home",
|
|
link: `${subDirectory}app-page`,
|
|
},
|
|
{
|
|
name: "Favourite List",
|
|
link: `${subDirectory}app-page/favlist`,
|
|
},
|
|
];
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
navigate(`${subDirectory}app-page/favlist`);
|
|
dispatch(changeBreadCrumb({ items: items }));
|
|
}, 500);
|
|
};
|
|
|
|
const toStore = () => {
|
|
const items = [
|
|
{
|
|
name: "Home",
|
|
link: `${subDirectory}app-page`,
|
|
},
|
|
{
|
|
name: "Stores",
|
|
link: `${subDirectory}app-page/Stores`,
|
|
},
|
|
];
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
navigate(`${subDirectory}app-page/Stores`);
|
|
dispatch(changeBreadCrumb({ items: items }));
|
|
}, 500);
|
|
};
|
|
|
|
const navigatetoCart = () => {
|
|
const items = [
|
|
{
|
|
name: "Home",
|
|
link: `${subDirectory}app-page`,
|
|
},
|
|
{
|
|
name: "Cart",
|
|
link: `${subDirectory}app-page/cart`,
|
|
},
|
|
];
|
|
setLoading(true);
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
navigate(`${subDirectory}app-page/cart`);
|
|
dispatch(changeBreadCrumb({ items: items }));
|
|
}, 500);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (Searchquery.length > 0) {
|
|
setShowLocationList(true)
|
|
}
|
|
else if (Searchquery.length == 0) {
|
|
setShowLocationList(false)
|
|
}
|
|
}, [Searchquery])
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event) => {
|
|
if (ref.current && !ref.current.contains(event.target)) {
|
|
setProfile(false);
|
|
}
|
|
};
|
|
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, []);
|
|
|
|
const handleLoginClick = () => {
|
|
setProfile(!profile);
|
|
};
|
|
|
|
const toggleCollapse = () => {
|
|
setIsCollapsed(!isCollapsed);
|
|
};
|
|
|
|
const toggleCollapsebook = () => {
|
|
setIsCollapsedbook(!isCollapsedbook);
|
|
};
|
|
|
|
const toggleHamburger = () => {
|
|
setSidedrawer(!sidedrawer);
|
|
};
|
|
|
|
const handleInputClick = () => {
|
|
setShowLocationList((prevShowLocationList) => !prevShowLocationList);
|
|
};
|
|
|
|
const handleSubmitLocation = (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!Searchquery.trim()) return;
|
|
|
|
let items = JSON.parse(localStorage.getItem('Locationdata')) || [];
|
|
|
|
const isDuplicate = items.some(item => item.ShopLocation.toLowerCase() === Searchquery.trim().toLowerCase());
|
|
|
|
if (!isDuplicate) {
|
|
items.push({ ShopLocation: Searchquery.trim() });
|
|
localStorage.setItem('Locationdata', JSON.stringify(items));
|
|
}
|
|
|
|
setLocationdata(items);
|
|
setSearchquery('');
|
|
setShowLocationList(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
let items = JSON.parse(localStorage.getItem('Locationdata')) || [];
|
|
setLocationdata(items);
|
|
}, []);
|
|
|
|
const deleteRecentSearch = (locationToDelete) => {
|
|
let items = JSON.parse(localStorage.getItem('Locationdata')) || [];
|
|
const updatedItems = items.filter(item => item.ShopLocation !== locationToDelete);
|
|
localStorage.setItem('Locationdata', JSON.stringify(updatedItems));
|
|
setLocationdata(updatedItems);
|
|
};
|
|
|
|
const handleChange = (e) => {
|
|
setSearchquery(e.target.value);
|
|
};
|
|
|
|
const toggleLocationDropdown = () => {
|
|
if (locationDropdown) {
|
|
setDropdownClosing(true);
|
|
setTimeout(() => {
|
|
setLocationDropdown(false);
|
|
setDropdownClosing(false);
|
|
}, 300);
|
|
} else {
|
|
setLocationDropdown(true);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event) => {
|
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
|
|
setDropdownClosing(true);
|
|
setTimeout(() => {
|
|
setLocationDropdown(false);
|
|
setDropdownClosing(false);
|
|
}, 300);
|
|
}
|
|
};
|
|
|
|
if (locationDropdown) {
|
|
document.addEventListener("mousedown", handleClickOutside);
|
|
} else {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
};
|
|
}, [locationDropdown]);
|
|
|
|
const handlerSearchFuntion = () => {
|
|
if (!Searchquery.trim()) return;
|
|
|
|
let items = JSON.parse(localStorage.getItem('Locationdata')) || [];
|
|
|
|
const isDuplicate = items.some(item => item.ShopLocation.toLowerCase() === Searchquery.trim().toLowerCase());
|
|
|
|
if (!isDuplicate) {
|
|
items.push({ ShopLocation: Searchquery.trim() });
|
|
localStorage.setItem('Locationdata', JSON.stringify(items));
|
|
}
|
|
|
|
setLocationdata(items);
|
|
setSearchquery('');
|
|
setShowLocationList(false);
|
|
}
|
|
|
|
const StoreLocation = [
|
|
{ ShopLocationName: "Pochampalli" },
|
|
{ ShopLocationName: "Hosur" },
|
|
{ ShopLocationName: "Mathur" },
|
|
{ ShopLocationName: "Dharmapuri" },
|
|
{ ShopLocationName: "Coimbatore" },
|
|
{ ShopLocationName: "Salem" },
|
|
{ ShopLocationName: "Chennai" },
|
|
{ ShopLocationName: "Namakkal" }
|
|
];
|
|
|
|
const ShopLocationLists = [
|
|
{ location: "Hosur" },
|
|
{ location: "Pochampalli" },
|
|
{ location: "Mathur" },
|
|
{ location: "Dharmapuri" },
|
|
{ location: "Coimbatore" },
|
|
{ location: "Salem" },
|
|
{ location: "Chennai" },
|
|
{ location: "Namakkal" }
|
|
];
|
|
|
|
const filteredData2 = Array.isArray(ShopLocationLists)
|
|
? ShopLocationLists?.filter((item) => item?.location?.toLowerCase()?.includes(Searchquery?.toLowerCase()))
|
|
: [];
|
|
|
|
return (
|
|
<div>
|
|
<div className="PozoPublicNavbarMaster">
|
|
{loading && <FullPageLoader />}
|
|
|
|
<div className="PozoPublicNavbar">
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
columnGap: "1.5rem",
|
|
fontSize: "22px",
|
|
}}
|
|
>
|
|
<RxHamburgerMenu
|
|
className="hambicon"
|
|
onClick={toggleHamburger}
|
|
style={{ position: "relative" }}
|
|
/>
|
|
<img src={pozologo} alt="pozologo" onClick={GotoHomepage} />
|
|
</div>
|
|
|
|
{/* Collapse Menu code area */}
|
|
{!sidedrawer && (
|
|
<div className="CollapseMenu">
|
|
{/* Header */}
|
|
<div className="CollapseMenu-header">
|
|
<div className="CollapseMenu-user">
|
|
<PiUserCircleLight size={38} />
|
|
<div>
|
|
<div className="CollapseMenu-username">Hello, Guest</div>
|
|
<div className="CollapseMenu-subtext">Sign in to your account</div>
|
|
</div>
|
|
</div>
|
|
<div className="CollapseMenu-close" onClick={toggleHamburger}>
|
|
<AiOutlineClose size={14} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="CollapseMenu-divider" />
|
|
|
|
<div className="collapse-button" onClick={toggleCollapse}>
|
|
Categories
|
|
{isCollapsed ? <LuChevronUpCircle style={{ strokeWidth: "1.5" }} /> : <LuChevronDownCircle style={{ strokeWidth: "1.5" }} />}
|
|
</div>
|
|
<div className={`collapse ${isCollapsed ? "collapsed" : "expanded"}`}>
|
|
<div className="sidedrawer-content">
|
|
{["Restaurant", "Electrical, Electronic & Computers", "Bakery", "Groceries", "Lifestyle & Fashion", "Medicines & Pharma equips", "Dairy Delights"].map((cat, idx) => (
|
|
<div className="sidedrawer-direct" key={idx}>
|
|
<img src={samplepic} alt={cat} />
|
|
<p>{cat}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="CollapseMenu-divider" />
|
|
|
|
{/* Booking */}
|
|
<div className="collapse-button" onClick={toggleCollapsebook}>
|
|
Booking
|
|
{isCollapsedbook ? <LuChevronUpCircle style={{ strokeWidth: "1.5" }} /> : <LuChevronDownCircle style={{ strokeWidth: "1.5" }} />}
|
|
</div>
|
|
<div className={`collapse ${isCollapsedbook ? "collapsed" : "expanded"}`}>
|
|
<div className="sidedrawer-content">
|
|
{["Restaurant", "Electrical, Electronic & Computers"].map((cat, idx) => (
|
|
<div className="sidedrawer-direct" key={idx}>
|
|
<img src={samplepic} alt={cat} />
|
|
<p>{cat}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="CollapseMenu-divider" />
|
|
|
|
{/* Quick Links */}
|
|
<div className="trackMyOrder" onClick={toStore}>Stores</div>
|
|
<div className="trackMyOrder" onClick={toFavList}>Favourite List</div>
|
|
<div className="trackMyOrder">Track My Order</div>
|
|
|
|
<div className="CollapseMenu-divider" />
|
|
|
|
{/* Login Button */}
|
|
<div className="CollapseMenu-loginbtn" onClick={toSignIn}>Login / Sign Up</div>
|
|
</div>
|
|
)}
|
|
|
|
{PageName != "checkout" && <div className="searchbar">
|
|
<div>
|
|
<div className="locatmark" onClick={toggleLocationDropdown}>
|
|
<HiLocationMarker style={{ color: "#E33333", fontSize: "25px", flexShrink: 0 }} />
|
|
<div className="location-text-group">
|
|
<div className="location-main-title">
|
|
Location <FaChevronDown style={{ fontSize: "10px", marginLeft: "4px", color: "#666" }} />
|
|
</div>
|
|
<div className="location-sub-text" title={currentLocation}>
|
|
{currentLocation}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{locationDropdown && (
|
|
<div
|
|
className={`location-dropdown ${dropdownClosing ? "closing" : ""}`}
|
|
ref={dropdownRef}>
|
|
|
|
<div className="locationSearch">
|
|
<p className="locationTitle"> Select Delivery location <span>
|
|
<IoMdClose onClick={toggleLocationDropdown} style={{
|
|
cursor: "pointer",
|
|
backgroundColor: "#f0f5ff",
|
|
height: "18px",
|
|
width: "18px"
|
|
}} />
|
|
</span></p>
|
|
|
|
{/* SEARCH INPUT FOR LOCATION */}
|
|
<div className="serachMap">
|
|
<form style={{
|
|
width: "100%",
|
|
padding: "0px 5px",
|
|
borderRadius: "6px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
backgroundColor: "#F0F5FF",
|
|
}} className="search-bar" onSubmit={handleSubmitLocation}>
|
|
<FiSearch color="rgb(227,51,51)" />
|
|
<input
|
|
type="text"
|
|
value={Searchquery}
|
|
onChange={handleChange}
|
|
onClick={handleInputClick}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter")
|
|
handlerSearchFuntion();
|
|
}}
|
|
placeholder="Search Your Location..."
|
|
/>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
{/* location list in search bar */}
|
|
{showLocationList && (
|
|
<div className="locationListDropDown">
|
|
{filteredData2.length > 0 ? filteredData2.map((item, idx) =>
|
|
(
|
|
<div className="locationList" key={idx} onClick={() => selectLocation(item?.location)}>
|
|
{item?.location}
|
|
</div>
|
|
))
|
|
: <p>Location Not Found</p>}
|
|
</div>
|
|
)}
|
|
|
|
|
|
{/* DETECT CURRENT LOCATION */}
|
|
<div className="DetectLocation" onClick={handleTrackCurrentLocation}>
|
|
<span>
|
|
<MdOutlineMyLocation size={15} /> Track Current Location
|
|
</span>
|
|
<div>Using ( GPS )</div>
|
|
</div>
|
|
|
|
|
|
{/* STORE LOCATION CODE AREA */}
|
|
<div className="StoreLocationHeader">
|
|
<p> # Store Location</p>
|
|
<span> <IoIosArrowDown size={16} /></span>
|
|
</div>
|
|
|
|
|
|
<div className="StoreLocationMain">
|
|
{StoreLocation.map((e, idx) => {
|
|
return (
|
|
<div className="ShopLocationName" key={idx} onClick={() => selectLocation(e?.ShopLocationName)}>
|
|
<span><HiLocationMarker size={15} color="rgb(227,51,51)" /></span>
|
|
<div>
|
|
{e?.ShopLocationName}
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* RECENT LOCATION CODE HERE */}
|
|
<div className="RecentLocation">
|
|
<div style={{
|
|
backgroundColor: "#FFF", width: "100%",
|
|
position: "sticky", top: "0", padding: "5px 0px"
|
|
}}>
|
|
<p style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
padding: "2px 5px ",
|
|
columnGap: "5px"
|
|
}}>
|
|
<MdOutlineWatchLater size={14} /> Recent Search</p>
|
|
</div>
|
|
{(Locationdata?.map((e, idx) => (
|
|
<div className="RecentLocation-Area" key={idx} onClick={() => selectLocation(e?.ShopLocation)}>
|
|
<div>
|
|
<p style={{
|
|
borderRadius: "4px", padding: "2px 10px",
|
|
backgroundColor: "rgb(255, 240, 240)",
|
|
color: "rgb(227,51,51)"
|
|
}}>
|
|
{e?.ShopLocation}
|
|
<span
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
deleteRecentSearch(e?.ShopLocation);
|
|
}}> ⨉</span></p>
|
|
</div>
|
|
</div>
|
|
)))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div style={{ color: "#616161" }}> | </div>
|
|
<div>
|
|
<PozoPublicSearch />
|
|
</div>
|
|
</div>}
|
|
|
|
<div className="NavIcons">
|
|
<div className="formob">
|
|
<div className="cart" onClick={navigatetoCart}>
|
|
<PiShoppingCartLight
|
|
className="carticon"
|
|
style={{
|
|
fontSize: "26px",
|
|
fontWeight: "200",
|
|
strokeWidth: "2",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
ref={ref}
|
|
className="login-container"
|
|
onClick={handleLoginClick}
|
|
>
|
|
<div className="login">
|
|
<div className="login-btn" onMouseEnter={() => { setProfile(true) }}>
|
|
Login
|
|
<FaChevronDown
|
|
style={{
|
|
fontSize: "13px",
|
|
fontWeight: "100",
|
|
strokeWidth: "2",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{profile && (
|
|
<div
|
|
className={`profile-details ${profile ? "open" : "closed"
|
|
}`}
|
|
>
|
|
<div className="profile-content">
|
|
<div className="profile-header">
|
|
<span className="new-cust-text">New customer?</span>
|
|
<span className="signup-link" onClick={toSignIn}>Sign Up</span>
|
|
</div>
|
|
<div className="profile-list">
|
|
<div className="profile-items" onClick={toMyProfile}>
|
|
<PiUserCircleLight className="profile-item-icon" />
|
|
<span>My Profile</span>
|
|
</div>
|
|
<div className="profile-items" onClick={toFavOrder}>
|
|
<CiViewList className="profile-item-icon" />
|
|
<span>My Orders</span>
|
|
</div>
|
|
<div className="profile-items" onClick={toFavShop}>
|
|
<PiStorefrontLight className="profile-item-icon" />
|
|
<span>Fav Shop</span>
|
|
</div>
|
|
<div className="profile-items" onClick={toFavList}>
|
|
<GoHeart className="profile-item-icon" />
|
|
<span>Fav List</span>
|
|
</div>
|
|
<div className="profile-items" onClick={toStore}>
|
|
<PiStorefrontLight className="profile-item-icon" />
|
|
<span>Stores</span>
|
|
</div>
|
|
</div>
|
|
<div className="loginout-btn" onClick={toSignIn}> Sign In / Login </div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PozoPublicNavbar;
|