text: import React from 'react';
  import ReactDOM from 'react-dom';
  
  
  const Navbar = () => {
      return (
          <>
          <div className="collapse bg-dark" id="navbarHeader">
              <div className="container">
                  <div className="row">
                      <div className="col-sm-8 col-md-7 py-4">
                          <h4 className="text-white">About</h4>
                          <p className="text-white">Il s'agit d'un projet de e-commerce qu'on devait faire en 1 mois.</p>
                      </div>
                      <div className="col-sm-4 offset-md-1 py-4">
                          <h4 className="text-white">Contact</h4>
                          <ul className="list-unstyled">
                              <li><a href="#" className="text-white">Follow on Twitter</a></li>
                              <li><a href="#" className="text-white">Like on Facebook</a></li>
                              <li><a href="#" className="text-white">Email me</a></li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div>
          <div className="navbar navbar-dark bg-dark box-shadow">
              <div className="container d-flex justify-content-between">
              <a href="{{route('homepage')}} " class="navbar-brand d-flex align-items-center">
                  <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-house-door-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path d="M6.5 10.995V14.5a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V11c0-.25-.25-.5-.5-.5H7c-.25 0-.5.25-.5.495z"/>
                      <path fill-rule="evenodd" d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
                  </svg>
                  <strong class="btncommerce"> E-commerce</strong>
              </a>
                  <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
                      <span className="navbar-toggler-icon"></span>
                  </button>
                  <ul className="navbar-nav">
                      <li className="nav-item">
                          <a className="nav-link" href="#"><i className="fa fa-shopping-cart"></i> Panier</a>
                      </li>
                  </ul>
              </div>
          </div>
  
          <nav className="navbar navbar-expand-lg navbar-light bg-red">
              <a className="navbar-brand" href="#"></a>
              <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                  <span className="navbar-toggler-icon"></span>
              </button>
              <div className="collapse navbar-collapse justify-content-center" id="navbarNav">
                  <ul className="navbar-nav">
                      <li className="nav-item">
                          <a className="nav-link" href="#">Films</a>
                      </li>
                      <li className="nav-item">
                          <a className="nav-link" href="#">Séries TV</a>
                      </li>
                      <li className="nav-item">
                          <a className="nav-link" href="#">Musique</a>
                      </li>
                      <li className="nav-item">
                          <a className="nav-link" href="#">Jeux-vidéos</a>
                      </li>
                      <li className="nav-item">
                          <a className="nav-link" href="#">Sport</a>
                      </li>
                  </ul>
              </div>
          </nav>
          </>
      );
  };
  
  export default Navbar;
  
  if (document.getElementById('navbar')) {
      ReactDOM.render(<Navbar />, document.getElementById('navbar'));
  } 
  