Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 1eec64c6 by jaymehta
Options

Merge branch 'master' of https://git.logicloop.io/jaymehta/zango-frontend

2 parents 29ac3b39 2b190a50
Inline Side-by-side
Showing 2 changed files with 124 additions and 12 deletions
components/layout/Header.js
......@@ -58,12 +58,113 @@ const Header = () => {
<Image loading="lazy" layout="fill" alt="" className="image img-fluid" src="/images/main-logo.svg" />
</span>
</Navbar.Brand>
{loadedUser && loadedUser.id ? (
<div className="top-btn hide-on-desktop">
<div className="logout-bk">
<a onClick={toggleGridViewDropdown} className="user-icon">
<span className="image-container user-pic">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
</span>
<span className="image-container arrow-d">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user-arrow-down.svg" />
</span>
</a>
{/* <p>{loadedUser.phone}</p> */}
<div className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
<div className="user-info">
<div className="pic">
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/user.svg" />
</span>
</div>
<div className="">
<div className="name">John Doe</div>
<div className="view-profile"><a href="">View Profile</a></div>
</div>
</div>
<div className="user-item">
<ul>
<li>
<a href="">
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-booking.svg" />
</span>
My Enquires
</a>
</li>
<li>
<a href="/user/wishlist">
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-wishlist.svg" />
</span>
My Wishlist
</a>
</li>
<li>
<a href="/gift-card">
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-gift-card.svg" />
</span>
My Gift Card
</a>
</li>
<li>
<a onClick={async () => {
signOut({ redirect: false });
await router.push("/");
window.location.reload();
}}>
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/logout.svg" />
</span>
Log out
</a>
</li>
</ul>
</div>
</div>
</div>
{/* <Button
onClick={async () => {
signOut({ redirect: false });
await router.push("/");
window.location.reload();
}}
className="me-3"
variant="primary"
>
Log out
</Button> */}
</div>
) : (
<div className="top-btn hide-on-desktop asdasd">
{/* <Button
onClick={() => {
router.push("/signup/user");
}}
className="me-3"
variant="primary"
>
Sign Up
</Button>
<Button
onClick={() => {
router.push("/login/user");
}}
className=""
variant="primary"
>
Log In
</Button> */}
</div>
)}
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" navbarScroll>
<ActiveLink href="/user/wishlist" activeClassName="active">
{/* <ActiveLink href="/user/wishlist" activeClassName="active">
<a className="nav-link ">Wishlist</a>
</ActiveLink>
</ActiveLink> */}
<ActiveLink href="/blog" activeClassName="active">
<a className="nav-link ">Blogs</a>
</ActiveLink>
......@@ -150,7 +251,7 @@ const Header = () => {
</Form>
{/* {console.log(user.id)} */}
{loadedUser && loadedUser.id ? (
<div className="top-btn">
<div className="top-btn hide-on-mobile">
<div className="logout-bk">
<a onClick={toggleGridViewDropdown} className="user-icon">
<span className="image-container user-pic">
......@@ -180,11 +281,11 @@ const Header = () => {
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-booking.svg" />
</span>
My Bookings
My Enquires
</a>
</li>
<li>
<a href="">
<a href="/user/wishlist">
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-wishlist.svg" />
</span>
......@@ -192,7 +293,7 @@ const Header = () => {
</a>
</li>
<li>
<a href="">
<a href="/gift-card">
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-gift-card.svg" />
</span>
......@@ -200,11 +301,15 @@ const Header = () => {
</a>
</li>
<li>
<a href="">
<a onClick={async () => {
signOut({ redirect: false });
await router.push("/");
window.location.reload();
}}>
<span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/logout.svg" />
</span>
Logout
Log out
</a>
</li>
</ul>
......@@ -212,7 +317,7 @@ const Header = () => {
</div>
</div>
<Button
{/* <Button
onClick={async () => {
signOut({ redirect: false });
await router.push("/");
......@@ -222,10 +327,10 @@ const Header = () => {
variant="primary"
>
Log out
</Button>
</Button> */}
</div>
) : (
<div className="top-btn">
<div className="top-btn hide-on-mobiles asdasd">
<Button
onClick={() => {
router.push("/signup/user");
......
styles/globals.css
......@@ -2987,6 +2987,7 @@ header .top-btn .user-icon .image-container.arrow-d {
color: #000000;
font-size: 14px;
padding: 0.5rem 0;
cursor: pointer;
}
.user-item ul li a .image-container {
margin-right: 0.5rem;
......@@ -4065,6 +4066,12 @@ footer .footer-link ul {
.modal-01-session .closeIcon .closeIconBtn img {
width: 20px;
}
.top-btn.hide-on-desktop {
margin: 0;
position: absolute;
right: 20vw;
top: 13px;
}
@media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem;
......@@ -4139,7 +4146,7 @@ footer .footer-link ul {
}
}
@media (min-width: 768px) {
@media (min-width: 992px) {
.hide-on-desktop {
display: none !important;
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!