Add page-wide footer with Impressum and Datenschutz

src/App.test.ts

@@ -29,7 +29,10 @@ test.each([
   ...['date-converter', 'list-of-kings'].map((tabId) => '/about/' + tabId),
   '/signs',
   '/signs/sign_id',
+  '/impressum',
+  '/datenschutz',
 ])('%s renders without crashing', async (route) => {
+  window.scrollTo = jest.fn()
   const fakeApi = new FakeApi().allowStatistics(statisticsFactory.build())
   const appDriver = new AppDriver(fakeApi.client).withPath(route).render()
   await appDriver.waitForTextToDisappear('Loading...')

src/Footer.sass

@@ -0,0 +1,18 @@
+.main-footer
+    max-width: 1200px
+    padding-left: 1.5em
+    padding-right: 1.5em
+    margin-left: auto
+    margin-right: auto
+
+    ol.breadcrumb
+        & li a
+            padding: 0
+            display: inline
+        & li+li
+            padding-left: .5rem
+            &::before
+                display: inline-block
+                padding-right: .5rem
+                color: #6c757d
+                content: "|"

src/Footer.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import './Footer.sass'
+import { NavItem } from 'Header'
+
+export default function Footer(): JSX.Element {
+  return (
+    <footer className="main-footer">
+      <ol className="breadcrumb">
+        <NavItem href="/impressum" title="Impressum" as={'li'} />
+        <NavItem href="/datenschutz" title="Datenschutz" as={'li'} />
+      </ol>
+    </footer>
+  )
+}

src/Header.tsx

@@ -24,11 +24,19 @@ function EblLogo(): JSX.Element {
   )
 }
 
-function NavItem(props: { href: string; title: string }): JSX.Element {
+export function NavItem({
+  href,
+  title,
+  as,
+}: {
+  href: string
+  title: string
+  as?: React.ElementType
+}): JSX.Element {
   return (
-    <Nav.Item>
-      <LinkContainer to={props.href}>
-        <Nav.Link>{props.title}</Nav.Link>
+    <Nav.Item as={as}>
+      <LinkContainer to={href}>
+        <Nav.Link>{title}</Nav.Link>
       </LinkContainer>
     </Nav.Item>
   )

src/NotFoundPage.sass

@@ -0,0 +1,4 @@
+.page-not-found
+    text-align: center
+    margin-top: 50px
+    min-height: 90vh

src/NotFoundPage.tsx

@@ -1,7 +1,8 @@
 import React from 'react'
+import './NotFoundPage.sass'
 
 const NotFoundPage: React.FC = () => (
-  <div style={{ textAlign: 'center', marginTop: '50px' }}>
+  <div className="page-not-found">
     <h1>404 - Not Found</h1>
     <p>The page you are looking for does not exist.</p>
   </div>

src/common/AppContent.sass

@@ -7,6 +7,7 @@
   padding-bottom: 1em
   padding-left: 1.5em
   padding-right: 1.5em
+  min-height: 90vh
 
   &--wide
     max-width: initial
@@ -15,7 +16,7 @@
     display: flex
     flex-flow: wrap
     margin-bottom: 1em
- 
+
   &__breadcrumbs
     flex: 0 0 100%
 
@@ -33,7 +34,7 @@
     background: #417DD2
     background-blend-mode: lighten
     background-image: url(https://www.ebl.lmu.de/api/images/Babel_Project_01_cropped.svg)
-    background-position: right -12em  bottom
+    background-position: right -12em bottom
     background-repeat: no-repeat
     background-size: 20em
     color: #FFFFFF