working

frontend/src/components/Navbar/DefaultNavbar.js

@@ -0,0 +1,37 @@
+import React from "react";
+
+import { Navbar, Nav, Container } from "react-bootstrap";
+import { LinkContainer } from "react-router-bootstrap";
+
+const LogedinNavbar = () => {
+	return (
+		<div>
+			<Navbar variant="dark" bg="dark" expand="lg">
+				<Container>
+					<LinkContainer to="/" style={{ color: "#519032" }}>
+						<Navbar.Brand>EconoWhatsBot</Navbar.Brand>
+					</LinkContainer>
+					<Navbar.Toggle aria-controls="responsive-navbar-nav" />
+					<Navbar.Collapse id="responsive-navbar-nav">
+						<Nav className="mr-auto">
+							<LinkContainer to="/">
+								<Nav.Link href="#home">Home</Nav.Link>
+							</LinkContainer>
+							<LinkContainer to="/chat">
+								<Nav.Link href="#link">Chat</Nav.Link>
+							</LinkContainer>
+						</Nav>
+						<LinkContainer to="/login">
+							<Nav.Link href="#login">Login</Nav.Link>
+						</LinkContainer>
+						<LinkContainer to="/signup">
+							<Nav.Link href="#signup">Signup</Nav.Link>
+						</LinkContainer>
+					</Navbar.Collapse>
+				</Container>
+			</Navbar>
+		</div>
+	);
+};
+
+export default LogedinNavbar;

frontend/src/components/Navbar/LogedinNavbar.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import { Navbar, Nav, Container } from "react-bootstrap";
+import { LinkContainer } from "react-router-bootstrap";
+
+const DefaultNavbar = () => {
+	const username = localStorage.getItem("username");
+	const history = useHistory();
+
+	const handleLogout = e => {
+		e.preventDefault();
+		localStorage.removeItem("token");
+		localStorage.removeItem("userName");
+		localStorage.removeItem("userId");
+		history.push("/");
+	};
+
+	return (
+		<div>
+			<Navbar variant="dark" bg="dark" expand="lg">
+				<Container>
+					<LinkContainer to="/" style={{ color: "#519032" }}>
+						<Navbar.Brand>EconoWhatsBot</Navbar.Brand>
+					</LinkContainer>
+					<Navbar.Toggle aria-controls="responsive-navbar-nav" />
+					<Navbar.Collapse id="responsive-navbar-nav">
+						<Nav className="mr-auto">
+							<LinkContainer to="/">
+								<Nav.Link href="#home">Home</Nav.Link>
+							</LinkContainer>
+							<LinkContainer to="/chat">
+								<Nav.Link href="#link">Chat</Nav.Link>
+							</LinkContainer>
+						</Nav>
+						<Navbar.Text>
+							Logado como: <a href="#login">{username}</a>
+						</Navbar.Text>
+						<Nav.Link href="#logout" onClick={handleLogout}>
+							Logout
+						</Nav.Link>
+					</Navbar.Collapse>
+				</Container>
+			</Navbar>
+		</div>
+	);
+};
+
+export default DefaultNavbar;