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 = () => { ...@@ -58,12 +58,113 @@ const Header = () => {
<Image loading="lazy" layout="fill" alt="" className="image img-fluid" src="/images/main-logo.svg" /> <Image loading="lazy" layout="fill" alt="" className="image img-fluid" src="/images/main-logo.svg" />
</span> </span>
</Navbar.Brand> </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.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll"> <Navbar.Collapse id="navbarScroll">
<Nav className=" my-2 my-lg-0" 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> <a className="nav-link ">Wishlist</a>
</ActiveLink> </ActiveLink> */}
<ActiveLink href="/blog" activeClassName="active"> <ActiveLink href="/blog" activeClassName="active">
<a className="nav-link ">Blogs</a> <a className="nav-link ">Blogs</a>
</ActiveLink> </ActiveLink>
...@@ -150,7 +251,7 @@ const Header = () => { ...@@ -150,7 +251,7 @@ const Header = () => {
</Form> </Form>
{/* {console.log(user.id)} */} {/* {console.log(user.id)} */}
{loadedUser && loadedUser.id ? ( {loadedUser && loadedUser.id ? (
<div className="top-btn"> <div className="top-btn hide-on-mobile">
<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">
...@@ -180,11 +281,11 @@ const Header = () => { ...@@ -180,11 +281,11 @@ const Header = () => {
<span className="image-container"> <span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-booking.svg" /> <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-booking.svg" />
</span> </span>
My Bookings My Enquires
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="/user/wishlist">
<span className="image-container"> <span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-wishlist.svg" /> <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-wishlist.svg" />
</span> </span>
...@@ -192,7 +293,7 @@ const Header = () => { ...@@ -192,7 +293,7 @@ const Header = () => {
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a href="/gift-card">
<span className="image-container"> <span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-gift-card.svg" /> <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/my-gift-card.svg" />
</span> </span>
...@@ -200,11 +301,15 @@ const Header = () => { ...@@ -200,11 +301,15 @@ const Header = () => {
</a> </a>
</li> </li>
<li> <li>
<a href=""> <a onClick={async () => {
signOut({ redirect: false });
await router.push("/");
window.location.reload();
}}>
<span className="image-container"> <span className="image-container">
<Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/logout.svg" /> <Image layout="fill" priority alt="" className="image img-fluid" src="/images/icons/logout.svg" />
</span> </span>
Logout Log out
</a> </a>
</li> </li>
</ul> </ul>
...@@ -212,7 +317,7 @@ const Header = () => { ...@@ -212,7 +317,7 @@ const Header = () => {
</div> </div>
</div> </div>
<Button {/* <Button
onClick={async () => { onClick={async () => {
signOut({ redirect: false }); signOut({ redirect: false });
await router.push("/"); await router.push("/");
...@@ -222,10 +327,10 @@ const Header = () => { ...@@ -222,10 +327,10 @@ const Header = () => {
variant="primary" variant="primary"
> >
Log out Log out
</Button> </Button> */}
</div> </div>
) : ( ) : (
<div className="top-btn"> <div className="top-btn hide-on-mobiles asdasd">
<Button <Button
onClick={() => { onClick={() => {
router.push("/signup/user"); router.push("/signup/user");
......
styles/globals.css
...@@ -2987,6 +2987,7 @@ header .top-btn .user-icon .image-container.arrow-d { ...@@ -2987,6 +2987,7 @@ header .top-btn .user-icon .image-container.arrow-d {
color: #000000; color: #000000;
font-size: 14px; font-size: 14px;
padding: 0.5rem 0; padding: 0.5rem 0;
cursor: pointer;
} }
.user-item ul li a .image-container { .user-item ul li a .image-container {
margin-right: 0.5rem; margin-right: 0.5rem;
...@@ -4065,6 +4066,12 @@ footer .footer-link ul { ...@@ -4065,6 +4066,12 @@ footer .footer-link ul {
.modal-01-session .closeIcon .closeIconBtn img { .modal-01-session .closeIcon .closeIconBtn img {
width: 20px; width: 20px;
} }
.top-btn.hide-on-desktop {
margin: 0;
position: absolute;
right: 20vw;
top: 13px;
}
@media (min-width: 992px) { @media (min-width: 992px) {
.navbar-expand-lg .navbar-nav .nav-link { .navbar-expand-lg .navbar-nav .nav-link {
margin: 0 2rem; margin: 0 2rem;
...@@ -4139,7 +4146,7 @@ footer .footer-link ul { ...@@ -4139,7 +4146,7 @@ footer .footer-link ul {
} }
} }
@media (min-width: 768px) { @media (min-width: 992px) {
.hide-on-desktop { .hide-on-desktop {
display: none !important; 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!