Creating Header.js to tidy up navbar from main app

This commit is contained in:
Ray 2023-09-05 09:25:55 +00:00 committed by GitHub
parent 258415b66c
commit fcb03a7b29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 3 deletions

View File

@ -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";

16
src/components/Header.js Normal file
View File

@ -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>)
}