From fbc60211c6257ec57f233cedfb4c921732503a3b Mon Sep 17 00:00:00 2001
From: Denis Ergin <denis.ergin@outlook.de>
Date: Mon, 6 Jan 2025 10:12:16 +0100
Subject: [PATCH] feat(layout): add footer with impressum section

---
 src/components/atoms/Link.astro     | 48 +++---------------------
 src/components/atoms/MenuLink.astro | 57 +++++++++++++++++++++++++++++
 src/components/footer.astro         | 19 ++++++++++
 src/components/nav.astro            |  2 +-
 src/layouts/Layout.astro            |  5 +++
 src/pages/impressum.astro           | 24 ++++++++++++
 6 files changed, 112 insertions(+), 43 deletions(-)
 create mode 100644 src/components/atoms/MenuLink.astro
 create mode 100644 src/components/footer.astro
 create mode 100644 src/pages/impressum.astro

diff --git a/src/components/atoms/Link.astro b/src/components/atoms/Link.astro
index 1312ff4..871d9d0 100644
--- a/src/components/atoms/Link.astro
+++ b/src/components/atoms/Link.astro
@@ -12,46 +12,10 @@ const currentPath = new URL(Astro.url).pathname.split('/')[1];
 </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);
-					
-				}
-			}
-		}
+a {
+	text-decoration: none;
+	color: white;
+	font-size: large;
+	position: relative;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/atoms/MenuLink.astro b/src/components/atoms/MenuLink.astro
new file mode 100644
index 0000000..1312ff4
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/footer.astro b/src/components/footer.astro
new file mode 100644
index 0000000..c31a16a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/nav.astro b/src/components/nav.astro
index 756b112..ad06721 100644
--- a/src/components/nav.astro
+++ b/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">
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index fcc573a..a6b9b55 100644
--- a/src/layouts/Layout.astro
+++ b/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:
diff --git a/src/pages/impressum.astro b/src/pages/impressum.astro
new file mode 100644
index 0000000..bb64a36
--- /dev/null
+++ b/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>