layout.js

import React from "react"
import { Location } from "@reach/router"
import styled, { ThemeProvider } from "styled-components"

import Favicon from '../../assets/DentaMile.ico';
import Helmet from 'react-helmet';

import Header from "../components/header"
import SideBar from "../components/sidebar"
import Footer from "../components/footer"
import LightBox from "../components/lightbox"

import { withTrans } from "../i18n/withTrans"
import { theme } from "./globalStyle"

/*
  this is our main layout
  
*/

const MainLayoutWrapper = styled.div`
  user-select: none;
  background-color: ${({ theme }) => theme.darkMode.almostBlack};
  color: ${(props) => (props.mode === "true" ? "white" : "black")};

  display: flex;

  div {
    flex: 1;
  }
`

const Layout = ({ children }) => {


  //TODO: klären, soll seiten titel gleich kapitel sein, oder nur ein globaler seitentitel?
  return (
    <React.Fragment>
        <Helmet>
          <title>i18n title</title>
          <link rel="icon" href={Favicon} />
      </Helmet>
    <ThemeProvider theme={theme}>
        <Location>
          {({ location }) => {
            return (
              <React.Fragment>
                <Header />
                <MainLayoutWrapper>
                  <SideBar location={location} />
                  {children}
                </MainLayoutWrapper>
                {/** TODO: think! we migth want to change markup here, to inlcude footer into mainlayoutwrapper */}
                <Footer />
                <LightBox />
              </React.Fragment>
            )
          }}
        </Location>
      </ThemeProvider>
    </React.Fragment>
  )
}

export default withTrans(Layout)

/pages/index.js

import React from "react"
import LayoutWrapper from "../styles/layout"
import styled from "styled-components"
import Image from "../components/image"
import { Translation } from "react-i18next"

const StyledContent = styled.div`
  margin-left: 20vw;
  display: flex;
  flex-direction: column;
  min-height: 100vh;

  .welcome {
    position: absolute;
    bottom: 200px;
    color: ${({ theme }) => theme.colors.greyDark};

    h1 {
      font-size: 40px;
      font-weight: 600;
    }

    h3 {
      padding-top: 20px;
      font-size: 32px;
    }
  }
`

const StartPage = () => {
  return (
    <React.Fragment>
      <LayoutWrapper>
        <StyledContent>
          <Image src={`smile.jpg`} type="imageStage" />

          <div className="welcome">
            <Translation>
              {(t) => {
                return (
                  <React.Fragment>
                    <h1>{t(`landingPage.headline`)}</h1>
                    <h3>{t(`landingPage.text`)}</h3>
                  </React.Fragment>
                )
              }}
            </Translation>
          </div>
        </StyledContent>
      </LayoutWrapper>
    </React.Fragment>
  )
}

export default StartPage