reza changed navbar

temp
Reza_ashrafi 3 years ago
parent 5c7046df04
commit d4a7e5b8c7
  1. 180
      src/components/Navbar/index.js
  2. 5
      src/views/404/index.js
  3. 2
      src/views/AR/index.js
  4. 4
      src/views/Activation/index.js
  5. 2
      src/views/Contact/index.js
  6. 4
      src/views/Faq/index.js
  7. 2
      src/views/Home/Desktop/index.js
  8. 2
      src/views/Orders/index.js
  9. 2
      src/views/Product/index.js
  10. 2
      src/views/Products/index.js
  11. 2
      src/views/ShoppingCart/index.js
  12. 2
      src/views/Video/index.js
  13. 2
      src/views/VideoDisplay/index.js

@ -11,7 +11,7 @@ import OverLayer from "../OverLayer";
import cartIcon from "./cart-blue.svg"; import cartIcon from "./cart-blue.svg";
// import whiteCartIcon from "./white-cart-icon.svg"; // import whiteCartIcon from "./white-cart-icon.svg";
// import profileIcon from "./dark-crimson-profile-icon.svg"; // import profileIcon from "./dark-crimson-profile-icon.svg";
// import searchIcon from "./dark-crimson-search-box.svg"; import searchIcon from "./dark-crimson-search-box.svg";
// import lightGraySearchIcon from "./light-gray-search-box.svg"; // import lightGraySearchIcon from "./light-gray-search-box.svg";
import darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg"; import darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg";
// import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg"; // import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg";
@ -40,24 +40,14 @@ function Navbar({
isMobile, isMobile,
isLogin, isLogin,
headerOptions, headerOptions,
loginBtn,
menuItems,
category,
searchBox,
topHeader,
bottomHeader,
productCategoryTextColor,
menuItemsColor,
}) { }) {
const navigation = useNavigate(); const navigation = useNavigate();
const { logo, hamburgerMenu, qr, shown, menu, title, back, bookmark } = const { logo, hamburgerMenu, qr, shown, menu, title, back, bookmark } =
headerOptions; headerOptions;
const [overLayer, setOverLayer] = useState(false);
const [top, setTop] = useState(false); const [top, setTop] = useState(false);
const [search, setSearch] = useState(null); const [search, setSearch] = useState(null);
const [drawerOpen, setDrawerOpen] = useState(false); const [drawerOpen, setDrawerOpen] = useState(false);
const [desktopMiddleFix, setDesktopMiddleFix] = useState(false);
const [desktopEndTransform, setDesktopEndTransform] = useState(false);
useEffect(() => { useEffect(() => {
if (window.scrollY === 0) { if (window.scrollY === 0) {
@ -204,112 +194,78 @@ function Navbar({
{/* portrait end */} {/* portrait end */}
</div> </div>
) : ( ) : (
<header className={`rounded-b-md w-full bg-transparent pb-1`}> <header
<div className="flex flex-row justify-between items-center px-20 border-b border-gray-200 border-solid py-4 "> className={`rounded-b-md w-full border-b border-gray-200 border-solid fixed top-0 right-0 shadow-md bg-white z-20`}
<div className="divide-x flex flex-row transform gap-4"> >
{/* <span className="text-sm font-normal text-blue52"> <div className={`w-11/12 mx-auto flex flex-col`}>
انتخاب کشور <div className="w-full flex flex-row items-center py-3 relative justify-between h-ful">
</span> */} <div className="flex flex-row items-center">
<Link to="/orders" className="text-sm font-normal text-blue52"> <Link
پیگیری سفارش to="/"
</Link> className="flex flex-row items-center text-2xl font-medium"
</div> >
<div className="flex flex-row gap-5" style={{ direction: "ltr" }}> <img src={logoIcon} className="w-8 relative bottom-1 ml-1" />
{!isLogin && ( دانوین
<Link to="/signup" className="text-sm font-semibold text-blue52">
ورود و ثبت نام
</Link>
)}
<Link to="#" className="text-sm font-normal text-blue52">
شکایات&nbsp;
</Link>
</div>
</div>
<div
className={`w-full flex flex-col z-20 ${desktopMiddleFix ? "" : ""}`}
>
<div className="w-full flex flex-row items-center h-full relative bg-white justify-between py-5 px-20 z-20 border-b border-gray-200 border-solid ">
<div className="ml-10">
<Link to="/" className="flex flex-row items-center">
<img src={logoIcon} className="w-6" />
<span
className={`font-bold text-3xl text-blue52 transform translate-y-1 mr-2`}
>
دانوین
</span>
</Link> </Link>
<ul className="flex flex-row list-none items-center relative top-0.5 mr-6">
{pages.map((page, index) => (
<li key={index}>
<Link
to={page.link}
className="text-tiny font-medium text-blue5F py-2 px-4 mx-4"
>
{page.name}
</Link>
</li>
))}
</ul>
</div> </div>
<div {overLayer && (
className="hidden lg:flex items-center w-3/5 justify-around flex-1 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" <div
style={{ maxWidth: "calc(100vw / 2)" }} className="z-30 w-screen h-full fixed top-0 right-0 backdrop-filter blur-sm bg-opacity-60 bg-gray-600"
></div> onClick={() => setOverLayer(false)}
<OverLayer /> >
<div <div className="relative w-full h-full">
className="flex flex-col w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 rounded-md" <div
style={{ maxWidth: "calc(100vw / 3)" }} className="flex flex-col w-full absolute left-1/2 top-8 transform -translate-x-1/2 z-50 rounded-md"
> style={{ maxWidth: "calc(100vw / 3)" }}
<Search onChange={(val) => setSearch(val)} /> onClick={(e) => e.stopPropagation()}
{search && <SearchResult text={search} setText={setSearch} />} >
</div> <Search onChange={(val) => setSearch(val)} />
{isLogin && ( {search && <SearchResult text={search} setText={setSearch} />}
<div className="flex justify-end items-center gap-4"> </div>
<Link to="/cart" className="relative"> </div>
<img src={cartIcon} alt="" className="w-11" />
<span className="absolute -right-2 -top-0.5 w-6 h-6 flex justify-center items-center bg-blue-500 bg-opacity-90 rounded-full text-white text-tiny">
{cartProductsLength}
</span>
</Link>
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
{/* <img src={searchIcon} alt="" className="w-5 h-5 ml-2" /> */}
{/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
</div> </div>
)} )}
</div>
<div <div className="flex flex-row items-center">
className={`flex items-center relative w-full py-2 px-20 border-b border-solid border-gray-200 transform bg-white ${
desktopEndTransform ? "" : ""
}`}
style={
{
// transition: "all 0.3s",
}
}
>
<div className="ml-10 flex flex-row items-center">
<img <img
src={darkCrimsonHamburgerMenu} src={searchIcon}
alt="" alt=""
className="w-8 transform translate-y-1 ml-2" className="w-7 ml-3 cursor-pointer"
onClick={() => setOverLayer(true)}
/> />
{/* <img src={whiteHamburgerMenu} alt="" className="w-3 h-3" /> */} {isLogin && (
<span className={`text-sm text-blue52 ${productCategoryTextColor}`}> <div className="flex justify-end items-center gap-4">
دسته بندی کالاها &nbsp;&nbsp; <Link to="/cart" className="relative">
</span> <img src={cartIcon} alt="" className="w-8" />
</div> <span className="absolute -right-2 -top-0.5 w-4 p-2.5 h-4 flex justify-center items-center bg-green-700 bg-opacity-100 rounded-full text-white text-xs">
<div {cartProductsLength}
className="flex items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2" </span>
style={{ maxWidth: "calc(100vw / 2)" }} </Link>
> {/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
{/* {menuItems.map((item, index) => (
<a
href="#"
className={`text-sm text-blue52 ${menuItemsColor}`}
key={index}
>
{item}
</a>
))} */}
{pages.map((item, index) => ( {/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
</div>
)}
{1 && (
<Link <Link
to={item.link} to="/signup"
className={`text-sm text-blue52 ${menuItemsColor} hover:text-blueC0`} className="bg-blueC0 text-white rounded-md px-4 py-3 text-sm mr-7 hover:bg-opacity-90 shadow-sm"
key={"nav" + index}
> >
{item.name} ورود یا ثبت نام
</Link> </Link>
))} )}
</div> </div>
</div> </div>
</div> </div>
@ -322,7 +278,9 @@ const mapStateToProps = (state) => ({
isMobile: state.publicApi.isMobile, isMobile: state.publicApi.isMobile,
headerOptions: state.publicApi.headerOptions, headerOptions: state.publicApi.headerOptions,
isLogin: state.user.status, isLogin: state.user.status,
cartProductsLength: state.userProduct.list?.filter((product) => product.condition < 2)?.length, cartProductsLength: state.userProduct.list?.filter(
(product) => product.condition < 2
)?.length,
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
@ -333,18 +291,10 @@ export default connect(mapStateToProps, mapDispatchToProps)(Navbar);
Navbar.defaultProps = { Navbar.defaultProps = {
pages: [ pages: [
{
link: "/",
name: "خانه",
},
{ {
link: "/products", link: "/products",
name: "محصولات", name: "محصولات",
}, },
{
link: "/filter",
name: "دسته بندی ها",
},
{ {
link: "/contact-us", link: "/contact-us",
name: "تماس با ما", name: "تماس با ما",

@ -9,8 +9,7 @@ function NotFound({ headerOptions, setHeaderOptions }) {
}, []); }, []);
return ( return (
<div <div
className="w-full flex h-full transform justify-center items-center flex-col bg-transparent px-4" className="w-full flex h-screen transform justify-center items-center flex-col bg-transparent px-4"
style={{ height: "calc(100vh - 160px)" }}
> >
<h1 <h1
className="dark:text-white text-5xl font-semibold" className="dark:text-white text-5xl font-semibold"
@ -19,7 +18,7 @@ function NotFound({ headerOptions, setHeaderOptions }) {
404 404
</h1> </h1>
<img src={notFoundImage} alt="404" className="mt-10" /> <img src={notFoundImage} alt="404" className="mt-10" />
<p className="text-base dark:text-white mt-12"> <p className="text-base dark:text-white mt-12 leading-7">
وای!! وای!!
<br /> <br />
صفحه ای که بدنبال آن بودهاید دیگر وجود ندارد :( صفحه ای که بدنبال آن بودهاید دیگر وجود ندارد :(

@ -12,7 +12,7 @@ function AR({ getArList, arList, headerOptions, setHeaderOptions }) {
}, []); }, []);
return ( return (
<div className="flex flex-col flex-1 gap-4 px-4"> <div className="flex flex-col flex-1 gap-4 px-4 lg:w-1/2 lg:min-h-screen lg:py-24 lg:mx-auto">
{arList.length > 0 && {arList.length > 0 &&
arList.map((book, index) => <Book book={book} key={index} />)} arList.map((book, index) => <Book book={book} key={index} />)}
</div> </div>

@ -18,8 +18,8 @@ function Activation({ headerOptions, setHeaderOptions, isMobile }) {
}, []); }, []);
return ( return (
<div <div
className="w-full flex h-full flex-col bg-transparent" className="w-full flex h-full flex-col bg-transparent lg:pt-36 lg:pb-24"
style={{ height: "calc(100vh - 145px)" }} // style={{ height: "calc(100vh - 145px)" }}
> >
<Header bg={isMobile ? qrBgImage : desktopQrBgImage} title="فعالسازی کتاب دیجیتال" /> <Header bg={isMobile ? qrBgImage : desktopQrBgImage} title="فعالسازی کتاب دیجیتال" />
<div className="flex-1 flex flex-col justify-between lg:justify-start px-4 lg:w-1/4 lg:mx-auto"> <div className="flex-1 flex flex-col justify-between lg:justify-start px-4 lg:w-1/4 lg:mx-auto">

@ -48,7 +48,7 @@ function Contact({ headerOptions, setHeaderOptions, info, isMobile, isDark }) {
return ( return (
<div <div
className="w-full flex h-auto flex-col bg-transparent" className="w-full flex h-auto flex-col bg-transparent lg:pt-36 lg:pb-24"
// style={{ height: "calc(100vh - 140px)" }} // style={{ height: "calc(100vh - 140px)" }}
> >
<Header <Header

@ -18,8 +18,8 @@ function Faq({ headerOptions, setHeaderOptions, isMobile }) {
}, []); }, []);
return ( return (
<div <div
className="w-full flex h-full flex-col bg-transparent" className="w-full flex h-full flex-col bg-transparent lg:pt-36 lg:pb-24"
style={{ height: "calc(100vh - 145px)" }} // style={{ height: "calc(100vh - 145px)" }}
> >
<Header <Header
bg={isMobile ? faqBgImage : desktopFaqBgImage} bg={isMobile ? faqBgImage : desktopFaqBgImage}

@ -61,7 +61,7 @@ const DesktopHome = ({ grades, getBooks, books, getVODs, listVOD }) => {
},[]); },[]);
return ( return (
<div className="flex flex-col items-center w-11/12 justify-center my-10"> <div className="flex flex-col items-center w-11/12 justify-center py-24">
{/* <Banners {/* <Banners
mainBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/d2a56a4a0c3ce4645bf0b405b0bbf3a29da1cbd3_1642861192.jpg' mainBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/d2a56a4a0c3ce4645bf0b405b0bbf3a29da1cbd3_1642861192.jpg'
midBottomBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/e13aefeda2d3b44db78a92aac9cdc82a9b1650e9_1632230372.jpg?' midBottomBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/e13aefeda2d3b44db78a92aac9cdc82a9b1650e9_1632230372.jpg?'

@ -10,7 +10,7 @@ function Orders({ orders, headerOptions, setHeaderOptions }) {
setHeaderOptions(headerOptions); setHeaderOptions(headerOptions);
}, []); }, []);
return ( return (
<div className="flex flex-col px-4 lg:pb-20"> <div className="flex flex-col px-4 lg:pb-20 lg:pt-24">
{orders.map((order, index) => ( {orders.map((order, index) => (
<Order order={order} key={index} /> <Order order={order} key={index} />
))} ))}

@ -187,7 +187,7 @@ export const Product = ({
</div> </div>
</div> </div>
) : ( ) : (
<div className="flex flex-col items-center justify-center"> <div className="flex flex-col items-center justify-center lg:py-24">
<DesktopProductLayout /> <DesktopProductLayout />
</div> </div>
)} )}

@ -158,7 +158,7 @@ export const Products = ({
</> </>
) : ( ) : (
<div <div
className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3 justify-center`} className={`w-full flex flex-row gap-10 px-5 overflow-y-hidden mt-3 justify-center lg:pt-24 lg:mt-0`}
> >
<div className="w-11/12 flex flex-row gap-5"> <div className="w-11/12 flex flex-row gap-5">
<Sidebar onChange={onChange} /> <Sidebar onChange={onChange} />

@ -165,7 +165,7 @@ function ShoppingCart({
</div> </div>
) : ( ) : (
<div <div
className={`w-11/12 mx-auto flex flex-row relative gap-10 px-5 mt-10 pb-20 ${ className={`w-11/12 mx-auto flex flex-row relative gap-10 px-5 mt-10 pb-20 pt-24 ${
desktopContentTransform ? "top-24" : "" desktopContentTransform ? "top-24" : ""
}`} }`}
> >

@ -109,7 +109,7 @@ function Video({
</div> </div>
</div> </div>
) : ( ) : (
<div className="flex flex-col w-11/12 min-h-screen mx-auto pb-20"> <div className="flex flex-col w-11/12 min-h-screen mx-auto pb-20 pt-24">
<header className="w-full flex flex-row gap-12"> <header className="w-full flex flex-row gap-12">
<div className="w-9/12"> <div className="w-9/12">
<Videos videos={book?.fileIds} /> <Videos videos={book?.fileIds} />

@ -102,7 +102,7 @@ function VideoDisplay({
</div> </div>
</div> </div>
) : ( ) : (
<div className="w-11/12 flex flex-col mb-6 justify-center items-center mx-auto"> <div className="w-11/12 flex flex-col mb-6 justify-center items-center mx-auto pt-24 pb-20">
<div className="w-full flex flex-row justify-between overflow-hidden relative gap-2 mt-4"> <div className="w-full flex flex-row justify-between overflow-hidden relative gap-2 mt-4">
<div className="flex flex-col w-8/12"> <div className="flex flex-col w-8/12">
<JolPlayer <JolPlayer

Loading…
Cancel
Save