added the cookiebar

This commit is contained in:
2022-09-06 23:48:00 +02:00
parent 799229e0cc
commit d537d80b83
8 changed files with 644 additions and 133 deletions

View File

@@ -0,0 +1,47 @@
@import "../../assets/scss/variables";
$shadow: 0px -1px 5px rgba(50, 50, 50, 0.75);
.cookieBar {
align-items: baseline;
background: #fff;
border-top: 1px solid #808080;
bottom: 0px;
-webkit-box-shadow: $shadow;
-moz-box-shadow: $shadow;
box-shadow: $shadow;
color: #000;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
left: 0px;
position: fixed;
width: 100%;
z-index: 999;
}
.content {
flex: 1 0 300px;
margin: 15px;
}
.button {
background: #fff;
border: 1px solid $color-gray-border;
border-radius: $button-border-radius;
color: $color-base;
cursor: pointer;
flex: 0 0 auto;
font-size: $typographic-base-font-size;
font-weight: normal;
height: $button-height;
margin: 15px;
padding: 5px 10px;
text-align: center;
&:hover,
&:focus {
color: $color-primary;
}
}

View File

@@ -0,0 +1,19 @@
import { Link } from "gatsby";
import React from "react";
import CookieConsent from "react-cookie-consent";
import * as styles from "./CookieBar.module.scss";
export const CookieBar = () => {
return (
<CookieConsent
disableButtonStyles
disableStyles
contentClasses={styles.content}
containerClasses={styles.cookieBar}
buttonClasses={styles.button}
>
This website uses cookies to enhance the user experience.{" "}
<small>Click <Link to="/">here</Link> to learn more about cookies.</small>
</CookieConsent>
);
};

View File

@@ -3,6 +3,7 @@ import Helmet from "react-helmet";
import { useSiteMetadata } from "@/hooks";
import { CookieBar } from "../Cookiebar/CookieBar";
import * as styles from "./Layout.module.scss";
interface Props {
@@ -35,6 +36,7 @@ const Layout: React.FC<Props> = ({
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={metaImageUrl} />
</Helmet>
<CookieBar />
{children}
</div>
);