update src/components/Navbar/HeaderDesign1/index.js and src/components/Navbar/index.js

master
mahdi andalib 2 years ago
parent e2e6869efb
commit a921f6affe
  1. 103
      src/components/Navbar/HeaderDesign1/index.js
  2. 4
      src/components/Navbar/HeaderDesign2/arrow-down.svg
  3. 140
      src/components/Navbar/HeaderDesign2/index.js
  4. 8
      src/components/Navbar/HeaderDesign2/profile-pic.svg
  5. 5
      src/components/Navbar/HeaderDesign2/search-normal.svg
  6. 2
      src/components/Navbar/index.js

@ -1,4 +1,5 @@
import React from "react"; import React from "react";
import Button from "../../ButtonDesign/Button";
import Search from "../../SearchDesign/Search"; import Search from "../../SearchDesign/Search";
@ -9,115 +10,96 @@ const HeaderDesign1 = ({
searchBox, searchBox,
topHeader, topHeader,
bottomHeader, bottomHeader,
productCategoryTextColor,
menuItemsColor,
}) => { }) => {
return ( return (
<header className={`rounded-b-md w-full bg-transparent`}> <header className="rounded-b-md w-full bg-white p-4">
<> <>
{topHeader && ( {topHeader && (
<div className="flex justify-between items-center mb-2"> <div className="flex justify-between items-center mb-2">
<div <div className="flex flex-row-reverse divide-x transform translate-x-2">
className="divide-x flex flex-row-reverse transform translate-x-2" <span className="text-xs px-2 text-gray-500">انتخاب کشور</span>
style={{}} <span className="text-xs px-2 text-gray-500">پیگیری سفارش</span>
>
<span className={`text-xs font-light px-2 text-gray-500`}>
انتخاب کشور
</span>
<span className={`text-xs font-light px-2text-gray-500`}>
پیگیری سفارش
</span>
</div> </div>
<div className=""> <div className="flex flex-row-reverse divide-x ">
<span className={`text-xs font-light ml-2text-gray-500`}> <span className="text-xs flex-grow text-gray-500">
شکایات&nbsp; شکایات&nbsp;
</span> </span>
<span className={`text-xs font-lighttext-gray-500`}> <span className="text-xs flex-grow text-gray-500">
ورود و ثبت نام ورود و ثبت نام
</span> </span>
</div> </div>
</div> </div>
)} )}
<div className="border-b border-lightGrayBorderColor mb-5"></div> <div className="border-b border-[#DBDBDB88] my-7"></div>
</> </>
<div className="flex justify-between items-center relative"> <div className="relative flex justify-between items-center">
<div className="ml-10"> <div className="">
<span className={`text-sm font-bold ml-4 text-gray-700`}> <span className="text-sm font-sansbold ml-4 text-gray-700">
Design System Design System
</span> </span>
{category && ( {category && (
<span className={`text-sm font-bold ${productCategoryTextColor}`}> <span className="text-sm font-bold text-[#132F52]">
دسته بندی ها دسته بندی ها
</span> </span>
)} )}
</div> </div>
<div {searchBox === false && (
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 className="flex flex-row flex-1 items-center justify-around">
style={{ maxWidth: 700 }}
>
{menuItems?.map((item, index) => ( {menuItems?.map((item, index) => (
<a href="#" className="text-productPrice text-xs" key={index}> <a href="#" className="text-[#132F52] text-xs" key={index}>
{item} {item}
</a> </a>
))} ))}
</div> </div>
)}
{searchBox && ( {searchBox && (
<div <div className="w-full max-w-[700px] flex absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
className="flex w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: 700 }}
>
<Search /> <Search />
</div> </div>
)} )}
{loginBtn && ( {loginBtn && (
<div className="flex justify-end mr-7"> <div className="flex items-center gap-x-1 ml-4">
<button className={`ml-2 text-xs font-light`}>ورود</button> <Button
<button className={`ml-2 text-xs font-light`}>ثبت نام</button> text="ورود"
className="text-xs text-white font-sansbold bg-gray-400 rounded py-0.5 px-1.5"
/>
<Button
text="ثبت نام"
className="text-xs text-gray-600 font-sansbold border border-gray-400 rounded py-0.5 px-1.5"
/>
</div> </div>
)} )}
<div className="w-1/5 flex justify-end items-center "> <div className="flex items-center gap-x-2 ">
<img <img src="images/dark-crimson-cart-icon.svg" alt="" className="w-5" />
src="images/dark-crimson-cart-icon.svg"
alt=""
className="w-5 h-5 ml-2"
/>
<img <img
src="images/dark-crimson-search-box.svg" src="images/dark-crimson-search-box.svg"
alt="" alt=""
className="w-5 h-5 ml-2" className="w-5"
/> />
<img <img
src="images/dark-crimson-profile-icon.svg" src="images/dark-crimson-profile-icon.svg"
alt="" alt=""
className="w-5 h-5" className="w-5"
/> />
</div> </div>
</div> </div>
{bottomHeader && ( {bottomHeader && (
<> <>
<div className="border-b border-lightGrayBorderColor mt-5"></div> <div className="border-b border-[#DBDBDB88] my-7"></div>
<div className="flex items-center mt-4 relative w-full "> <div className="w-full relative flex items-center">
<div className="ml-10 flex items-center"> <div className="flex flex-row items-center">
<img <img
src="images/dark-crimson-hamburger-menu.svg" src="images/dark-crimson-hamburger-menu.svg"
alt="" alt=""
className="w-5 h-5" className="w-5"
/>
<img
src="images/white-hamburger-menu-icon.svg"
alt=""
className="w-3 h-3"
/> />
<span className={`text-xs mr-2 ${productCategoryTextColor}`}> <span className="text-xs mr-2 text-[#132F52]">
دسته بندی کالاها دسته بندی کالاها
</span> </span>
</div> </div>
<div <div className="max-w-[700px] flex flex-row items-center justify-around w-3/5 absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
className="hidden lg: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: 700 }}
>
{menuItems.map((item, index) => ( {menuItems.map((item, index) => (
<a href="#" className={`text-xs ${menuItemsColor}`} key={index}> <a href="#" className="text-xs text-[#132F52]" key={index}>
{item} {item}
</a> </a>
))} ))}
@ -132,9 +114,6 @@ const HeaderDesign1 = ({
export default HeaderDesign1; export default HeaderDesign1;
HeaderDesign1.defaultProps = { HeaderDesign1.defaultProps = {
productCategoryTextColor: "text-productPrice",
menuItemsColor: "text-productPrice",
border: "border",
topHeader: true, topHeader: true,
bottomHeader: true, bottomHeader: true,
@ -147,8 +126,8 @@ HeaderDesign1.defaultProps = {
"وبلاگ", "وبلاگ",
], ],
category: true, category: false,
searchBox: true, searchBox: false,
// icons // icons
loginBtn: true, loginBtn: false,
}; };

@ -0,0 +1,4 @@
<svg id="arrow-down" xmlns="http://www.w3.org/2000/svg" width="18.5" height="18.5" viewBox="0 0 18.5 18.5">
<path id="Vector" d="M9.958,0H.832A.83.83,0,0,0,.246,1.418L4.239,5.411a1.642,1.642,0,0,0,2.32,0L8.077,3.893l2.474-2.474A.834.834,0,0,0,9.958,0Z" transform="translate(3.855 6.305)" fill="#c8def9"/>
<path id="Vector-2" data-name="Vector" d="M0,0H18.5V18.5H0Z" transform="translate(18.5 18.5) rotate(180)" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 448 B

@ -0,0 +1,140 @@
import React from "react";
import cartIcon from "../../../assets/icons/dark-crimson-cart-icon.svg";
import profileIcon from "../../../assets/icons/dark-crimson-profile-icon.svg";
import profilePic from "./profile-pic.svg";
import downwardArrow from "./arrow-down.svg";
import search from "./search-normal.svg";
import Switch from "../../Switch";
const HeaderDesign2 = ({ username, userJob }) => {
return (
<header
className={`mx-auto py-3 px-4 rounded-b-md w-full shadow-sm bg-white`}
>
{/* {headerDivider && (
<div className="border-b border-lightGrayBorderColor mb-5"></div>
)} */}
<div className="flex justify-between items-center relative">
<div className="flex w-1/5">
<span className={`text-sm font-sansbold ml-4 pt-1 text-productPrice`}>
دانوین
</span>
</div>
<div className="flex items-center relative justify-self-start flex-1">
<div className="hidden lg:flex items-start justify-start flex-1 ">
<a href="#" className={`text-xs text-productPrice mx-3`}>
محصولات
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
دسته بندی
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
تماس با ما
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
درباره ما
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
پیگیری
</a>
<a href="#" className={`text-xs text-productPrice mx-3`}>
وبلاگ
</a>
</div>
</div>
<div className="flex justify-end items-center ">
<div className="ml-4">
<Switch />
</div>
<div className="flex flex-row-reverse items-center relative w-60 ml-3">
<img
src={search}
alt=""
className="w-5 h-5 absolute left-3 cursor-pointer"
/>
<input
type="text"
placeholder="جستجو در پنل کاربری..."
className="text-xs rounded pr-4 pl-10 py-2 w-full border border-blue-300 focus:outline-none placeholder:text-blue-300"
/>
</div>
{/* <div class="flex justify- ">
<div class="form-check form-switch">
<input
class="form-check-input appearance-none w-9 -ml-10 rounded-full float-left h-5 align-top bg-white bg-no-repeat bg-contain bg-gray-300 focus:outline-none cursor-pointer shadow-sm"
type="checkbox"
role="switch"
id="flexSwitchCheckChecked"
checked
/>
</div>
</div> */}
{/* <p className={`text-xs ml-2 text-product>Price`}>
140,000
<span className={`text-xs font-light text-productPrice`}>
تومان
</span>
</p> */}
{/* <img src={whiteCartIcon} alt="" className="w-5 h-5 ml-2" /> */}
{/* <img src={searchIcon} alt="" className="w-7 h-5 ml-2" /> */}
<img src={cartIcon} alt="" className="w-7 h-5 ml-2" />
{/* <img src={profileIcon} alt="" className="w-5 h-5" /> */}
{/* <button
className={`ml-2 text-xs font-light border rounded-md py-2 px-8 bg-white border-darkCrimsonBorderColor text-productPrice`}
>
ورود
</button> */}
<div className="flex flex-row items-center">
<div className=" flex-col flex-1 mr-3">
<p className="text-blue-900 text-sm">{username}</p>
<p className="text-blue-700 text-xs">{userJob}</p>
</div>
<img
src="images/arrow-down.svg"
alt="arrow"
className="w-4 cursor-pointer"
/>
<img
src="images/profile-pic.svg"
alt="profile-pic"
className="w-10 rounded-full"
/>
</div>
</div>
</div>
</header>
);
};
export default HeaderDesign2;
HeaderDesign2.defaultProps = {
username: "رستم پهلوان زاده",
userJob: "مدیریت سامانه هوشمند",
headerDivider: true,
topHeader: true,
bottomHeader: true,
menuItems: false,
category: false,
searchBox: true,
// icons
loginBtn: true,
whiteIconCart: false,
darkCrimsonIconCart: false,
whiteIconHamburgerMenu: false,
darkIconHamburgerMenu: true,
iconHolder: true,
iconProfile: false,
iconCart: true,
iconSearch: false,
};

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 102 KiB

@ -0,0 +1,5 @@
<svg id="search-normal" xmlns="http://www.w3.org/2000/svg" width="29.902" height="29.902" viewBox="0 0 29.902 29.902">
<path id="Vector" d="M23.672,11.836A11.836,11.836,0,1,1,11.836,0,11.836,11.836,0,0,1,23.672,11.836Z" transform="translate(2.492 2.492)" fill="none" stroke="#e2eafc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M2.492,2.492,0,0" transform="translate(24.918 24.918)" fill="none" stroke="#e2eafc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H29.9V29.9H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 646 B

@ -1,10 +1,12 @@
import React, { useState } from "react"; import React, { useState } from "react";
import HeaderDesign1 from "./HeaderDesign1"; import HeaderDesign1 from "./HeaderDesign1";
import HeaderDesign2 from "./HeaderDesign2";
function Navbar() { function Navbar() {
const list = { const list = {
1: <HeaderDesign1 />, 1: <HeaderDesign1 />,
2: <HeaderDesign2 />,
}; };
const [type, setType] = useState(1); const [type, setType] = useState(1);
return ( return (

Loading…
Cancel
Save