reza pushed navbar

master
Reza_ashrafi 3 years ago
parent 080eb2cb27
commit fbe8c76d92
  1. 2
      src/Views/Home/Sidebar/index.js
  2. 7
      src/components/Navbar/dark-crimson-cart-icon.svg
  3. 10
      src/components/Navbar/dark-crimson-hamburger-menu.svg
  4. 8
      src/components/Navbar/dark-crimson-profile-icon.svg
  5. 5
      src/components/Navbar/dark-crimson-search-box.svg
  6. 143
      src/components/Navbar/index.js
  7. 7
      src/components/Navbar/light-gray-search-box.svg
  8. 7
      src/components/Navbar/white-cart-icon.svg
  9. 9
      src/components/Navbar/white-hamburger-menu-icon.svg
  10. 12
      src/redux/data.js

@ -12,7 +12,7 @@ function Sidebar({ list, setActive }) {
className="w-full" className="w-full"
/> />
</header> </header>
<ul className="w-full flex-1 p-0 m-0 list-none divided divide-y max-h-full lg:overflow-y-scroll divide-blue-100 border-r border-gray-200"> <ul className="w-full flex-1 p-0 m-0 list-none divided divide-y max-h-full overflow-y-scroll divide-blue-100 border-r border-gray-200">
{list.map((material, index) => ( {list.map((material, index) => (
<li <li
key={index} key={index}

@ -0,0 +1,7 @@
<svg id="bag-2" xmlns="http://www.w3.org/2000/svg" width="72.645" height="72.645" viewBox="0 0 72.645 72.645">
<path id="Vector" d="M0,17.137V14.2C0,7.391,5.479.7,12.289.066a13.622,13.622,0,0,1,14.953,13.56V17.8" transform="translate(22.702 6.079)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M17.407,42.376H35.568c12.168,0,14.347-4.873,14.983-10.806l2.27-18.161C53.639,6.023,51.52,0,38.6,0H14.38C1.455,0-.663,6.023.154,13.409L2.424,31.57C3.06,37.5,5.239,42.376,17.407,42.376Z" transform="translate(9.835 24.215)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.522" transform="translate(46.408 35.822)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.522" transform="translate(25.217 35.822)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-5" data-name="Vector" d="M0,0H72.645V72.645H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@ -0,0 +1,10 @@
<svg xmlns="http://www.w3.org/2000/svg" width="42.098" height="52.867" viewBox="0 0 42.098 52.867">
<g id="vuesax_linear_textalign-justifycenter" data-name="vuesax/linear/textalign-justifycenter" transform="translate(-364 -188)">
<g id="textalign-justifycenter" transform="translate(364 188)">
<path id="Vector" d="M0,0H28.881" transform="translate(6.608 9.913)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 20.926)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 31.94)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-4" data-name="Vector" d="M0,0H42.1V52.867H0Z" transform="translate(42.098 52.867) rotate(180)" fill="none" opacity="0"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1020 B

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="72.826" height="72.826" viewBox="0 0 72.826 72.826">
<g id="profile-circle" transform="translate(0 0)">
<path id="Vector" d="M10.317,19.875a2.922,2.922,0,0,0-.728,0,9.953,9.953,0,1,1,.728,0Z" transform="translate(26.46 18.904)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M40.9,11.971a30.145,30.145,0,0,1-20.452,7.95A30.145,30.145,0,0,1,0,11.971C.3,9.118,2.124,6.327,5.371,4.142c8.314-5.523,21.909-5.523,30.162,0C38.78,6.327,40.6,9.118,40.9,11.971Z" transform="translate(15.961 46.836)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M60.688,30.344A30.344,30.344,0,1,1,30.344,0,30.344,30.344,0,0,1,60.688,30.344Z" transform="translate(6.069 6.069)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-4" data-name="Vector" d="M0,0H72.826V72.826H0Z" transform="translate(72.826 72.826) rotate(180)" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,5 @@
<svg id="search-normal" xmlns="http://www.w3.org/2000/svg" width="72.645" height="72.645" viewBox="0 0 72.645 72.645">
<path id="Vector" d="M57.511,28.755A28.755,28.755,0,1,1,28.755,0,28.755,28.755,0,0,1,57.511,28.755Z" transform="translate(6.054 6.054)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M6.054,6.054,0,0" transform="translate(60.538 60.537)" fill="none" stroke="#132f52" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H72.645V72.645H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 646 B

@ -0,0 +1,143 @@
import React from "react";
import Search from "../Search";
import cartIcon from "./dark-crimson-cart-icon.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 lightGraySearchIcon from "./light-gray-search-box.svg";
import darkCrimsonHamburgerMenu from "./dark-crimson-hamburger-menu.svg";
import whiteHamburgerMenu from "./white-hamburger-menu-icon.svg";
const HeaderDesign1 = ({
loginBtn,
menuItems,
category,
searchBox,
topHeader,
bottomHeader,
productCategoryTextColor,
menuItemsColor,
}) => {
return (
<header className={`rounded-b-md w-full bg-transparent`}>
<>
{topHeader && (
<div className="flex justify-between items-center mb-2">
<div
className="divide-x flex flex-row-reverse transform translate-x-2"
style={{}}
>
<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 className="">
<span className={`text-xs font-light ml-2text-gray-500`}>
شکایات&nbsp;
</span>
<span className={`text-xs font-lighttext-gray-500`}>
ورود و ثبت نام
</span>
</div>
</div>
)}
<div className="border-b border-lightGrayBorderColor mb-5"></div>
</>
<div className="flex justify-between items-center relative">
<div className="ml-10">
<span className={`text-sm font-bold ml-4 text-gray-700`}>
Design System
</span>
{category && (
<span className={`text-sm font-bold ${productCategoryTextColor}`}>
دسته بندی ها
</span>
)}
</div>
<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"
style={{ maxWidth: 700 }}
>
{menuItems?.map((item, index) => (
<a href="#" className="text-productPrice text-xs" key={index}>
{item}
</a>
))}
</div>
{searchBox && (
<div
className="flex w-full absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"
style={{ maxWidth: 700 }}
>
<Search />
</div>
)}
{loginBtn && (
<div className="flex justify-end mr-7">
<button className={`ml-2 text-xs font-light`}>ورود</button>
{/* <img src={verticalLineIcon} alt="" className="" /> */}
<button className={`ml-2 text-xs font-light`}>ثبت نام</button>
</div>
)}
<div className="w-1/5 flex justify-end items-center ">
<img src={cartIcon} alt="" className="w-5 h-5 ml-2" />
{/* <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>
{bottomHeader && (
<>
<div className="border-b border-lightGrayBorderColor mt-5"></div>
<div className="flex items-center mt-4 relative w-full ">
<div className="ml-10 flex items-center">
<img src={darkCrimsonHamburgerMenu} alt="" className="w-5 h-5" />
<img src={whiteHamburgerMenu} alt="" className="w-3 h-3" />
<span className={`text-xs mr-2 ${productCategoryTextColor}`}>
دسته بندی کالاها
</span>
</div>
<div
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) => (
<a href="#" className={`text-xs ${menuItemsColor}`} key={index}>
{item}
</a>
))}
</div>
</div>
</>
)}
</header>
);
};
export default HeaderDesign1;
HeaderDesign1.defaultProps = {
productCategoryTextColor: "text-productPrice",
menuItemsColor: "text-productPrice",
border: "border",
topHeader: true,
bottomHeader: true,
menuItems: [
"محصولات",
"دسته بندی",
"تماس با ما",
"درباره ما",
"پیگیری",
"وبلاگ",
],
category: true,
searchBox: true,
// icons
loginBtn: true,
};

@ -0,0 +1,7 @@
<svg id="vuesax_linear_search-normal" data-name="vuesax/linear/search-normal" xmlns="http://www.w3.org/2000/svg" width="38.895" height="38.895" viewBox="0 0 38.895 38.895">
<g id="search-normal">
<path id="Vector" d="M30.792,15.4A15.4,15.4,0,1,1,15.4,0,15.4,15.4,0,0,1,30.792,15.4Z" transform="translate(3.241 3.241)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M3.241,3.241,0,0" transform="translate(32.412 32.412)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-3" data-name="Vector" d="M0,0H38.895V38.895H0Z" fill="none" opacity="0"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 728 B

@ -0,0 +1,7 @@
<svg id="bag-2" xmlns="http://www.w3.org/2000/svg" width="72.645" height="72.645" viewBox="0 0 72.645 72.645">
<path id="Vector" d="M0,17.137V14.2C0,7.391,5.479.7,12.289.066a13.622,13.622,0,0,1,14.953,13.56V17.8" transform="translate(22.702 6.079)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M17.407,42.376H35.568c12.168,0,14.347-4.873,14.983-10.806l2.27-18.161C53.639,6.023,51.52,0,38.6,0H14.38C1.455,0-.663,6.023.154,13.409L2.424,31.57C3.06,37.5,5.239,42.376,17.407,42.376Z" transform="translate(9.835 24.215)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.522" transform="translate(46.408 35.822)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.522" transform="translate(25.217 35.822)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-5" data-name="Vector" d="M0,0H72.645V72.645H0Z" fill="none" opacity="0"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" width="31.881" height="25.028" viewBox="0 0 31.881 25.028">
<g id="vuesax_linear_textalign-justifycenter" data-name="vuesax/linear/textalign-justifycenter" transform="translate(-369.108 -201.5)">
<g id="textalign-justifycenter" transform="translate(364 193.088)">
<path id="Vector" d="M0,0H28.881" transform="translate(6.608 9.913)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-2" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 20.926)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
<path id="Vector-3" data-name="Vector" d="M0,0H28.881" transform="translate(6.608 31.94)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 877 B

@ -20,6 +20,7 @@ import Chart from "../components/Recharts";
import CircularProgressbar from "../components/CircularProgressbar"; import CircularProgressbar from "../components/CircularProgressbar";
import Stepper from "../components/Stepper"; import Stepper from "../components/Stepper";
import Product from "../components/Product"; import Product from "../components/Product";
import Navbar from "../components/Navbar";
const components = [ const components = [
{ {
@ -457,6 +458,17 @@ const components = [
code : null, code : null,
} }
}, },
{
name : "Navbar",
props : [
],
content : {
name : "Navbar",
component : <Navbar />,
code : null,
}
},
]; ];
export default components; export default components;

Loading…
Cancel
Save