From 684a996226cf10e3c85df5a1445ebbdf236c63ab Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
Date: Tue, 6 Feb 2024 13:30:47 +0100
Subject: [PATCH] feat(ui): :sparkles: add page header

---
 components/Header.css          | 102 +++++++++++++++++++++++++++++++++
 components/Header.tsx          |  32 +++++++++++
 src/stylesheets/base.css       |  17 +++++-
 src/stylesheets/components.css |   1 +
 src/stylesheets/main.css       |   1 +
 5 files changed, 152 insertions(+), 1 deletion(-)
 create mode 100644 components/Header.css
 create mode 100644 components/Header.tsx
 create mode 100644 src/stylesheets/components.css

diff --git a/components/Header.css b/components/Header.css
new file mode 100644
index 0000000..2323239
--- /dev/null
+++ b/components/Header.css
@@ -0,0 +1,102 @@
+header {
+	width: 100%;
+	padding: var(--_gap);
+	display: flex;
+	gap: var(--_gap);
+	margin: 0;
+	background-color: var(--_translucent);
+	color: var(--_font-color);
+	user-select: none;
+}
+
+header span {
+	text-wrap: nowrap;
+	padding: var(--_gap);
+	font-size: large;
+	font-weight: bolder;
+
+	& a {
+		text-decoration: none;
+	}
+}
+
+header nav {
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	display: flex;
+	gap: var(--_gap);
+	align-items: center;
+
+	& > li {
+		padding: var(--_gap-half) var(--_gap);
+		list-style: none;
+		border: var(--_border-size) solid transparent;
+		transition: border var(--_transition-delay) ease;
+
+		& > a {
+			text-decoration: none;
+		}
+	}
+
+	& > li:hover {
+		border: var(--_border-size) solid currentColor;
+	}
+
+	& > li:has(details[open]) {
+		border: var(--_border-size) solid currentColor;
+	}
+}
+
+header details {
+	cursor: pointer;
+
+	& summary {
+		display: flex;
+		gap: var(--_gap);
+		list-style: none;
+
+		&::after {
+			display: inline-block;
+			content: '▽';
+			transition: all var(--_transition-delay) ease;
+		}
+	}
+
+	&[open] summary::after {
+		transform: rotate(60deg);
+	}
+
+	& ul {
+		padding: 0;
+		margin: 0;
+		display: flex;
+		flex-direction: column;
+		position: absolute;
+		background-color: var(--_translucent);
+		backdrop-filter: blur(var(--_blur));
+		border: var(--_border-size) solid currentColor;
+		border-top: none;
+		transform: translate(
+			calc(-1 * var(--_gap) - 2px),
+			calc(var(--_gap-half) + 2px)
+		);
+	}
+
+	& li {
+		list-style: none;
+		border: none;
+		padding: var(--_gap) calc(var(--_gap) + 0.4rem);
+	}
+
+	& li:hover {
+		background-color: var(--_translucent);
+	}
+}
+
+header input {
+	padding: var(--_gap-half) var(--_gap);
+	align-self: center;
+	border: none;
+	background-color: var(--_translucent);
+}
diff --git a/components/Header.tsx b/components/Header.tsx
new file mode 100644
index 0000000..20c8f45
--- /dev/null
+++ b/components/Header.tsx
@@ -0,0 +1,32 @@
+export function Header() {
+	return (
+		<header>
+			<span>
+				<a href='/'>Coh@bit 2.0 POC</a>
+			</span>
+			<nav>
+				<li>
+					<a href='/machines'>Machines</a>
+				</li>
+				<li>
+					<a href='/projets'>Projets</a>
+				</li>
+				<li>
+					<a href='/blog'>Blog</a>
+				</li>
+				<li>
+					<details>
+						<summary>Fablab</summary>
+						<ul>
+							<li>Équipes</li>
+							<li>Redmine</li>
+							<li>Git</li>
+							<li>Matrix</li>
+						</ul>
+					</details>
+				</li>
+			</nav>
+			<input type='search' name='' id='' placeholder='Rechercher' />
+		</header>
+	)
+}
diff --git a/src/stylesheets/base.css b/src/stylesheets/base.css
index 2ef62ea..8bc95dd 100644
--- a/src/stylesheets/base.css
+++ b/src/stylesheets/base.css
@@ -1,17 +1,32 @@
 :root {
+	/* font */
 	--_font-size: var(--font-size-1);
 	--_font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
 		Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
 		sans-serif;
 	--_font-color: var(--choco-12);
+
+	/* border */
+	--_border-size: var(--border-size-2);
+
+	/* size */
+	--_gap: var(--size-3);
+	--_gap-half: calc(var(--_gap) / 2);
+
+	/* color */
 	--_accent-color: var(--lime-6);
-	accent-color: var(--_accent-color);
+	--_translucent: hsl(from var(--_font-color) h s l / 0.1);
+
+	/* other */
 	--_background: url('assets/css_bg_stardust.png') repeat top left / 800px;
+	--_blur: var(--size-1);
+	--_transition-delay: 0.2s;
 }
 
 body {
 	font-family: var(--_font-family);
 	font-size: var(--_font-size);
+	accent-color: var(--_accent-color);
 	margin: 0;
 	padding: 0;
 }
diff --git a/src/stylesheets/components.css b/src/stylesheets/components.css
new file mode 100644
index 0000000..5e080ea
--- /dev/null
+++ b/src/stylesheets/components.css
@@ -0,0 +1 @@
+@import url('../../components/Header.css');
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index 8d78ece..29f9d68 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -5,4 +5,5 @@ layer(reset);
 layer(framework);
 @import url('./base.css') layer(base);
 @import url('./layout.css') layer(layout);
+@import url('./components.css') layer(components);
 @layer reset, framework, base, layout, components, utilities;