Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 6ddb1e0d by Ravindra Kanojiya
Options

updated ui

1 parent 564e5ed2
Inline Side-by-side
Showing 5 changed files with 110 additions and 4 deletions
components/layout/Generics/GenericHeader.js
...@@ -4,7 +4,28 @@ import { useRouter } from "next/router"; ...@@ -4,7 +4,28 @@ import { useRouter } from "next/router";
import { signOut } from "next-auth/react"; import { signOut } from "next-auth/react";
import { UserOutlined } from '@ant-design/icons'; import { UserOutlined } from '@ant-design/icons';
import { ToastContainer } from "react-toastify"; import { ToastContainer } from "react-toastify";
import { useEffect, useRef, useState } from "react";
export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, adminName, adminEmail, isRoute }) => { export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, adminName, adminEmail, isRoute }) => {
const innersBoxRef = useRef(null); // Ref to hold reference to inner-box div
const [isGridViewOpen, setIsGridViewOpen] = useState(false);
// Function to toggle the dropdown visibility
const toggleGridViewDropdown = () => {
setIsGridViewOpen(!isGridViewOpen); // Toggle the state
};
// Function to handle click outside
const handleClickOutside = event => {
if (innersBoxRef.current && !innersBoxRef.current.contains(event.target)) {
setIsGridViewOpen(false); // Close if clicked outside
}
};
// Effect to add click event listener when component mounts
useEffect(() => {
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
const router = useRouter(); const router = useRouter();
const VenderDetails = () => { const VenderDetails = () => {
return <div> return <div>
...@@ -42,6 +63,7 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin ...@@ -42,6 +63,7 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
} }
</div> </div>
} }
return ( return (
<div <div
className="bg-light px-5 d-flex align-items-center justify-content-between w-100" className="bg-light px-5 d-flex align-items-center justify-content-between w-100"
...@@ -55,6 +77,32 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin ...@@ -55,6 +77,32 @@ export const GenericHeader = ({ venderBusiness, venderEmail, businessLogo, admin
<Image loading="lazy" objectFit="contain" height={50} width={100} alt="" className="" src="/images/main-logo.svg" /> <Image loading="lazy" objectFit="contain" height={50} width={100} alt="" className="" src="/images/main-logo.svg" />
<div className="d-flex align-items-center gap-5"> <div className="d-flex align-items-center gap-5">
<div className="notification-row top-btn">
<a onClick={toggleGridViewDropdown}>
<img src="/images/icons/notification.svg" alt="" />
</a>
<div ref={innersBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
<div className="notification-inner">
<div className="head">Notifications</div>
<div className="inner">
<div className="disc">Your Account is been verified you
can start adding activities now.</div>
<div className="link"><a href="">Add Activity</a></div>
</div>
<div className="inner">
<div className="disc">Your Account is been verified you
can start adding activities now.</div>
<div className="link"><a href="">Add Activity</a></div>
</div>
<div className="inner">
<div className="disc">Your Account is been verified you
can start adding activities now.</div>
<div className="link"><a href="">Add Activity</a></div>
</div>
</div>
</div>
</div>
{isRoute === 'vendor' && <VenderDetails />} {isRoute === 'vendor' && <VenderDetails />}
{isRoute === 'admin' && <AdminDetails />} {isRoute === 'admin' && <AdminDetails />}
<button <button
......
components/layout/Header.js
...@@ -90,7 +90,7 @@ const Header = () => { ...@@ -90,7 +90,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" ref={logoutBkRef}> <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" />
...@@ -100,7 +100,7 @@ const Header = () => { ...@@ -100,7 +100,7 @@ const Header = () => {
</span> </span>
</a> </a>
{/* <p>{loadedUser.phone}</p> */} {/* <p>{loadedUser.phone}</p> */}
<div ref={innerBoxRef} className={`inner-box ${isGridViewOpen ? "open" : ""}`}> <div className={`inner-box ${isGridViewOpen ? "open" : ""}`}>
{endUser && ( {endUser && (
<div className="user-info"> <div className="user-info">
<div className="pic"> <div className="pic">
...@@ -288,7 +288,7 @@ const Header = () => { ...@@ -288,7 +288,7 @@ const Header = () => {
<> <>
{endUser && endUser.id ? ( {endUser && endUser.id ? (
<div className="top-btn hide-on-mobile"> <div className="top-btn hide-on-mobile">
<div className="logout-bk" ref={logoutBkRef}> <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" />
......
components/user/MyGiftCard.js
...@@ -74,7 +74,7 @@ const MyGiftCard = () => { ...@@ -74,7 +74,7 @@ const MyGiftCard = () => {
<p className="m-0">${data.attributes.amount}</p> <p className="m-0">${data.attributes.amount}</p>
</div> </div>
{data.attributes.status !== null && <div>{getStatus(data?.attributes?.status)}</div>} {data.attributes.status !== null && <div><Tag color={"warning"}>{"ENQUIRED"}</Tag></div>}
</div> </div>
</div> </div>
</div> </div>
......
public/images/icons/notification.svg 0 → 100644
<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9 0C13.9706 0 18 4.04348 18 9.0314V18H0V9.0314C0 4.04348 4.02944 0 9 0ZM6.5 19H11.5C11.5 20.3807 10.3807 21.5 9 21.5C7.6193 21.5 6.5 20.3807 6.5 19Z" fill="black"/>
</svg>
styles/globals.css
...@@ -564,7 +564,29 @@ header { ...@@ -564,7 +564,29 @@ header {
.searchbar-h .rbt-menu.dropdown-menu.show { .searchbar-h .rbt-menu.dropdown-menu.show {
top: 1.7rem !important; top: 1.7rem !important;
} }
.header-search .rbt-menu.dropdown-menu.show {
overflow-y: scroll; /* Ensure vertical overflow is always visible */
overflow-x: hidden; /* Hide horizontal overflow */
}
/* WebKit browsers (Chrome, Safari) */
.header-search .rbt-menu.dropdown-menu.show::-webkit-scrollbar {
height: 0; /* Hide scrollbar for horizontal overflow */
}
/* For Firefox */
.header-search .rbt-menu.dropdown-menu.show {
scrollbar-width: none; /* Hide scrollbar in Firefox */
}
/* Ensure that the element is still scrollable horizontally */
.header-search .rbt-menu.dropdown-menu.show {
-webkit-overflow-scrolling: touch; /* For smooth scrolling on touch devices */
}
/* .header-search .rbt-menu.dropdown-menu.show {
-ms-overflow-style: none;
scrollbar-width: none;
} */
.searchbar-h { .searchbar-h {
position: relative; position: relative;
width: 100%; width: 100%;
...@@ -4228,6 +4250,39 @@ footer .footer-link ul { ...@@ -4228,6 +4250,39 @@ footer .footer-link ul {
.modal-01-session .modal-content { .modal-01-session .modal-content {
padding: 1rem; padding: 1rem;
} }
.notification-row {
position: relative;
z-index: 999;
margin-top: 7px;
}
.notification-inner .inner {
padding: 0.5rem 1rem;
border-bottom: 1px solid #f0f0f0;
}
.notification-inner .inner:last-child {
border: 0;
/* padding: 0; */
}
.notification-inner .head {
font-family: "Sofia Pro Bold";
font-size: 16px;
line-height: normal;
padding: 1rem 1rem 0.5rem;
}
.notification-inner .disc {
font-size: 12px;
line-height: 16px;
padding-bottom: 0.5rem;
}
.notification-inner .link {
text-align: right;
}
.notification-inner .link a {
font-family: "Sofia Pro Bold";
font-size: 12px;
line-height: normal;
color: #0070bd;
}
@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;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!