Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 6c6a3b27 by jaymehta
Options

.

1 parent e579bcf2
Inline Side-by-side
Showing 1 changed file with 26 additions and 27 deletions
components/layout/Header.js
...@@ -50,7 +50,7 @@ const Header = () => { ...@@ -50,7 +50,7 @@ const Header = () => {
if (endUser) dispatch(getWishlists({ endUser: endUser.id })); if (endUser) dispatch(getWishlists({ endUser: endUser.id }));
}, [endUser]); }, [endUser]);
// console.log("endUser", endUser); // console.log("endUser", endUser);
//// ////
// const [isGridViewOpen, setIsGridViewOpen] = useState(false); // const [isGridViewOpen, setIsGridViewOpen] = useState(false);
const innerBoxRef = useRef(null); // Ref to hold reference to inner-box div const innerBoxRef = useRef(null); // Ref to hold reference to inner-box div
...@@ -62,22 +62,17 @@ const Header = () => { ...@@ -62,22 +62,17 @@ const Header = () => {
}; };
// Function to handle click outside // Function to handle click outside
const handleClickOutside = (event) => { const handleClickOutside = event => {
if ( if (logoutBkRef.current && !logoutBkRef.current.contains(event.target) && innerBoxRef.current && !innerBoxRef.current.contains(event.target)) {
logoutBkRef.current &&
!logoutBkRef.current.contains(event.target) &&
innerBoxRef.current &&
!innerBoxRef.current.contains(event.target)
) {
setIsGridViewOpen(false); // Close if clicked outside setIsGridViewOpen(false); // Close if clicked outside
} }
}; };
// Effect to add click event listener when component mounts // Effect to add click event listener when component mounts
useEffect(() => { useEffect(() => {
document.addEventListener('mousedown', handleClickOutside); document.addEventListener("mousedown", handleClickOutside);
return () => { return () => {
document.removeEventListener('mousedown', handleClickOutside); document.removeEventListener("mousedown", handleClickOutside);
}; };
}, []); }, []);
...@@ -93,7 +88,7 @@ const Header = () => { ...@@ -93,7 +88,7 @@ const Header = () => {
</Navbar.Brand> </Navbar.Brand>
{loadedUser && loadedUser.id ? ( {loadedUser && loadedUser.id ? (
<div className="top-btn hide-on-desktop"> <div className="top-btn hide-on-desktop">
<div className="logout-bk" > <div className="logout-bk">
<a onClick={toggleGridViewDropdown} className="user-icon"> <a onClick={toggleGridViewDropdown} className="user-icon">
<span className="image-container user-pic"> <span className="image-container user-pic">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" /> <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
...@@ -104,19 +99,21 @@ const Header = () => { ...@@ -104,19 +99,21 @@ const Header = () => {
</a> </a>
{/* <p>{loadedUser.phone}</p> */} {/* <p>{loadedUser.phone}</p> */}
<div ref={logoutBkRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}> <div ref={logoutBkRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
<div className="user-info"> {endUser && (
<div className="pic"> <div className="user-info">
<span className="image-container"> <div className="pic">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" /> <span className="image-container">
</span> <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
</div> </span>
<div className=""> </div>
<div className="name">{endUser.attributes.name}</div> <div className="">
<div className="view-profile"> <div className="name">{endUser.attributes.name}</div>
<a href="/user/profile">View Profile</a> <div className="view-profile">
<a href="/user/profile">View Profile</a>
</div>
</div> </div>
</div> </div>
</div> )}
<div className="user-item"> <div className="user-item">
<ul> <ul>
<li> <li>
...@@ -306,12 +303,14 @@ const Header = () => { ...@@ -306,12 +303,14 @@ const Header = () => {
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" /> <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
</span> </span>
</div> </div>
{endUser && <div className=""> {endUser && (
<div className="name">{endUser.attributes.name}</div> <div className="">
<div className="view-profile"> <div className="name">{endUser.attributes.name}</div>
<a href="/user/profile">View Profile</a> <div className="view-profile">
<a href="/user/profile">View Profile</a>
</div>
</div> </div>
</div>} )}
</div> </div>
<div className="user-item"> <div className="user-item">
<ul> <ul>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!