feat(static-pages) : hide/show tack(dash) on footer

src/components/layouts/Footer.jsx

@@ -1,60 +1,73 @@
 /* eslint react/prop-types: 0 */
-import React, { Component } from "react";
+import React from "react";
 import { withTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import Paypal from "../banner/Paypal";
+import {useBbox} from "./useBbox";
+import "./footer.css";
 
-class Footer extends Component {
+const Footer = props => {
-  constructor(props) {
+  const linkStyle = { whiteSpace: "nowrap" };
-    super(props);
+  const { t } = props;
-    this.state = {};
-  }
 
-  render() {
+  const [bboxLink1, link1] = useBbox();
-    const linkStyle = { whiteSpace: "nowrap" };
+  const [bboxLink2, link2] = useBbox();
-    const { t } = this.props;
+  const [bboxLink3, link3] = useBbox();
-    return (
+  const [bboxLink4, link4] = useBbox();
-      <footer className="text-center">
+  const [bboxLink5, link5] = useBbox();
-        <div>
+  const [bboxLink6, link6] = useBbox();
-        <Link to="/" style={linkStyle}>
+
-          {t("Homepage")}
+  return (
-        </Link>
+    <footer className="text-center">
-        <span className="m-2">-</span>
+      <div>
-        <a
+        <ul className="tacky">
-          href="https://github.com/MieuxVoter"
+          <li ref={link1} className={(bboxLink1.top===bboxLink2.top)?"":"no-tack"}>
-          target="_blank"
+            <Link to="/" style={linkStyle} >
-          rel="noopener noreferrer"
+              {t("Homepage")}
-          style={linkStyle}
+            </Link>
-        >
+          </li>
-          {t("Source code")}
+          <li ref={link2} className={(bboxLink2.top===bboxLink3.top)?"":"no-tack"}>
-        </a>
+            {" "}
-        <span className="m-2">-</span>
+            <a
-        <a
+              href="https://github.com/MieuxVoter"
-          href="https://mieuxvoter.fr/"
+              target="_blank"
-          target="_blank"
+              rel="noopener noreferrer"
-          rel="noopener noreferrer"
+              style={linkStyle}
-          style={linkStyle}
+            >
-        >
+              {t("Source code")}
-          {t("Who are we?")}
+            </a>
-        </a>
+          </li>
-        </div>
+          <li ref={link3} className={(bboxLink3.top===bboxLink4.top)?"":"no-tack"}>
-          <span className="m-2">-</span>
+            <a
-          <Link to="/legal-notices" style={linkStyle}>
+              href="https://mieuxvoter.fr/"
-              {t('Legal notices')}
+              target="_blank"
-          </Link>
+              rel="noopener noreferrer"
-          <span className="m-2">-</span>
+              style={linkStyle}
-          <Link to="/privacy-policy" style={linkStyle}>
+            >
-              {t('Privacy policy')}
+              {t("Who are we?")}
-          </Link>
+            </a>
-          <span className="m-2">-</span>
+          </li>
-          <Link to="/faq" style={linkStyle}>
+            <li ref={link4} className={(bboxLink4.top===bboxLink5.top)?"":"no-tack"}>
-              {t('faq')}
+                <Link to="/privacy-policy" style={linkStyle}>
-          </Link>
+                    {t("Privacy policy")}
-        <div className="mt-3">
+                </Link>
-          <Paypal btnColor="btn-primary" />
+            </li>
-        </div>
+            <li ref={link5} className={(bboxLink5.top===bboxLink6.top)?"":"no-tack"}>
-      </footer>
+                <Link to="/legal-notices" style={linkStyle}>
-    );
+                    {t("Legal notices")}
-  }
+                </Link>
-}
+            </li>
+            <li ref={link6}>
+                <Link to="/faq" style={linkStyle}>
+                    {t("FAQ")}
+                </Link>
+            </li>
+        </ul>
+      </div>
+      <div className="mt-3">
+        <Paypal btnColor="btn-primary" />
+      </div>
+    </footer>
+  );
+};
 export default withTranslation()(Footer);

src/components/layouts/footer.css

@@ -0,0 +1,25 @@
+.tacky {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.tacky li {
+  display: inline-block;
+}
+
+.tacky li:after {
+  content: "-";
+  margin: 0 5px;
+}
+
+.tacky li:last-of-type:after {
+  content: "";
+  margin: 0;
+}
+
+.tacky li.no-tack:after {
+  content: "";
+  margin: 0;
+  display: none;
+}

src/components/layouts/useBbox.jsx

@@ -0,0 +1,20 @@
+/* eslint react/prop-types: 0 */
+import { useState } from 'react';
+import { useRef } from 'react';
+import { useEffect } from 'react';
+
+export const useBbox = () => {
+    const ref = useRef();
+    const [bbox, setBbox] = useState({});
+
+    const set = () =>
+        setBbox(ref && ref.current ? ref.current.getBoundingClientRect() : {});
+
+    useEffect(() => {
+        set();
+        window.addEventListener('resize', set);
+        return () => window.removeEventListener('resize', set);
+    }, []);
+
+    return [bbox, ref];
+};