Setup Navbar

package.json

@@ -13,8 +13,11 @@
     "@types/react-router-dom": "^5.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
+    "react-items": "^0.1.0",
     "react-router-dom": "^6.0.1",
     "react-scripts": "4.0.3",
+    "styled-components": "^5.3.3",
     "typescript": "^4.4.4",
     "web-vitals": "^1.1.2"
   },

src/App.tsx

@@ -3,7 +3,7 @@ import { Routes, Route } from "react-router-dom";
 import Home from "./pages/Home";
 import About from "./pages/About";
 import Contact from "./pages/Contact";
-import Navbar from "./Components/Navbar";
+import Navbar from "./Components/Navbar/Navbar";
 
 const App = () => {
   return (

src/Components/Navbar/Navbar.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { FaRegBell, FaUserAlt } from "react-icons/fa";
+import logo from "./logo.png";
+import "./navbar.css";
+
+const Navbar = () => {
+  return (
+    <>
+      <nav>
+        <div className="image">
+          <img className="logo" src={logo} alt="logo" />
+        </div>
+
+        <div className="menu-items">
+          <ul>
+            <li>
+              <Link className="link" to="/">
+                Home
+              </Link>
+            </li>
+
+            <li>
+              <Link className="link" to="/About">
+                About-us
+              </Link>
+            </li>
+
+            <li>
+              <Link className="link" to="/Contact">
+                Contact-us
+              </Link>
+            </li>
+          </ul>
+        </div>
+
+        <div className="search">
+          <input
+            className="searchBox"
+            type="text"
+            placeholder="What's your question ?"
+          />
+        </div>
+
+        <div className="notification">
+          <FaRegBell />
+        </div>
+
+        <div className="user">
+          <FaUserAlt className="user-logo" />
+        </div>
+      </nav>
+    </>
+  );
+};
+
+export default Navbar;

src/Components/Navbar/navbar.css

@@ -0,0 +1,96 @@
+*{
+    margin: 0;
+    padding: 0;
+    justify-content: center;
+}
+
+nav{
+    background-color: #363636;
+    width: 100%;
+    height: 85px;
+    display: inline-block;
+}
+
+.image .logo{
+    width: 110px;
+    margin: 20px 15px 20px 35px;
+}
+
+.menu-items{
+    text-align: center;
+    width: 40%;
+    position:absolute;
+    top:11px;
+    right: 655px;
+}
+
+nav ul li{
+    display: inline-block;
+    font-weight: 700;
+    font-size: 16px;
+    margin: 12px 10px;
+    width: 113px;
+}
+
+nav ul li .link    {
+    color: #fff;
+    text-decoration: none;
+    display: block;
+    padding: 10px 10px;
+    transition: 0.3s ease all;
+}
+
+nav ul li a:hover   {
+    background: rgba(0, 0, 0, 0.219);
+}
+
+.search{
+    position: absolute;
+    top: 25px;
+    right: 190px;
+}
+
+.search .searchBox{
+    width: 300px;
+    height: 35px;
+    padding-left: 15px;
+    border-radius: 20px;
+    font-size: 14px;
+    font-weight: 600;
+    background: #7A5C98;
+    color: #fff;
+    outline: none;
+    border: none;
+}
+
+::placeholder{
+    color: #fff;
+    opacity: 1;
+}
+
+.notification{
+    position: absolute;
+    top: 27px;
+    right: 125px;
+    font-size: 24px;
+    color: #fff;
+}
+
+.user{
+    position: absolute;
+    top: 22px;
+    right: 55px;
+    font-size: 17px;
+    text-align: center;
+    color: #fff;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    background: #8000FF;
+}
+
+.user-logo{
+    position: absolute;
+    right: 11.5px;
+    top: 8.5px;
+}