memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ajout d'une belle navbar/topbar

Browse Source
This commit is contained in:
Medenos 2022-09-27 22:04:22 -04:00
parent 17314f1b74
commit 54e16cb05d
4 changed files with 47 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
GrossesMitaines/grosses-mitaines-ui/src/components/Navbar.js
View File

@ -1,25 +0,0 @@
import React from "react";
import { Link } from "react-router-dom";
const Navbar = () => {
return (
<nav>
<ul>
<li>
<Link to="/">Maison</Link>
</li>
<li>
<Link to="/aboutUs">À propos de nous</Link>
</li>
<li>
<Link to="/contactUs">Contactez-nous</Link>
</li>
<li>
<Link to="/privacy">Vie privée</Link>
</li>
</ul>
</nav>
);
}
export default Navbar;

37
GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js Normal file
View File

@ -0,0 +1,37 @@
import React from "react";
import { Link } from "react-router-dom";
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';
const Topbar = () => {
return (
<Navbar expand="sm" className="topbar-container">
<Container>
<Navbar.Brand href="/">
<img src="/images/LesGrossesMitaines.png" height="60"/>
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link href="/" >
Maison
</Nav.Link>
<Nav.Link href="/aboutUs" >
À propos de nous
</Nav.Link>
<Nav.Link href="/contactUs" >
Contactez-nous
</Nav.Link>
<Nav.Link href="/privacy" >
Vie privée
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
);
}
export default Topbar;

4
GrossesMitaines/grosses-mitaines-ui/src/pages/Layout.js
View File

@ -1,12 +1,12 @@
import React from "react"; import React from "react";
import { Outlet } from "react-router-dom"; import { Outlet } from "react-router-dom";
import Navbar from "../components/Navbar"; import Topbar from "../components/Topbar";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
const Layout = () => { const Layout = () => {
return ( return (
<> <>
<Navbar /> <Topbar />
<Outlet /> <Outlet />
<Footer /> <Footer />
</> </>

9
GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
View File

@ -6,6 +6,13 @@ body {
background-size: cover; background-size: cover;
} }
.topbar-container{
background-color: beige;
margin-bottom: 2%;
border-bottom: rgb(82, 4, 82) solid 1px;
box-shadow: 0px 3px rgba(82, 4, 82, .5);
}
.research-container { .research-container {
/* border: black solid 1px; */ /* border: black solid 1px; */
padding: 4px 6px 4px 6px; padding: 4px 6px 4px 6px;
@ -14,7 +21,7 @@ body {
border-radius: 5px; border-radius: 5px;
height: 40px; height: 40px;
margin:auto; margin:auto;
margin-bottom: 5px; margin-bottom: 2%;
width: 90%; width: 90%;
} }