From c03bd02bbd25773c780235a93c2c9ac54f077318 Mon Sep 17 00:00:00 2001 From: Pedram Keshavarzi Date: Wed, 12 Jan 2022 14:06:06 +0330 Subject: [PATCH] NavBar Component Made --- package-lock.json | 25 ++++++ package.json | 1 + src/App.css | 38 --------- src/App.js | 1 - src/Components/navBar/desktopMenu.js | 58 +++++++++++++ src/Components/navBar/navBar.css | 118 +++++++++++++++++++++++++++ src/Pages/Home/Home.js | 3 +- src/index.css | 31 +++++++ 8 files changed, 235 insertions(+), 40 deletions(-) delete mode 100644 src/App.css create mode 100644 src/Components/navBar/desktopMenu.js create mode 100644 src/Components/navBar/navBar.css diff --git a/package-lock.json b/package-lock.json index 3bd4362..cd317fd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 3063265..854d674 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 74b5e05..0000000 --- a/src/App.css +++ /dev/null @@ -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); - } -} diff --git a/src/App.js b/src/App.js index 90e2fb5..a5cb210 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,4 @@ -import './App.css'; import HomePage from './Pages/Home/Home'; function App() { diff --git a/src/Components/navBar/desktopMenu.js b/src/Components/navBar/desktopMenu.js new file mode 100644 index 0000000..f636e39 --- /dev/null +++ b/src/Components/navBar/desktopMenu.js @@ -0,0 +1,58 @@ +import React from 'react'; +// import { Link } from 'react-router-dom'; + +import './navBar.css'; + + +const DesktopMenu = ({ currentUser, hidden }) => ( +
+
+
+ {/* */} + +

پلتفرم بازوچت

+
+
+
+ محصولات +
+ +
+ راهکار ها +
+
+ تعرفه +
+ +
+ منابع +
+ +
+ تعامل پذیری +
+ + + + + +
+ +
+
+ ثبتنام / ورود +
+ {/* + + */} + +
+ رایگان امتحان کنید +
+
+ +
+
+); + +export default DesktopMenu; diff --git a/src/Components/navBar/navBar.css b/src/Components/navBar/navBar.css new file mode 100644 index 0000000..fe61d10 --- /dev/null +++ b/src/Components/navBar/navBar.css @@ -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; + } + } \ No newline at end of file diff --git a/src/Pages/Home/Home.js b/src/Pages/Home/Home.js index 3b7b93b..df2e6a5 100644 --- a/src/Pages/Home/Home.js +++ b/src/Pages/Home/Home.js @@ -1,9 +1,10 @@ import React from 'react'; +import DesktopMenu from '../../Components/navBar/desktopMenu' const HomePage = () =>{ return(
- BAZOO CHAT +
) }; diff --git a/src/index.css b/src/index.css index ec2585e..657f974 100644 --- a/src/index.css +++ b/src/index.css @@ -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; +} \ No newline at end of file