reza changed navbar

src/components/Navbar/index.js

@@ -11,7 +11,7 @@ import OverLayer from "../OverLayer";
 import cartIcon from "./cart-blue.svg";
 // import whiteCartIcon from "./white-cart-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 darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg";
 // import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg";
@@ -40,24 +40,14 @@ function Navbar({
   isMobile,
   isLogin,
   headerOptions,
-  loginBtn,
-  menuItems,
-  category,
-  searchBox,
-  topHeader,
-  bottomHeader,
-  productCategoryTextColor,
-  menuItemsColor,
 }) {
   const navigation = useNavigate();
   const { logo, hamburgerMenu, qr, shown, menu, title, back, bookmark } =
     headerOptions;
-
+  const [overLayer, setOverLayer] = useState(false);
   const [top, setTop] = useState(false);
   const [search, setSearch] = useState(null);
   const [drawerOpen, setDrawerOpen] = useState(false);
-  const [desktopMiddleFix, setDesktopMiddleFix] = useState(false);
-  const [desktopEndTransform, setDesktopEndTransform] = useState(false);
 
   useEffect(() => {
     if (window.scrollY === 0) {
@@ -204,112 +194,78 @@ function Navbar({
       {/* portrait end */}
     </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">
-            انتخاب کشور
-          </span> */}
-          <Link to="/orders" className="text-sm font-normal text-blue52">
-            پیگیری سفارش
-          </Link>
-        </div>
-        <div className="flex flex-row gap-5" style={{ direction: "ltr" }}>
-          {!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={`w-11/12 mx-auto flex flex-col`}>
-          <div className="ml-10">
+        <div className="w-full flex flex-row items-center py-3 relative justify-between h-ful">
-            <Link to="/" className="flex flex-row items-center">
+          <div className="flex flex-row items-center">
-              <img src={logoIcon} className="w-6" />
+            <Link
-              <span
+              to="/"
-                className={`font-bold text-3xl text-blue52 transform translate-y-1 mr-2`}
+              className="flex flex-row items-center text-2xl font-medium"
             >
+              <img src={logoIcon} className="w-8 relative bottom-1 ml-1" />
               دانوین
-              </span>
             </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>
+          {overLayer && (
             <div
-            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"
+              className="z-30 w-screen  h-full fixed top-0 right-0 backdrop-filter blur-sm bg-opacity-60 bg-gray-600"
-            style={{ maxWidth: "calc(100vw / 2)" }}
+              onClick={() => setOverLayer(false)}
-          ></div>
+            >
-          <OverLayer />
+              <div className="relative w-full h-full">
                 <div
-            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"
+                  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)" }}
+                  onClick={(e) => e.stopPropagation()}
                 >
                   <Search onChange={(val) => setSearch(val)} />
                   {search && <SearchResult text={search} setText={setSearch} />}
                 </div>
+              </div>
+            </div>
+          )}
+
+          <div className="flex flex-row items-center">
+            <img
+              src={searchIcon}
+              alt=""
+              className="w-7 ml-3 cursor-pointer"
+              onClick={() => setOverLayer(true)}
+            />
             {isLogin && (
               <div className="flex justify-end items-center gap-4">
                 <Link to="/cart" className="relative">
-                <img src={cartIcon} alt="" className="w-11" />
+                  <img src={cartIcon} alt="" className="w-8" />
-                <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">
+                  <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">
                     {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>
+            {1 && (
-
-        <div
-          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
-              src={darkCrimsonHamburgerMenu}
-              alt=""
-              className="w-8 transform translate-y-1 ml-2"
-            />
-            {/* <img src={whiteHamburgerMenu} alt="" className="w-3 h-3" /> */}
-            <span className={`text-sm text-blue52 ${productCategoryTextColor}`}>
-              دسته بندی کالاها &nbsp;&nbsp;
-            </span>
-          </div>
-          <div
-            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"
-            style={{ maxWidth: "calc(100vw / 2)" }}
-          >
-            {/* {menuItems.map((item, index) => (
-              <a
-                href="#"
-                className={`text-sm text-blue52 ${menuItemsColor}`}
-                key={index}
-              >
-                {item}
-              </a>
-            ))} */}
-
-            {pages.map((item, index) => (
               <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>
-            ))}
+            )}
           </div>
         </div>
       </div>
@@ -322,7 +278,9 @@ const mapStateToProps = (state) => ({
   isMobile: state.publicApi.isMobile,
   headerOptions: state.publicApi.headerOptions,
   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 = {
@@ -333,18 +291,10 @@ export default connect(mapStateToProps, mapDispatchToProps)(Navbar);
 
 Navbar.defaultProps = {
   pages: [
-    {
-      link: "/",
-      name: "خانه",
-    },
     {
       link: "/products",
       name: "محصولات",
     },
-    {
-      link: "/filter",
-      name: "دسته بندی ها",
-    },
     {
       link: "/contact-us",
       name: "تماس با ما",

src/views/404/index.js

@@ -9,8 +9,7 @@ function NotFound({ headerOptions, setHeaderOptions }) {
   }, []);
   return (
     <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
         className="dark:text-white text-5xl font-semibold"
@@ -19,7 +18,7 @@ function NotFound({ headerOptions, setHeaderOptions }) {
         404
       </h1>
       <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 />
         صفحه ای که بدنبال آن بوده‌اید دیگر وجود ندارد :(

src/views/AR/index.js

@@ -12,7 +12,7 @@ function AR({ getArList, arList, headerOptions, setHeaderOptions }) {
   }, []);
 
   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.map((book, index) => <Book book={book} key={index} />)}
     </div>

src/views/Activation/index.js

@@ -18,8 +18,8 @@ function Activation({ headerOptions, setHeaderOptions, isMobile }) {
   }, []);
   return (
     <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="فعال‌سازی کتاب دیجیتال" />
       <div className="flex-1 flex flex-col justify-between lg:justify-start px-4 lg:w-1/4 lg:mx-auto">

src/views/Contact/index.js

@@ -48,7 +48,7 @@ function Contact({ headerOptions, setHeaderOptions, info, isMobile, isDark }) {
 
   return (
     <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)" }}
     >
       <Header

src/views/Faq/index.js

@@ -18,8 +18,8 @@ function Faq({ headerOptions, setHeaderOptions, isMobile }) {
   }, []);
   return (
     <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 ? faqBgImage : desktopFaqBgImage}

src/views/Home/Desktop/index.js

@@ -61,7 +61,7 @@ const DesktopHome = ({ grades, getBooks, books, getVODs, listVOD }) => {
   },[]);
   
   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
           mainBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/d2a56a4a0c3ce4645bf0b405b0bbf3a29da1cbd3_1642861192.jpg'
           midBottomBanner='https://dkstatics-public.digikala.com/digikala-adservice-banners/e13aefeda2d3b44db78a92aac9cdc82a9b1650e9_1632230372.jpg?'

src/views/Orders/index.js

@@ -10,7 +10,7 @@ function Orders({ orders, headerOptions, setHeaderOptions }) {
     setHeaderOptions(headerOptions);
   }, []);
   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) => (
         <Order order={order} key={index} />
       ))}

src/views/Product/index.js

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

src/views/Products/index.js

@@ -158,7 +158,7 @@ export const Products = ({
           </>
         ) : (
           <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">
               <Sidebar onChange={onChange} />

src/views/ShoppingCart/index.js

@@ -165,7 +165,7 @@ function ShoppingCart({
     </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" : ""
       }`}
     >

src/views/Video/index.js

@@ -109,7 +109,7 @@ function Video({
       </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">
         <div className="w-9/12">
           <Videos videos={book?.fileIds} />

src/views/VideoDisplay/index.js

@@ -102,7 +102,7 @@ function VideoDisplay({
       </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="flex flex-col w-8/12">
           <JolPlayer