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

@ -5,7 +5,7 @@
justify-content: center;
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;
vertical-align: middle;
}
@ -25,7 +25,7 @@
top: 0;
margin:0;
vertical-align: middle;
padding: 20px 0px;
padding: 15px 0px;
}
@ -37,6 +37,18 @@
vertical-align:middle;
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{
height: 100%;
@ -56,6 +68,8 @@
.header .options .option {
padding: 10px 15px;
cursor: pointer;
color: rgba(19, 47,82, 0.66);
font-weight: bold;
}
@ -66,7 +80,7 @@
}
.headerButtons div{
padding: 10px 30px;
margin: 0px 30px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.9 KiB

Loading…
Cancel
Save