add Navbarcomponent

src/Pages/Home.js

-import React from 'react';
+import React, { Component } from 'react';
 import app from '../firebase';
 import { Row, Col, Container } from 'react-bootstrap';
 import DataTable from '../components/DataTable';
+import NavBar from '../components/NavBar';
 
 // mock component
 const Map = () => <Col>Map</Col>;
@@ -10,30 +11,44 @@ const RevenueChart = () => <Col>Revenue chart</Col>;
 const PeopleChart = () => <Col>People chart</Col>;
 const RemoteChart = () => <Col>Remote chart</Col>;
 
-const Home = () => {
-	const signOut = async () => {
-		await app.auth().signOut();
+class Home extends Component {
+	state = {
+		currentUser: null,
 	};
-	return (
-		<Container>
-			<h1>Home</h1>
-			<button onClick={signOut}>signOut</button>
-			<Row>
-				<Map />
-			</Row>
-			<Row>
-				<CurrentChart />
-				<RevenueChart />
-			</Row>
-			<Row>
-				<PeopleChart />
-				<RemoteChart />
-			</Row>
-			<Row>
-				<DataTable />
-			</Row>
-		</Container>
-	);
-};
+	componentDidMount() {
+		this.getCurrentUser();
+	}
+
+	getCurrentUser = async () => {
+		const { displayName, email } = await app.auth().currentUser;
+		this.setState({ currentUser: displayName || email });
+	};
+
+	render() {
+		const { currentUser } = this.state;
+
+		return (
+			<>
+				<NavBar user={currentUser} />
+				<Container>
+					<Row>
+						<Map />
+					</Row>
+					<Row>
+						<CurrentChart />
+						<RevenueChart />
+					</Row>
+					<Row>
+						<PeopleChart />
+						<RemoteChart />
+					</Row>
+					<Row>
+						<DataTable />
+					</Row>
+				</Container>
+			</>
+		);
+	}
+}
 
 export default Home;

src/Pages/LogIn/LogInView.js

 import React from 'react';
-import { Card, Form, Button, Container, Row } from 'react-bootstrap';
+import { Card, Form, Button, Container } from 'react-bootstrap';
 const LogInView = ({ onSubmit }) => {
 	return (
 		<Container style={{ alignItems: 'center', paddingTop: '2em', maxWidth: '400px' }}>

src/components/NavBar.js

+import React from 'react';
+import { Navbar, Button } from 'react-bootstrap';
+import app from '../firebase';
+
+const NavbarComponent = ({ user }) => {
+	const signOut = async () => {
+		await app.auth().signOut();
+	};
+	return (
+		<Navbar style={{ backgroundColor: '#49b9ff' }}>
+			<Navbar.Brand style={{ color: '#fff' }}>ToiletCoin Dashboard</Navbar.Brand>
+			<Navbar.Toggle />
+			<Navbar.Collapse className="justify-content-end">
+				<Navbar.Text style={{ color: '#fff' }}>user: {user} </Navbar.Text>
+				<Button variant="link" onClick={signOut} style={{ color: '#fff' }}>
+					Log Out
+				</Button>
+			</Navbar.Collapse>
+		</Navbar>
+	);
+};
+
+export default NavbarComponent;

src/index.js

@@ -6,4 +6,4 @@ import './styles.scss';
 
 ReactDOM.render(<App />, document.getElementById('root'));
 
-serviceWorker.unregister();
+serviceWorker.register();

src/styles.scss

 // Override default variables before the import
 // $body-bg: #000;
 
+.body {
+	background: linear-gradient(45deg, #f7f7f7, #e3e3e3);
+}
+
 // Import Bootstrap and its default variables
 @import '~bootstrap/scss/bootstrap.scss';