added states to user menues instead of css and fixed width of header …

…and footer
ArthurGuez · Nov 17, 2020 · 3f9daf9 · 3f9daf9
1 parent c184535
commit 3f9daf9
Show file tree

Hide file tree

Showing 12 changed files with 204 additions and 135 deletions.
diff --git a/public/favicon-airbnb.ico b/public/favicon-airbnb.ico
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -2,13 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon-airbnb.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
+    <meta name="description" content="Made with &hearts; by Arthur Guez, Sylvie Lu & My Vo" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -24,7 +21,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Airbnb Fullstack</title>
+    <title>Locations de vacances, logements, expériences et lieux - Airbnb</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/src/assets/favicon/favicon.ico b/src/assets/favicon/favicon.ico
diff --git a/src/components/nav/GuestTopNav.jsx b/src/components/nav/GuestTopNav.jsx
@@ -23,12 +23,44 @@ const customStyles = {
 
 Modal.setAppElement('#root');
 
-function GuestTopNav() {
+function GuestTopNav({ openUser, setOpenUser, openCurLang, setOpenCurLang }) {
   const [modalIsOpen, setModalIsOpen] = useState(false);
+
+  function windowOnClick(event) {
+    if (!event.target.matches('.topnav__dropdownone-button')) {
+      setOpenCurLang(false);
+    }
+    if (!event.target.matches('.topnav__dropdowntwo-button')) {
+      setOpenUser(false);
+    }
+    window.removeEventListener('click', windowOnClick);
+  }
+
+  function curLangMenuOnClick(event) {
+    event.stopPropagation();
+    setOpenCurLang(true);
+    setOpenUser(false);
+    window.addEventListener('click', windowOnClick);
+  }
+
+  function userMenuOnClick(event) {
+    event.stopPropagation();
+    setOpenUser(true);
+    setOpenCurLang(false);
+    window.addEventListener('click', windowOnClick);
+  }
+
   return (
     <nav className="topnav">
       <div className="topnav__dropdownone">
-        <button type="button" className="topnav__dropdownone-button">
+        <button
+          type="button"
+          className="topnav__dropdownone-button"
+          onClick={(event) => {
+            curLangMenuOnClick(event);
+            setOpenCurLang(!openCurLang);
+          }}
+        >
           <img
             className="topnav__dropdownone-button-iconone"
             src={worldIcon}
@@ -40,57 +72,68 @@ function GuestTopNav() {
             alt="icône menu deroulant"
           />
         </button>
-        <ul className="topnav__dropdownone-list">
-          <li className="topnav__dropdownone-item">
-            <a href="#">
-              <img
-                className="topnav__dropdownone-button-iconone"
-                src={worldIcon}
-                alt="icône langues devise"
-              />
-              <p>Français (FR)</p>
-            </a>
-          </li>
-          <li className="topnav__dropdownone-item">
-            <a href="#">
-              <p>€</p>
-              <p>EUR</p>
-            </a>
-          </li>
-        </ul>
+        {openCurLang ? (
+          <ul className="topnav__dropdownone-list">
+            <li className="topnav__dropdownone-item">
+              <a href="#">
+                <img
+                  className="topnav__dropdownone-button-iconone"
+                  src={worldIcon}
+                  alt="icône langues devise"
+                />
+                <p>Français (FR)</p>
+              </a>
+            </li>
+            <li className="topnav__dropdownone-item">
+              <a href="#">
+                <p>€</p>
+                <p>EUR</p>
+              </a>
+            </li>
+          </ul>
+        ) : null}
       </div>
       <div className="topnav__dropdowntwo">
-        <button type="button" className="topnav__dropdowntwo-button">
+        <button
+          type="button"
+          className="topnav__dropdowntwo-button"
+          onClick={(event) => {
+            userMenuOnClick(event);
+            setOpenUser(!openUser);
+          }}
+        >
           <img className="topnav__dropdowntwo-button-iconone" src={listIcon} alt="icône liste" />
           <img className="topnav__dropdowntwo-button-icontwo" src={userIcon} alt="" />
         </button>
-        <ul className="topnav__dropdowntwo-list">
-          <li className="topnav__dropdowntwo-item">
-            <a href="/login">Connexion</a>
-          </li>
-          <li className="topnav__dropdowntwo-item">
-            <Link className="topnav__link" to="" onClick={() => setModalIsOpen(true)}>
-              <span>
-                <strong>Inscription</strong>
-              </span>
-            </Link>
-            <Modal
-              isOpen={modalIsOpen}
-              onRequestClose={() => setModalIsOpen(false)}
-              style={customStyles}
-            >
-              <button
-                type="button"
-                className="crossbtn"
-                title="close modal"
-                onClick={() => setModalIsOpen(false)}
+        {openUser ? (
+          <ul className="topnav__dropdowntwo-list">
+            <li className="topnav__dropdowntwo-item">
+              <a href="/login">Connexion</a>
+            </li>
+            <li className="topnav__dropdowntwo-item">
+              <Link className="topnav__link" to="" onClick={() => setModalIsOpen(true)}>
+                <span>
+                  <strong>Inscription</strong>
+                </span>
+              </Link>
+              <Modal
+                isOpen={modalIsOpen}
+                onRequestClose={() => setModalIsOpen(false)}
+                style={customStyles}
               >
-                ✕
-              </button>
-              <ModalSignup />
-            </Modal>
-          </li>
-        </ul>
+                <button
+                  type="button"
+                  className="crossbtn"
+                  title="close modal"
+                  onClick={() => setModalIsOpen(false)}
+                >
+                  ✕
+                </button>
+                <ModalSignup />
+              </Modal>
+            </li>
+          </ul>
+        ) : null}
       </div>
     </nav>
   );

diff --git a/src/components/nav/LoggedTopNav.jsx b/src/components/nav/LoggedTopNav.jsx
@@ -7,20 +7,53 @@ import worldIcon from '../../assets/images/icons/globe.svg';
 import unrollIcon from '../../assets/images/icons/unroll.svg';
 import listIcon from '../../assets/images/icons/list.svg';
 
-function LoggedTopNav() {
+const LoggedTopNav = ({ openUser, setOpenUser, openCurLang, setOpenCurLang }) => {
   const { dispatch } = useContext(AuthContext);
   const history = useHistory();
+
   const logOut = async (event) => {
     event.preventDefault();
     dispatch({
       type: 'LOGOUT',
     });
     history.push('/');
   };
+
+  function windowOnClick(event) {
+    if (!event.target.matches('.topnav__dropdownone-button')) {
+      setOpenCurLang(false);
+    }
+    if (!event.target.matches('.topnav__dropdowntwo-button')) {
+      setOpenUser(false);
+    }
+    window.removeEventListener('click', windowOnClick);
+  }
+
+  function curLangMenuOnClick(event) {
+    event.stopPropagation();
+    setOpenCurLang(true);
+    setOpenUser(false);
+    window.addEventListener('click', windowOnClick);
+  }
+
+  function userMenuOnClick(event) {
+    event.stopPropagation();
+    setOpenUser(true);
+    setOpenCurLang(false);
+    window.addEventListener('click', windowOnClick);
+  }
+
   return (
     <nav className="topnav">
       <div className="topnav__dropdownone">
-        <button type="button" className="topnav__dropdownone-button">
+        <button
+          type="button"
+          className="topnav__dropdownone-button"
+          onClick={(event) => {
+            curLangMenuOnClick(event);
+            setOpenCurLang(!openCurLang);
+          }}
+        >
           <img
             className="topnav__dropdownone-button-iconone"
             src={worldIcon}
@@ -32,57 +65,70 @@ function LoggedTopNav() {
             alt="icône menu deroulant"
           />
         </button>
-        <ul className="topnav__dropdownone-list">
-          <li className="topnav__dropdownone-item">
-            <a href="#">
-              <img
-                className="topnav__dropdownone-button-iconone"
-                src={worldIcon}
-                alt="icône langues devise"
-              />
-              <p>Français (FR)</p>
-            </a>
-          </li>
-          <li className="topnav__dropdownone-item">
-            <a href="#">
-              <p>€</p>
-              <p>EUR</p>
-            </a>
-          </li>
-        </ul>
+        {openCurLang ? (
+          <ul className="topnav__dropdownone-list">
+            <li className="topnav__dropdownone-item">
+              <a href="#">
+                <img
+                  className="topnav__dropdownone-button-iconone"
+                  src={worldIcon}
+                  alt="icône langues devise"
+                />
+                <p>Français (FR)</p>
+              </a>
+            </li>
+            <li className="topnav__dropdownone-item">
+              <a href="#">
+                <p>€</p>
+                <p>EUR</p>
+              </a>
+            </li>
+          </ul>
+        ) : null}
       </div>
       <div className="topnav__dropdowntwo">
-        <button type="button" className="topnav__dropdowntwo-button">
+        <button
+          type="button"
+          className="topnav__dropdowntwo-button"
+          onClick={(event) => {
+            userMenuOnClick(event);
+            setOpenUser(!openUser);
+          }}
+        >
           <img className="topnav__dropdowntwo-button-iconone" src={listIcon} alt="icône liste" />
           <img
             className="topnav__dropdowntwo-button-icontwolog"
             src="https://pngimage.net/wp-content/uploads/2018/06/react-icon-png-7.png"
             alt="utilisateur connecté"
           />
         </button>
-        <ul className="topnav__dropdowntwo-list">
-          <li className="topnav__dropdowntwo-item">
-            <a href="/inbox">Messages</a>
-          </li>
-          <li className="topnav__dropdowntwo-item">
-            <a href="#">Notifications</a>
-          </li>
-          <li className="topnav__dropdowntwo-item">
-            <a href="/bookings">Voyages</a>
-          </li>
-          <li className="topnav__dropdowntwo-item">
-            <a href="/wishlists">Enregistrés</a>
-          </li>
-          <li className="topnav__dropdowntwo-item">
-            <a href="/account-settings">Profil</a>
-          </li>
-          <li className="topnav__dropdowntwo-item">
-            <a href="/login" onClick={logOut}>Déconnexion</a>
-          </li>
-        </ul>
+        {openUser ? (
+          <ul className="topnav__dropdowntwo-list">
+            <li className="topnav__dropdowntwo-item">
+              <a href="/inbox">Messages</a>
+            </li>
+            <li className="topnav__dropdowntwo-item">
+              <a href="#">Notifications</a>
+            </li>
+            <li className="topnav__dropdowntwo-item">
+              <a href="/bookings">Voyages</a>
+            </li>
+            <li className="topnav__dropdowntwo-item">
+              <a href="/wishlists">Enregistrés</a>
+            </li>
+            <li className="topnav__dropdowntwo-item">
+              <a href="/account-settings">Profil</a>
+            </li>
+            <li className="topnav__dropdowntwo-item">
+              <a href="/login" onClick={logOut}>
+                Déconnexion
+              </a>
+            </li>
+          </ul>
+        ) : null}
       </div>
     </nav>
   );
-}
+};
 
 export default LoggedTopNav;
diff --git a/src/components/nav/TopNavbar.jsx b/src/components/nav/TopNavbar.jsx
@@ -1,5 +1,4 @@
-import React, { useContext } from 'react';
-// import { Breakpoint } from 'react-socks';
+import React, { useContext, useState } from 'react';
 
 import { AuthContext } from '../../context/auth';
 
@@ -8,17 +7,29 @@ import GuestTopNav from './GuestTopNav';
 
 const TopNavbar = () => {
   const { state: authState } = useContext(AuthContext);
+  const [openUser, setOpenUser] = useState(false);
+  const [openCurLang, setOpenCurLang] = useState(false);
 
   if (authState.isAuthenticated) {
     return (
       <>
-        <LoggedTopNav />
+        <LoggedTopNav
+          openUser={openUser}
+          setOpenUser={setOpenUser}
+          openCurLang={openCurLang}
+          setOpenCurLang={setOpenCurLang}
+        />
       </>
     );
   }
   return (
     <>
-      <GuestTopNav />
+      <GuestTopNav
+        openUser={openUser}
+        setOpenUser={setOpenUser}
+        openCurLang={openCurLang}
+        setOpenCurLang={setOpenCurLang}
+      />
     </>
   );
 };