From f9f5f798a7d4def41366b4c640b45a8b2641b8e0 Mon Sep 17 00:00:00 2001
From: Ahurac <ahurac@mailbox.org>
Date: Wed, 31 Jan 2024 14:55:37 +0100
Subject: [PATCH] Ajout : header

---
 src/components/Header.astro    | 44 ++++++++++++++++++++++++++++++++++
 src/components/NavButton.astro | 38 +++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+)
 create mode 100644 src/components/Header.astro
 create mode 100644 src/components/NavButton.astro

diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..3006964
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,44 @@
+---
+import NavButton from '../components/NavButton.astro'
+---
+
+<nav>
+  <div class="left">
+    <span>Ahurac</span>
+    <div class="navButtons">
+      <NavButton link="/">Home</NavButton>
+      <NavButton link="mailto:hchauvin@mailbox.org">Contact (mail)</NavButton>
+    </div>
+  </div>
+</nav>
+
+<style>
+nav {
+  height: 120px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  box-sizing: border-box;
+  backdrop-filter: blur(6px);
+  margin-bottom: 10px;
+}
+
+span {
+  font-size: 60px;
+  margin: 0;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+}
+
+.navButtons {
+  display: flex;
+  align-items: center;
+  height: 30px;
+}
+</style>
diff --git a/src/components/NavButton.astro b/src/components/NavButton.astro
new file mode 100644
index 0000000..6008473
--- /dev/null
+++ b/src/components/NavButton.astro
@@ -0,0 +1,38 @@
+---
+const { link } = Astro.props;
+---
+
+<a href={link}>
+  <slot />
+</a>
+
+<style>
+a {
+  text-decoration: none;
+  margin-left: 20px;
+  color: inherit;
+  width: auto;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+a::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 0;
+  left: 0;
+  background-color: white;
+  transform-origin: bottom right;
+  transition: transform 0.25s ease-out;
+}
+
+a:hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+</style>