feat(layout): add footer with impressum section

src/components/atoms/Link.astro

@@ -12,46 +12,10 @@ const currentPath = new URL(Astro.url).pathname.split('/')[1];
 </a>
 
 <style lang="scss">
-  a {
+a {
-			text-decoration: none;
+	text-decoration: none;
-			color: white;
+	color: white;
-			font-size: large;
+	font-size: large;
-			position: relative;
+	position: relative;
-
+}
-			&::after {
-				font-family: monospace;
-				content: ".clickable";
-				transition-property: transform, opacity;
-				transition-duration: 150ms;
-				transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
-			}
-
-			&:not(.current) {
-				&::after {
-					opacity: 0;
-				}
-
-				&:hover,
-				&:focus-within {
-					&::after {
-						opacity: 1;
-					}
-				}
-			}
-
-			&.current {
-
-				&::after {
-					content: '.current';
-					transform: translateX(2rem);
-					transition: transform 100ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
-				}
-			
-				&:hover::after,
-				&:focus-visible::after {
-					transform: translateX(1rem);
-					
-				}
-			}
-		}
 </style>

src/components/atoms/MenuLink.astro

@@ -0,0 +1,57 @@
+---
+interface Props {
+  to: string
+}
+
+const { to } = Astro.props;
+const currentPath = new URL(Astro.url).pathname.split('/')[1];
+---
+
+<a href={to} class={`/${currentPath}` === to ? 'current' : undefined}>
+  <slot />
+</a>
+
+<style lang="scss">
+  a {
+			text-decoration: none;
+			color: white;
+			font-size: large;
+			position: relative;
+
+			&::after {
+				font-family: monospace;
+				content: ".clickable";
+				transition-property: transform, opacity;
+				transition-duration: 150ms;
+				transition-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+			}
+
+			&:not(.current) {
+				&::after {
+					opacity: 0;
+				}
+
+				&:hover,
+				&:focus-within {
+					&::after {
+						opacity: 1;
+					}
+				}
+			}
+
+			&.current {
+
+				&::after {
+					content: '.current';
+					transform: translateX(2rem);
+					transition: transform 100ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
+				}
+			
+				&:hover::after,
+				&:focus-visible::after {
+					transform: translateX(1rem);
+					
+				}
+			}
+		}
+</style>

src/components/footer.astro

@@ -0,0 +1,19 @@
+---
+import Link from "./atoms/Link.astro"
+---
+
+<footer>
+  <div class="col">
+    
+    <Link to="/impressum">Impressum</Link>
+  </div>
+</footer>
+
+<style lang="scss">
+footer {
+  min-height: 50px;
+  display: grid;
+  grid-template-columns: 1fr;
+  margin: 2rem;
+}
+</style>

src/components/nav.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import Button from './atoms/Button.astro';
-import Link from './atoms/Link.astro';
+import Link from './atoms/MenuLink.astro';
 ---
 
 <div class="nav-wrapper">

src/layouts/Layout.astro

@@ -1,5 +1,6 @@
 ---
 import Navigation from '../components/nav.astro'
+import Footer from '../components/footer.astro'
 import { getLangFromUrl } from '../i18n/utils';
 import '../styles/global.css'
 
@@ -29,6 +30,7 @@ const lang = getLangFromUrl(Astro.url);
 		<main>
 			<slot />
 		</main>
+		<Footer />
 	</body>
 </html>
 <style is:global lang="scss">
@@ -40,6 +42,9 @@ const lang = getLangFromUrl(Astro.url);
 	body {
 		max-width: 1200px;
 		margin: 0 auto;
+		display: grid;
+		grid-template-rows: auto 1fr auto;
+		min-height: 100vh;
 	}
 	code {
 		font-family:

src/pages/impressum.astro

@@ -0,0 +1,24 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+<Layout title="Impressum">
+  <h1>Impressum</h1>
+  <p style="margin-bottom: 3rem;">
+    Angaben gemäß § 5 TMG:
+    <br><br>
+    Denis Ergin <br>
+    Albgaustraße 3a <br>
+    76337 Waldbronn
+    <br><br>
+    Kontakt: <br>
+    E-Mail: kontakt@denis-ergin.de
+  </p>
+  <p>
+    Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV:
+    <br>
+    Denis Ergin <br>
+    Albgaustraße 3a <br>
+    76337 Waldbronn
+  </p>
+</Layout>