diff --git a/src/components/layouts/Footer.jsx b/src/components/layouts/Footer.jsx
index 70ee6b9..2305599 100644
--- a/src/components/layouts/Footer.jsx
+++ b/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 {
- constructor(props) {
- super(props);
- this.state = {};
- }
+const Footer = props => {
+ const linkStyle = { whiteSpace: "nowrap" };
+ const { t } = props;
- render() {
- const linkStyle = { whiteSpace: "nowrap" };
- const { t } = this.props;
- return (
-
- );
- }
-}
+ const [bboxLink1, link1] = useBbox();
+ const [bboxLink2, link2] = useBbox();
+ const [bboxLink3, link3] = useBbox();
+ const [bboxLink4, link4] = useBbox();
+ const [bboxLink5, link5] = useBbox();
+ const [bboxLink6, link6] = useBbox();
+
+ return (
+
+ );
+};
export default withTranslation()(Footer);
diff --git a/src/components/layouts/footer.css b/src/components/layouts/footer.css
new file mode 100644
index 0000000..45a16dd
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/layouts/useBbox.jsx b/src/components/layouts/useBbox.jsx
new file mode 100644
index 0000000..42e11f8
--- /dev/null
+++ b/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];
+};
\ No newline at end of file