From 7ac22f83759e1015789453e1d805517f303151b7 Mon Sep 17 00:00:00 2001
From: Julien Oculi <xdrz.jot.sr@gmail.com>
Date: Thu, 15 Feb 2024 15:24:53 +0100
Subject: [PATCH] feat(ui): :wheelchair: wrap header actions in dialog for
 small screens

---
 components/Header.tsx          | 11 +++++++-
 islands/MoreBox.css            | 48 ++++++++++++++++++++++++++++++++++
 islands/MoreBox.tsx            | 28 ++++++++++++++++++++
 islands/ThemePicker.css        |  6 -----
 src/stylesheets/components.css |  1 +
 5 files changed, 87 insertions(+), 7 deletions(-)
 create mode 100644 islands/MoreBox.css
 create mode 100644 islands/MoreBox.tsx

diff --git a/components/Header.tsx b/components/Header.tsx
index 9fc742a..137fffe 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -1,6 +1,7 @@
 import { asset } from '$fresh/runtime.ts'
 import SearchBox from '../islands/SearchBox.tsx'
 import ThemePicker from '../islands/ThemePicker.tsx'
+import MoreBox from '../islands/MoreBox.tsx'
 
 export function Header() {
 	return (
@@ -63,7 +64,15 @@ export function Header() {
 					</li>
 				</nav>
 				<SearchBox />
-				<ThemePicker />
+				<MoreBox>
+					<ThemePicker />
+					<a href='/profil'>
+						<i class='ri-user-line'></i>
+					</a>
+					<button>
+						<i class='ri-bard-line'></i>
+					</button>
+				</MoreBox>
 			</div>
 		</header>
 	)
diff --git a/islands/MoreBox.css b/islands/MoreBox.css
new file mode 100644
index 0000000..b04c8cf
--- /dev/null
+++ b/islands/MoreBox.css
@@ -0,0 +1,48 @@
+.islands__more_box__dialog {
+	gap: var(--_gap);
+	color: var(--_font-color);
+	align-items: center;
+}
+
+.islands__more_box__dialog[open] {
+	display: flex;
+	flex-direction: column;
+	padding: var(--_gap);
+	border: var(--_border-size) solid currentColor;
+	background: var(--_background-image) repeat top left / 800px;
+	background-color: var(--_background-color);
+
+	&::backdrop {
+		backdrop-filter: blur(var(--_blur));
+	}
+}
+
+.islands__more_box__button {
+	background: transparent;
+	border: none;
+	outline: none;
+	border: var(--_border-size) solid transparent;
+	color: var(--_font-color);
+
+	&:focus-visible,
+	&:hover {
+		border-color: currentColor;
+	}
+}
+
+@media (width > 800px) {
+	.islands__more_box__dialog {
+		display: flex;
+		padding: 0;
+		border: none;
+		margin: 0;
+		position: static;
+		height: 100%;
+		background-color: transparent;
+		align-self: center;
+	}
+
+	.islands__more_box__button {
+		display: none;
+	}
+}
diff --git a/islands/MoreBox.tsx b/islands/MoreBox.tsx
new file mode 100644
index 0000000..59e8ed0
--- /dev/null
+++ b/islands/MoreBox.tsx
@@ -0,0 +1,28 @@
+import { VNode } from 'preact'
+import { useEffect, useRef } from 'preact/hooks'
+
+export default function MoreBox({ children }: { children: VNode | VNode[] }) {
+	const dialog = useRef<HTMLDialogElement>(null)
+
+	useEffect(() => {
+		dialog.current?.addEventListener('click', (event) => {
+			if (event.target === dialog.current) {
+				dialog.current?.close()
+			}
+		})
+	}, [])
+
+	return (
+		<>
+			<button
+				class='islands__more_box__button'
+				onClick={() => dialog.current?.showModal()}
+			>
+				<i class='ri-more-2-line'></i>
+			</button>
+			<dialog class='islands__more_box__dialog' ref={dialog}>
+				{children}
+			</dialog>
+		</>
+	)
+}
diff --git a/islands/ThemePicker.css b/islands/ThemePicker.css
index 9090872..cbf28ee 100644
--- a/islands/ThemePicker.css
+++ b/islands/ThemePicker.css
@@ -26,10 +26,4 @@
 		font-weight: normal;
 		line-height: normal;
 	}
-
-	@media (width < 800px) {
-		& select {
-			width: 0;
-		}
-	}
 }
diff --git a/src/stylesheets/components.css b/src/stylesheets/components.css
index fc449d0..6d67cd1 100644
--- a/src/stylesheets/components.css
+++ b/src/stylesheets/components.css
@@ -10,3 +10,4 @@
 @import url('../../components/MemberCard.css');
 @import url('../../islands/ThemePicker.css');
 @import url('../../islands/SearchBox.css');
+@import url('../../islands/MoreBox.css');