From f03d50b47493a7cc41a93aa9b5beb2ac53bcc53e Mon Sep 17 00:00:00 2001
From: Medenos <masfervic@hotmail.com>
Date: Tue, 27 Sep 2022 22:40:07 -0400
Subject: [PATCH] changement des Nav.Link pour des Link avec nav-link en class.
 Permet de ne pas reloader la page quand on la change tout en changeant l'URL

---
 .../src/components/Footer.js                  | 36 +++++++++++++++++--
 .../src/components/Topbar.js                  | 24 ++++++-------
 .../src/stylesheets/site.css                  |  5 +++
 3 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Footer.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Footer.js
index c668df0..b61816d 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Footer.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Footer.js
@@ -1,10 +1,42 @@
 import React from "react";
+import { Link } from "react-router-dom";
+
 
 const Footer = () => {
 
     return (
-        <footer>
-            Footer
+        <footer className="footer-container footer">
+            <div className="row">
+                <div className="col-4">
+                    <Link to="/aboutUs" className="text-light">À Propos</Link>
+                </div>
+                <div className="col-4">
+                    <a className="text-light" >Nous Contacter</a>
+                </div>
+                <div className="col-4">
+                    <a className="text-light" >Vie Privée</a>
+                </div>
+            </div>
+            <br />
+            <div>
+                <h4 className="footer-msg">
+                    Joignez les plus de 1 000 Québécois qui ont décidés d'acheter GM!
+                </h4>
+            </div>
+            <div >
+                <h6 >- Nos partenaires -</h6>
+            </div>
+            <div className="row">
+                <div className="col-4">
+                </div>
+                <div className="col-4">
+                </div>
+                <div className="col-4">
+                </div>
+            </div>
+            <div className="row text-white">
+                &copy; 2022 - Les Grosses Mitaines à Ginette et Monique, inc.
+            </div>
         </footer>
     );
 }
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
index afd499a..8e03909 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
+++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
@@ -1,32 +1,32 @@
 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';
+import { Link } from "react-router-dom";
+
 
 const Topbar = () => {
     return (
         <Navbar expand="sm" className="topbar-container">
             <Container>
-                <Navbar.Brand href="/">
+                <Link className="navbar-brand" to="/">
                     <img src="/images/LesGrossesMitaines.png" height="45"/>
-                </Navbar.Brand>
+                </Link>
                 <Navbar.Toggle aria-controls="basic-navbar-nav" />
                 <Navbar.Collapse id="basic-navbar-nav">
                     <Nav className="me-auto">
-                        <Nav.Link href="/" >
+                        <Link className="nav-link" to="/" >
                             Maison
-                        </Nav.Link>
-                        <Nav.Link href="/aboutUs" >
+                        </Link>
+                        <Link className="nav-link" to="/aboutUs" >
                             À propos de nous
-                        </Nav.Link>
-                        <Nav.Link href="/contactUs" >
+                        </Link>
+                        <Link className="nav-link" to="/contactUs" >
                             Contactez-nous
-                        </Nav.Link>
-                        <Nav.Link href="/privacy" >
+                        </Link>
+                        <Link className="nav-link" to="/privacy" >
                             Vie privée
-                        </Nav.Link>
+                        </Link>
                     </Nav>
                 </Navbar.Collapse>
             </Container>
diff --git a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
index b5994c6..f5ffa83 100644
--- a/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
+++ b/GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
@@ -106,6 +106,11 @@ body {
     background-color: plum;
 }
 
+.footer-container{
+    margin-top: 5%;
+    background-color: black;
+}
+
 /* specification pour les écrans plus petits / cells */
 @media (max-width:450px) {
     .featured-img {