From 4045b4bbe53ea417bab1792b7a3a9491e78b3d98 Mon Sep 17 00:00:00 2001
From: Pierre-Louis Guhur <pierre-louis.guhur@laposte.net>
Date: Wed, 4 Jan 2023 19:57:01 +0100
Subject: [PATCH] fix: menu

---
 components/Experience.tsx       |   7 +-
 components/layouts/Footer.tsx   |  13 ++-
 components/layouts/Header.tsx   | 196 ++++++++++++++++++--------------
 pages/index.tsx                 |   5 +-
 pages/vote/[pid]/[[...tid]].tsx |   5 +-
 services/routes.ts              |   7 +-
 6 files changed, 134 insertions(+), 99 deletions(-)

diff --git a/components/Experience.tsx b/components/Experience.tsx
index 649b114..70f0c26 100644
--- a/components/Experience.tsx
+++ b/components/Experience.tsx
@@ -9,8 +9,11 @@ import vote from '../public/vote.svg';
 const Experiencediv = () => {
   const { t } = useTranslation('resource');
   return (
-    <div className="mt-5">
-      <div className="w-100 justify-content-end d-flex d-md-none">
+    <div className="pt-5">
+      <div
+        className="w-100 justify-content-end d-flex d-md-none"
+        style={{ marginTop: '-150px' }}
+      >
         <Image src={vote} alt={t('home.alt-icon-ballot')} />
       </div>
 
diff --git a/components/layouts/Footer.tsx b/components/layouts/Footer.tsx
index 92aac0c..17a0497 100644
--- a/components/layouts/Footer.tsx
+++ b/components/layouts/Footer.tsx
@@ -1,4 +1,5 @@
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
 import { Button, Row, Col } from 'reactstrap';
 import Logo from '@components/Logo';
@@ -10,9 +11,11 @@ import {
   PAYPAL,
   WHO_WE_ARE_LINK,
 } from '@services/constants';
+import { getUrl, RouteTypes } from '@services/routes';
 
 const Footer = () => {
   const { t } = useTranslation();
+  const router = useRouter();
   const [app, _] = useAppContext();
 
   if (app.fullPage) {
@@ -42,10 +45,16 @@ const Footer = () => {
       ),
     },
     {
-      component: <Link href="/faq">{t('menu.faq')}</Link>,
+      component: (
+        <Link href={getUrl(RouteTypes.FAQ, router)}>{t('menu.faq')}</Link>
+      ),
     },
     {
-      component: <Link href={NEWS_LINK}>{t('menu.news')}</Link>,
+      component: (
+        <a target="_blank" rel="noopener noreferrer" href={NEWS_LINK}>
+          {t('menu.news')}
+        </a>
+      ),
     },
     {
       component: (
diff --git a/components/layouts/Header.tsx b/components/layouts/Header.tsx
index 9937f8a..8ab7ebd 100644
--- a/components/layouts/Header.tsx
+++ b/components/layouts/Header.tsx
@@ -1,20 +1,99 @@
 /* eslint react/prop-types: 0 */
-import {useState} from 'react';
-import {Collapse, Nav, NavItem, Button} from 'reactstrap';
+import { useState } from 'react';
+import { Collapse, Nav, NavItem, Button } from 'reactstrap';
 import Link from 'next/link';
 import Image from 'next/image';
-import {useTranslation} from 'next-i18next';
-import {useAppContext} from '@services/context';
+import { useTranslation } from 'next-i18next';
+import { useAppContext } from '@services/context';
 import LanguageSelector from './LanguageSelector';
 import openMenuIcon from '../../public/open-menu-icon.svg';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import {
+  CONTACT_MAIL,
+  MAJORITY_JUDGMENT_LINK,
+  NEWS_LINK,
+  PAYPAL,
+  WHO_WE_ARE_LINK,
+} from '@services/constants';
+import ShareRow from '@components/Share';
+import { getUrl, RouteTypes } from '@services/routes';
+import { useRouter } from 'next/router';
+import Logo from '@components/Logo';
 
 const Header = () => {
   const [isOpen, setOpen] = useState(false);
+  const router = useRouter();
+  const { t } = useTranslation();
   const [app, _] = useAppContext();
 
   const toggle = () => setOpen(!isOpen);
 
-  if (app.fullPage) {return null;}
+  if (app.fullPage) {
+    return null;
+  }
+
+  const menu = [
+    {
+      component: (
+        <a
+          href={MAJORITY_JUDGMENT_LINK}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="navbar-my-link nav-link"
+        >
+          {t('menu.majority-judgment')}
+        </a>
+      ),
+    },
+    {
+      component: (
+        <a
+          href={WHO_WE_ARE_LINK}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="navbar-my-link nav-link"
+        >
+          {t('menu.whoarewe')}
+        </a>
+      ),
+    },
+    {
+      component: (
+        <Link
+          href={getUrl(RouteTypes.FAQ, router)}
+          className="navbar-my-link nav-link"
+        >
+          {t('menu.faq')}
+        </Link>
+      ),
+    },
+    {
+      component: (
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href={NEWS_LINK}
+          className="navbar-my-link nav-link"
+        >
+          {t('menu.news')}
+        </a>
+      ),
+    },
+    {
+      component: (
+        <a
+          href="mailto:app@mieuxvoter.fr?subject=[HELP]"
+          className="navbar-my-link nav-link"
+        >
+          {t('menu.contact-us')}
+        </a>
+      ),
+    },
+    {
+      component: <LanguageSelector selectedSize={24} />,
+    },
+  ];
 
   return (
     <>
@@ -30,90 +109,39 @@ const Header = () => {
 
       <Collapse isOpen={isOpen} navbar>
         <Nav className="navbar-nav-scroll" navbar>
-          <div className="d-flex flex-row justify-content-between nav-logo">
-            <Link href="/" className="navbar-brand navbar-brand-mobile">
-              <img src="/logos/logo.svg" alt="logo" height="80" />
-            </Link>
-
-            <Button
-              onClick={toggle}
-              className="navbar-toggle navbar-close-button"
-            >
-              <img height="20" src="/close-menu-icon.svg" alt="logo" />
-            </Button>
-          </div>
-          <div>
-            <NavItem>
-              <Link
-                href="/"
-                onClick={toggle}
-                className="navbar-my-link nav-link"
-              >
-                Le jugement majoritaire
-              </Link>
-            </NavItem>
-
-            <NavItem>
-              <Link
-                href="/"
-                onClick={toggle}
-                className="navbar-my-link nav-link"
-              >
-                Qui sommes-nous ?
-              </Link>
-            </NavItem>
-
-            <NavItem>
-              <Link
-                href="/"
-                onClick={toggle}
-                className="navbar-my-link nav-link"
-              >
-                Foire aux questions
-              </Link>
-            </NavItem>
+          <div className="d-flex flex-column min-vh-100 justify-content-between">
+            <div>
+              <div className="d-flex flex-row justify-content-between align-items-center nav-logo">
+                <Link href="/" className="navbar-brand navbar-brand-mobile">
+                  <img src="/logos/logo.svg" alt="logo" height="80" />
+                </Link>
 
-            <NavItem>
-              <Link
-                href="/"
-                onClick={toggle}
-                className="navbar-my-link nav-link"
-              >
-                On parle de nous
-              </Link>
-            </NavItem>
+                <FontAwesomeIcon
+                  icon={faXmark}
+                  onClick={toggle}
+                  size="2x"
+                  role="button"
+                  className="navbar-toggle navbar-close-button"
+                />
+              </div>
+              <div>
+                {menu.map((item, i) => (
+                  <NavItem key={i}>{item.component}</NavItem>
+                ))}
+              </div>
 
-            <NavItem>
-              <Link
-                href="/"
-                onClick={toggle}
-                className="navbar-my-link nav-link"
-              >
-                Nous contactez
-              </Link>
-            </NavItem>
+              <hr className="my-3" />
+            </div>
+            <NavItem className="d-flex w-100 align-items-center flex-column">
+              <a href={PAYPAL} target="_blank" rel="noreferrer noopener">
+                <Button color="primary" className="text-white">
+                  {t('common.support-us')}
+                </Button>
+              </a>
 
-            <NavItem>
-              <LanguageSelector selectedSize={24} />
+              <ShareRow />
             </NavItem>
           </div>
-
-          <NavItem className="navbar-credits-container">
-            <Button className="btn-primary btn-nav">
-              <a href="/">Soutenez-nous</a>
-            </Button>
-
-            <hr />
-            <div className="navbar-credits sharing sharing-mobile">
-              <p>Partagez l’application Mieux voter</p>
-              <Link href="https://www.facebook.com/mieuxvoter.fr/">
-                <img src="/facebook.svg" />
-              </Link>
-              <Link href="https://twitter.com/mieux_voter">
-                <img src="/twitter.svg" />
-              </Link>
-            </div>
-          </NavItem>
         </Nav>
       </Collapse>
     </>
diff --git a/pages/index.tsx b/pages/index.tsx
index 6469445..813abe5 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -138,10 +138,7 @@ const Home = () => {
         <StartForm />
       </div>
       <section className="sectionTwoHome  pb-5 text-center">
-        <div className="d-none d-md-block pt-5 mt-5">
-          <AdvantagesRow />
-        </div>
-        <div className="d-md-none d-block">
+        <div className=" pt-5 mt-5">
           <AdvantagesRow />
         </div>
         <ExperienceRow />
diff --git a/pages/vote/[pid]/[[...tid]].tsx b/pages/vote/[pid]/[[...tid]].tsx
index 069c3cd..45258dd 100644
--- a/pages/vote/[pid]/[[...tid]].tsx
+++ b/pages/vote/[pid]/[[...tid]].tsx
@@ -129,10 +129,7 @@ const Vote = ({ electionRef, token }: VoteInterface) => {
         <GoToBallotConfirmMobile electionRef={electionRef} token={token} />
       </section>
       <section className="sectionTwoHome p-2 pb-5 text-center">
-        <div className="d-none d-md-block pt-5 mt-5">
-          <AdvantagesRow />
-        </div>
-        <div className="d-md-none d-block">
+        <div className=" pt-5 mt-5">
           <AdvantagesRow />
         </div>
         <ExperienceRow />
diff --git a/services/routes.ts b/services/routes.ts
index 39ad9b5..bb0fda8 100644
--- a/services/routes.ts
+++ b/services/routes.ts
@@ -5,13 +5,14 @@ import { NextRouter } from 'next/router';
 import { getWindowUrl, displayRef, getLocaleShort } from './utils';
 
 export enum RouteTypes {
-  HOME = '',
-  CREATE_ELECTION = 'admin/new',
   ADMIN = 'admin',
   BALLOT = 'ballot',
+  CREATE_ELECTION = 'admin/new',
   ENDED_VOTE = 'end',
-  VOTE = 'vote',
+  FAQ = 'faq',
+  HOME = '',
   RESULTS = 'result',
+  VOTE = 'vote',
 }
 
 export const getUrl = (