NavBar Component Made

master
Pedram Keshavarzi 3 years ago
parent 46045fe86d
commit c03bd02bbd
  1. 25
      package-lock.json
  2. 1
      package.json
  3. 38
      src/App.css
  4. 1
      src/App.js
  5. 58
      src/Components/navBar/desktopMenu.js
  6. 118
      src/Components/navBar/navBar.css
  7. 3
      src/Pages/Home/Home.js
  8. 31
      src/index.css

25
package-lock.json generated

@ -5627,6 +5627,14 @@
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
},
"history": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/history/-/history-5.2.0.tgz",
"integrity": "sha512-uPSF6lAJb3nSePJ43hN3eKj1dTWpN9gMod0ZssbFTIsen+WehTmEadgL+kg78xLJFdRfrrC//SavDzmRVdE+Ig==",
"requires": {
"@babel/runtime": "^7.7.6"
}
},
"hoopy": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@ -9311,6 +9319,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
"react-router": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.1.tgz",
"integrity": "sha512-2fG0udBtxou9lXtK97eJeET2ki5//UWfQSl1rlJ7quwe6jrktK9FCCc8dQb5QY6jAv3jua8bBQRhhDOM/kVRsg==",
"requires": {
"history": "^5.2.0"
}
},
"react-router-dom": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.1.tgz",
"integrity": "sha512-I6Zax+/TH/cZMDpj3/4Fl2eaNdcvoxxHoH1tYOREsQ22OKDYofGebrNm6CTPUcvLvZm63NL/vzCYdjf9CUhqmA==",
"requires": {
"history": "^5.2.0",
"react-router": "6.2.1"
}
},
"react-scripts": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",

@ -8,6 +8,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"
},

@ -1,38 +0,0 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@ -1,5 +1,4 @@
import './App.css';
import HomePage from './Pages/Home/Home';
function App() {

@ -0,0 +1,58 @@
import React from 'react';
// import { Link } from 'react-router-dom';
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>
<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>
{/* <span className='nav-signin-mob'>
<img src={navProPic} />
</span> */}
<div className='tryitFree'>
رایگان امتحان کنید
</div>
</div>
</div>
</div>
);
export default DesktopMenu;

@ -0,0 +1,118 @@
.navBar{
width:100%;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
box-shadow:0px 0px 10px rgba(0,0,0,0.2);
height:90px;
vertical-align: middle;
}
.header {
width: 90%;
display: flex;
justify-content: space-between;
margin-bottom: 250px;
direction:rtl;
font-family:'IRAN SANS';
font-size: 13px;
align-items: center;
position: fixed;
top: 0;
margin:0;
vertical-align: middle;
padding: 20px 0px;
}
.header .logo-container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
vertical-align:middle;
width:25%;
}
.header .logo-container .logo{
height: 100%;
}
.header .options {
width: 35%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.header .options .option {
padding: 10px 15px;
cursor: pointer;
}
.headerButtons{
display: flex;
justify-content: center;
width:25%;
}
.headerButtons div{
padding: 10px 30px;
}
@media only screen and (min-width:1000px) {
.nav-signin-mob{
display: none;
}
.signInBtn{
border:2px solid #8e44ad;
border-radius:15px;
color:#8e44ad;
}
.signInBtn:hover{
background:#8e44ad;
color:white;
}
}
@media only screen and (max-width:1000px) {
.nav-signin-mob{
display: flex;
}
.nav-signin-mob img{
width:35px;
}
.nav-signin-desk{
display: none;
}
.signInBtn{
border:0px solid #8e44ad;
border-radius:15px;
color:#8e44ad;
}
.signInBtn:hover{
background:none;
color:white;
}
}

@ -1,9 +1,10 @@
import React from 'react';
import DesktopMenu from '../../Components/navBar/desktopMenu'
const HomePage = () =>{
return(
<div>
BAZOO CHAT
<DesktopMenu />
</div>
)
};

@ -1,3 +1,31 @@
/* Fonts */
@font-face{
font-family:'IRAN SANS';
src:url(./assets/fonts/IRAN\ SANS.TTF) format('truetype');
}
@font-face{
font-family:'Kalameh';
src:url(./assets/fonts/Kalameh\ Regular.ttf) format('truetype');
}
@font-face{
font-family:'iran yekan';
src:url(./assets/fonts/IRANYekanRegularFaNum.ttf) format('truetype');
}
@font-face{
font-family:'iran yekan bold';
src:url(./assets/fonts/IRANYekanBoldFaNum.ttf) format('truetype');
}
@font-face{
font-family:'poppins';
src:url(./assets/fonts/Poppins.ttf) format('truetype');
}
@font-face{
font-family:'iran yekan extra bold';
src:url(./assets/fonts/IRANYekanExtraBold.ttf) format('truetype');
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@ -11,3 +39,6 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
*{
transition: all 0.15s;
}
Loading…
Cancel
Save