Added navbar

src/components/navbar/index.tsx

@@ -0,0 +1,52 @@
+import { useEffect, useState, useRef } from 'react';
+import React from "react";
+import { useSelector, useDispatch } from '../../store/index'; 
+import Button from 'react-bootstrap/Button';
+import Overlay from 'react-bootstrap/Overlay';
+import Tooltip from 'react-bootstrap/Tooltip';
+import profile from "../image/107161_circle_github_icon.png";
+import '../../styles/sass/main.scss'
+import { useNavigate } from "react-router-dom";
+
+export const Navbar = () => {
+  const {userData} = useSelector((state) => state.user)
+  const [searchedValue,setSearchedValue] = useState('');
+  const target = useRef(null);
+  const [show, setShow] = useState(false);
+
+  const navigate = useNavigate();
+  useEffect(()=>{
+  if(searchedValue.length!=0){
+    navigate("/search");
+  }
+ },[searchedValue,navigate])
+
+    return(
+        <div>
+           <nav>
+        <img src={profile} alt="profile" className="github-icon"/>
+        <div className="search">
+          <input className='search-feild ' type="text" placeholder='Search for a user'
+          onKeyPress={(event) => {
+            if (event.key === 'Enter') {
+              setSearchedValue(event.target.value)
+            }
+          }}
+          />
+        </div>
+        <Button  className="avatar" ref={target} onClick={() => setShow(!show)}>
+          {userData ? (
+            <img src={userData.avatar_url} alt="" />
+          ) : (null)}
+        </Button>
+        <Overlay target={target.current} show={show} placement="bottom">
+          {(props) => (
+            <Tooltip id="overlay-example" {...props}>
+            <div> Your Profile </div>
+            </Tooltip>
+          )}
+        </Overlay>
+      </nav>
+        </div>
+    )
+}

src/containers/home/index.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 // TODO: Add Home page UI
 export const HomePage = () => {
   return(

src/containers/login/index.tsx

@@ -42,8 +42,8 @@ export const LoginPage = () => {
     dispatch(loginUser(personalAccessToken,username));
   }
   function setLoader(){
-      login()
-  };
+      login();
+  }
 
   return(
       <div className="login">

src/containers/search/index.tsx

@@ -0,0 +1,7 @@
+export const SearchPage = () => {
+    return(
+        <div>
+            Hii
+        </div>
+    )
+}

src/routes/appRoute.tsx

@@ -1,7 +1,7 @@
+import PrivateRoute from "./privateRoute";
+import { Navbar } from "../components/navbar";
 import { Route } from "react-router-dom";
 
-import PrivateRoute from "./privateRoute"
-
 type AppRouteProps = {
     component: JSX.Element;
     isPrivate: boolean;
@@ -10,7 +10,7 @@ const AppRoute = ({
     component,
     isPrivate
 }: AppRouteProps):JSX.Element => (
-    isPrivate ? <PrivateRoute component={component} /> : component
+    isPrivate ? <><Navbar/> <PrivateRoute component={component} /> </>: component
 )
 
 export default AppRoute;

src/routes/index.tsx

@@ -1,7 +1,7 @@
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import routesConfig from "./routesConfig";
 import AppRoute from "./appRoute";
-
+import React from "react";
 const AppRoutes = () => {
     return (
         <BrowserRouter>

src/routes/privateRoute.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useNavigate } from "react-router-dom";
 import { useSelector } from '../store';
+import { Route } from "react-router-dom";
 
 type PrivateRouteProps = {
     component: JSX.Element;

src/routes/routesConfig.tsx

@@ -1,5 +1,6 @@
 import { LoginPage } from '../containers/login'
 import { HomePage } from '../containers/home'
+import React from "react";
 const routesConfig: RouteConfig[] = [
     {
         path: '/',

src/styles/sass/components/_navbar.scss

@@ -0,0 +1,43 @@
+nav {
+    background-color: #003865;
+    height: 85px;
+    width: 100%;
+    display: flex;
+  }
+.github-icon {
+    height: 50px;
+    width: 50px;
+    margin-left: 20px;
+    margin-top: 20px;
+}
+.search {
+    margin-top: 25px;
+    margin-left: 120px;
+}
+.avatar {
+    img {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+    }
+  }
+.avatar {
+    background-color: transparent;
+    margin-top: 10px;
+    margin-left: 780px;
+    border: none;
+}
+.search-feild {
+    width: 250px;
+    height: 40px;
+    border-radius: 10px;
+    border: none;
+    border-bottom: 2px solid #003865;
+    outline: none;
+    box-shadow: inset 0px 0px 25px 0px #003865;
+    &:focus {
+      border: none;
+      box-shadow: none;
+    }
+}
+

src/styles/sass/main.scss

@@ -1,3 +1,4 @@
 @import 'font-awesome/css/font-awesome.min.css';
 
 @import 'pages/login';
+@import 'components/navbar';

src/styles/sass/pages/_login.scss

@@ -28,7 +28,7 @@
 	width: 300px;
 }
 .input-feild {
-	width: 300px;
+	width: 340px;
 	height: 50px;
 	border-radius: 60px;
 	border: none;
@@ -47,7 +47,7 @@
 	padding-top: 20px;
 }
 .login-button {
-	width: 345px;
+	width: 340px;
 	height: 50px;
 	border-radius: 60px;
 	background-color: #a5d2f7;