Desktop Navigation Bar Done

master
Pedram Keshavarzi 3 years ago
parent 8afc9f560c
commit e71057ccd0
  1. 76
      src/Components/buttons/Button.css
  2. 43
      src/Components/buttons/Button.js
  3. 65
      src/Components/navBar/desktopMenu.js
  4. 20
      src/Components/navBar/navBar.css
  5. BIN
      src/assets/images/logo.png

@ -0,0 +1,76 @@
button{
font-family: 'IRAN SANS';
border: 0;
font-size: 0.7vw;
}
button.small{
padding:3px 15px;
border-radius: 10px;
border:1px solid #1577F8;
}
button.medium{
padding:10px 25px;
border-radius: 6px;
border:1px solid #1577F8;
}
button.large{
padding:10px 45px;
border-radius: 15px;
border:3px solid #1577F8;
}
button.primary{
border:0px;
}
button.primary.default{
background:#1577F8 ;
color:white;
transition: all 0.2s;
}
button.primary.default:hover{
color:white;
box-shadow: 0px 7px 20px rgba(120, 19, 42, 0.16);
cursor: pointer;
}
button.primary.default:active{
background:#0D41E1 ;
color:white;
}
button.primary.disabled{
background:#E8E8ED ;
color:white;
transition: all 0.2s;
}
button.outlined.default{
background: none;
color:#1577F8;
transition: all 0.2s;
}
button.outlined.default:hover{
background: rgba(21,119,248,0.1);
color:#1577F8;
cursor:pointer;
}
button.outlined.disabled{
background: none;
color:#E8E8ED;
border:2px solid #E8E8ED;
}
button.text{
border:0px;
color:#1577F8;
background: none;
transition: all 0.2s;
}
button.text:hover{
border:0px;
color:#FDB79F;
background: none;
cursor: pointer;
}
button.text.disabled{
color:#E8E8ED;
}

@ -0,0 +1,43 @@
import React from 'react';
import './Button.css';
const Button = (props) =>{
return(
<a href={props.href}>
<button className={props.size + ' ' + props.type + ' ' + props.model} width={props.width}>
{props.title}
</button>
</a>
);
};
export default Button;
/*
You Must Include The Title of the Button As A Parameter Of The Component
Like This: <Button title=" " />
------------------------------------------------------------------------
There Are 3 Types of Button: primary, outlined and text
You Can use them Like This: <Button type=" " />
------------------------------------------------------------------------
There Are 3 Sizes of Button: small, medium, and large
You Can Use Them Like This: <Button size=" " />
------------------------------------------------------------------------
Also There is 2 Models Of Button: default, disabled
You Can Use Them Like This: <Button model=" " />
------------------------------------------------------------------------
If You Want To Add A Link To The Button You Can Use href As a Parameter
In The Component.
You Can Use It Like This: <Button href=" " />
*/

@ -1,57 +1,60 @@
import React from 'react'; import React from 'react';
// import { Link } from 'react-router-dom'; // import { Link } from 'react-router-dom';
import Button from '../buttons/Button';
import logo from '../../assets/images/logo.png';
import './navBar.css'; import './navBar.css';
const DesktopMenu = ({ currentUser, hidden }) => ( const DesktopMenu = ({ currentUser, hidden }) => (
<div className='navBar'> <div className='navBar'>
<div className="header"> <div className="header">
<div className="logo-container"> <div className="logo-container">
{/* <img src={logo} className="logo" /> */} <img src={logo} className="logo" />
<p>
<p className="logo" > پلتفرم بازوچت</p> <span className='logoTitle'> پلتفرم چت بازو</span>
</div> <span className='logoDes'>دستیار کسب و کار شما برای ارتباط با مشتریان</span>
<div className="options"> </p>
<div className="option">
محصولات
</div> </div>
<div className="options">
<div className="option">
محصولات
</div>
<div className="option"> <div className="option">
راهکار ها راهکار ها
</div> </div>
<div className="option"> <div className="option">
تعرفه تعرفه
</div> </div>
<div className="option"> <div className="option">
منابع منابع
</div> </div>
<div className="option"> <div className="option">
تعامل پذیری تعامل پذیری
</div> </div>
</div>
<div className="headerButtons "> </div>
<div className='nav-signin-desk signInBtn'>
ثبتنام / ورود <div className="headerButtons ">
</div> <Button title='ثبتنام / ورود' type="outlined" model="default" size="medium" />
{/* <span className='nav-signin-mob'> {/* <span className='nav-signin-mob'>
<img src={navProPic} /> <img src={navProPic} />
</span> */} </span> */}
<div className='tryitFree'> <div className='tryitFree'>
رایگان امتحان کنید <Button title='رایگان امتحان کنید' type="primary" model="default" size="medium" />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );

@ -5,7 +5,7 @@
justify-content: center; justify-content: center;
background-color: white; background-color: white;
box-shadow:0px 0px 10px rgba(0,0,0,0.2); box-shadow:0px 0px 28px rgba(0,0,0,0.15);
height:90px; height:90px;
vertical-align: middle; vertical-align: middle;
} }
@ -25,7 +25,7 @@
top: 0; top: 0;
margin:0; margin:0;
vertical-align: middle; vertical-align: middle;
padding: 20px 0px; padding: 15px 0px;
} }
@ -37,6 +37,18 @@
vertical-align:middle; vertical-align:middle;
width:25%; width:25%;
} }
.header .logo-container p{
display: flex;
flex-direction: column;
padding-right: 8px;
color:#132F52;
}
.logoTitle{
font-size: 15px;
}
.logoDes{
font-size: 8px;
}
.header .logo-container .logo{ .header .logo-container .logo{
height: 100%; height: 100%;
@ -56,6 +68,8 @@
.header .options .option { .header .options .option {
padding: 10px 15px; padding: 10px 15px;
cursor: pointer; cursor: pointer;
color: rgba(19, 47,82, 0.66);
font-weight: bold;
} }
@ -66,7 +80,7 @@
} }
.headerButtons div{ .headerButtons div{
padding: 10px 30px; margin: 0px 30px;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Loading…
Cancel
Save