Cleanup language switcher

src/components/languageSwitcher.js

@@ -1,21 +1,25 @@
-import React from "react"
+import React from "react"
-import { Link, Trans, useI18next } from 'gatsby-plugin-react-i18next';
+import { Link, Trans, useI18next } from 'gatsby-plugin-react-i18next';
-
+
-export default function LanguageSwitcher() {
+import * as styles from "./languageSwitcher.module.scss";
-    const { languages, originalPath } = useI18next();
+
-
+export default function LanguageSwitcher() {
-    return (
+    const { languages, originalPath } = useI18next();
-        <div className="languageModalInner">
+
-            <h2>Languages (<a href="#top" className="modalCloseLink">&times;</a>)</h2>
+    return (
-            <ul>
+        <div className={styles.languageModal} id="languageChooser">
-                {languages.map((lng) => (
+          <div className={styles.languageModalInner}>
-                    <li key={lng}>
+              <h2>Languages (<a href="#top" className={styles.modalCloseLink}>&times;</a>)</h2>
-                        <Link to={originalPath} language={lng}>
+              <ul>
-                            <Trans>{lng}</Trans>
+                  {languages.map((lng) => (
-                        </Link>
+                      <li key={lng}>
-                    </li>
+                          <Link to={originalPath} language={lng}>
-                ))}
+                              <Trans>{lng}</Trans>
-            </ul>
+                          </Link>
-        </div>
+                      </li>
-    );
+                  ))}
+              </ul>
+          </div>
+        </div>
+    );
 }

src/components/languageSwitcher.module.scss

@@ -0,0 +1,42 @@
+@import "../mixins";
+@import "../variables";
+
+.languageModal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .7);
+    z-index: 1000;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity .25s;
+
+    &:target {
+        opacity: 1;
+        pointer-events: auto;
+    }
+
+    .languageModalInner {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        color: white;
+        background: black;
+        font-family: $mainFont;
+        padding: 20px;
+        border-radius: 5px;
+
+        a {
+            color: white;
+            text-decoration-style: dotted;
+        }
+
+    }
+
+    .modalCloseLink {
+        text-decoration: none;
+    }
+}

src/layouts/default.js

@@ -17,9 +17,8 @@ class Layout extends React.Component {
                     {this.props.children}
                 </div>
                 <footer role="contentinfo">CC-BY 4.0 Kevin Kandlbinder, <Link to="/legal/about" className="spf-link"><Trans i18nKey="imprint">Imprint</Trans></Link> | <Link to="/legal/datasec" className="spf-link"><Trans i18nKey="datasec">Data Protection</Trans></Link> | <Link to="/legal/disclaimer" className="spf-link"><Trans i18nKey="disclaimer">Disclaimer</Trans></Link> | <a href="#languageChooser">Language</a></footer>
-                <div className="languageModal" id="languageChooser">
+                
-                    <LanguageSwitcher />
+                <LanguageSwitcher />
-                </div>
             </>
         );
     }

src/layouts/default.scss

@@ -74,42 +74,3 @@ h1 {
     font-size: 2em;
 }
 
-.languageModal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, .7);
-    z-index: 1000;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity .25s;
-
-    &:target {
-        opacity: 1;
-        pointer-events: auto;
-    }
-
-    .languageModalInner {
-        position: fixed;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        color: white;
-        background: black;
-        font-family: $mainFont;
-        padding: 20px;
-        border-radius: 5px;
-
-        a {
-            color: white;
-            text-decoration-style: dotted;
-        }
-
-    }
-
-    .modalCloseLink {
-        text-decoration: none;
-    }
-}