kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-04-29 10:16:53 +02:00
Code Issues Projects Releases Wiki Activity

Cleanup language switcher

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-04-12 12:41:54 +00:00 • committed by GitHub
parent 4937e76d59
commit 5e4bfe8a7c
4 changed files with 68 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/components/languageSwitcher.js
View file

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

42
src/components/languageSwitcher.module.scss Normal file
View file

@ -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;
}
}

5
src/layouts/default.js
View file

@ -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 />
</div>
<LanguageSwitcher />
</>
);
}

39
src/layouts/default.scss
View file

@ -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;
}
}