create navbar component with style #40

client/src/App.js

@@ -1,6 +1,15 @@
+import { BrowserRouter as Router } from 'react-router-dom';
+import NavBar from './components/Navbar';
+
 function App() {
   return (
-    <div className="App" />
+    <div className="App">
+
+      <Router>
+        <NavBar />
+
+      </Router>
+    </div>
 
   );
 }

client/src/components/Navbar/index.js

@@ -0,0 +1,75 @@
+/* eslint-disable no-unused-vars */
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  ListItem, ListItemText, Button, Avatar, Container, List,
+} from '@mui/material';
+import './style.css';
+
+import Logo from '../../asstes/logo.png';
+import PresonImg from '../../asstes/avatar.png';
+
+function NavBar() {
+  const [logged, setLogged] = useState(true);
+  return (
+    <Container maxWidth="xl">
+      <nav className="container">
+        <Link to="/">
+          <img src={Logo} alt="logo-housy" className="img-logo" />
+        </Link>
+        {' '}
+        <List
+          className="list"
+          sx={{ justifyContent: 'space-between' }}
+          style={{
+            marginRight: '150px', alignSelf: 'center', color: '#797B7D',
+          }}
+        >
+          <Link to="/" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button style={{ textDecoration: 'none' }}>
+              <ListItemText primary="Home" />
+            </ListItem>
+          </Link>
+
+          <Link to="/signup" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button>
+              <ListItemText primary="About" />
+            </ListItem>
+          </Link>
+          <Link to="/" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button>
+              <ListItemText primary="Buy" />
+            </ListItem>
+          </Link>
+          <Link to="/" style={{ color: '#797B7D', textDecoration: 'none' }}>
+            <ListItem button>
+              <ListItemText primary="Rent" />
+            </ListItem>
+          </Link>
+        </List>
+
+        <div className="agent">
+          <Button style={{
+            marginRight: '30px', alignSelf: 'center', backgroundColor: '#3781CB', color: '#FFFFFF', textTransform: 'none',
+          }}
+          >
+            {' '}
+            <Link to="/login" className="btn-host">
+              <ListItemText primary="Host my House" style={{ color: '#fff' }} />
+            </Link>
+          </Button>
+          {logged ? (
+            <Link to="/">
+              <Avatar src={PresonImg} />
+            </Link>
+          ) : (
+            ''
+          )}
+        </div>
+
+      </nav>
+    </Container>
+
+  );
+}
+export default NavBar;

client/src/components/Navbar/style.css

@@ -0,0 +1,18 @@
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+.img-logo {
+  width: 90px;
+  height: 80px;
+}
+.list {
+  display: flex;
+  align-self: center;
+}
+.agent {
+  display: flex;
+  flex-direction: row;
+  align-self: center;
+}

client/src/index.js

@@ -7,6 +7,5 @@ ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
-