Creating Header.js to tidy up navbar from main app
This commit is contained in:
parent
258415b66c
commit
fcb03a7b29
|
@ -2,9 +2,7 @@ import { FirebaseConfig } from "./config/Config";
|
|||
import { initializeApp } from "firebase/app";
|
||||
import {Routes, Route} from "react-router-dom";
|
||||
|
||||
import "react-bootstrap/Container"
|
||||
import "react-bootstrap/Navbar"
|
||||
import "react-bootstrap/Nav"
|
||||
import { Header } from "./components/Header";
|
||||
import './App.css';
|
||||
import { About } from "./pages/About";
|
||||
import { Home } from "./pages/Home";
|
||||
|
|
|
@ -0,0 +1,16 @@
|
|||
import Container from "react-bootstrap/Container"
|
||||
import Navbar from "react-bootstrap/Navbar"
|
||||
import Nav from "react-bootstrap/Nav"
|
||||
|
||||
export function Header ( props ) {
|
||||
return ( <Navbar>
|
||||
<Container>
|
||||
<Navbar.Brand>App</Navbar.Brand>
|
||||
<Nav>
|
||||
<Nav.Link href="/">Home</Nav.Link>
|
||||
<Nav.Link href="/about">About</Nav.Link>
|
||||
<Nav.Link href="/contact">Contact</Nav.Link>
|
||||
</Nav>
|
||||
</Container>
|
||||
</Navbar>)
|
||||
}
|
Loading…
Reference in New Issue