41 lines
1.6 KiB
JavaScript
41 lines
1.6 KiB
JavaScript
|
import "./styles/Layout.css";
|
||
|
|
import "./styles/extra.css";
|
||
|
|
import React from "react";
|
||
|
|
import { NavLink, Route, Routes } from "react-router-dom";
|
||
|
|
import Welcome from "./pages/Welcome";
|
||
|
|
import Navbar from "react-bootstrap/Navbar";
|
||
|
|
import { Container, Nav, NavbarBrand } from "react-bootstrap";
|
||
|
|
import NavbarToggle from "react-bootstrap/esm/NavbarToggle";
|
||
|
|
import NavbarCollapse from "react-bootstrap/esm/NavbarCollapse";
|
||
|
|
export default class Layout extends React.Component {
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<div id="app">
|
||
|
|
<header>
|
||
|
|
<Navbar bg="light" expand="md">
|
||
|
|
<Container>
|
||
|
|
<NavbarBrand href="/">Sports Matcher</NavbarBrand>
|
||
|
|
<NavbarToggle aria-controls="navigation"></NavbarToggle>
|
||
|
|
<NavbarCollapse id="main-nav">
|
||
|
|
<Nav className="me-auto">
|
||
|
|
<li className="nav-item">
|
||
|
|
<NavLink className="nav-link" to="/" >Home</NavLink>
|
||
|
|
</li>
|
||
|
|
</Nav>
|
||
|
|
</NavbarCollapse>
|
||
|
|
</Container>
|
||
|
|
</Navbar>
|
||
|
|
</header>
|
||
|
|
<main>
|
||
|
|
<Routes>
|
||
|
|
<Route path="/" element={<Welcome></Welcome>}>
|
||
|
|
</Route>
|
||
|
|
</Routes>
|
||
|
|
</main>
|
||
|
|
<footer>
|
||
|
|
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|