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 { initializeApp } from "firebase/app";
|
||||||
import {Routes, Route} from "react-router-dom";
|
import {Routes, Route} from "react-router-dom";
|
||||||
|
|
||||||
import "react-bootstrap/Container"
|
import { Header } from "./components/Header";
|
||||||
import "react-bootstrap/Navbar"
|
|
||||||
import "react-bootstrap/Nav"
|
|
||||||
import './App.css';
|
import './App.css';
|
||||||
import { About } from "./pages/About";
|
import { About } from "./pages/About";
|
||||||
import { Home } from "./pages/Home";
|
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