feat(ui): ♿ add small screen support for header

components/Header.css

@@ -15,7 +15,7 @@ header div {
 	gap: var(--_gap);
 }
 
-header span {
+.components__header__brand {
 	text-wrap: nowrap;
 	padding: var(--_gap);
 	font-size: large;
@@ -23,6 +23,17 @@ header span {
 
 	& a {
 		text-decoration: none;
+		color: currentColor;
+	}
+
+	@media (width < 800px) {
+		.components__header__brand__text {
+			display: none;
+		}
+
+		& img {
+			min-width: 1rem;
+		}
 	}
 }
 
@@ -38,16 +49,6 @@ header nav {
 		list-style: none;
 		transition: border var(--_transition-delay) ease;
 		border: var(--_border-size) solid transparent;
-
-		& > a {
-			display: inline-block;
-			text-decoration: none;
-			outline: none;
-		}
-
-		& > * {
-			padding: var(--_gap-half) var(--_gap);
-		}
 	}
 
 	& > li:hover,
@@ -56,10 +57,17 @@ header nav {
 	& > li:has(details[open]) {
 		border: var(--_border-size) solid currentColor;
 	}
+
+	@media (width < 800px) {
+		& {
+			justify-content: space-around;
+		}
+	}
 }
 
 header details {
 	cursor: pointer;
+	padding: var(--_gap-half);
 
 	& summary {
 		display: flex;
@@ -67,11 +75,35 @@ header details {
 		list-style: none;
 		outline: none;
 
+		& i {
+			display: none;
+		}
+
 		&::after {
 			display: inline-block;
 			content: '▽';
 			transition: all var(--_transition-delay) ease;
 		}
+
+		@media (width < 800px) {
+			& {
+				display: grid;
+				gap: 0;
+				font-size: x-small;
+				justify-items: center;
+				align-items: center;
+				font-weight: normal;
+			}
+
+			& i {
+				display: inline;
+				font-size: 1rem;
+			}
+
+			&::after {
+				display: none;
+			}
+		}
 	}
 
 	&[open] summary::after {
@@ -92,6 +124,13 @@ header details {
 			calc(-1 * var(--_gap) - 2px),
 			calc(var(--_gap-half) + 2px)
 		);
+
+		@media (width < 800px) {
+			& {
+				border: var(--_border-size) solid currentColor;
+				transform: translate(-33%, var(--_gap));
+			}
+		}
 	}
 
 	& li {
@@ -112,9 +151,52 @@ header details {
 	}
 }
 
-header input {
+.components__header__search {
 	padding: var(--_gap-half) var(--_gap);
 	align-self: center;
-	border: none;
+	border: var(--_border-size) solid transparent;
 	background-color: var(--_translucent);
+	min-width: fit-content;
+	outline: none;
+
+	&:focus-visible {
+		border: var(--_border-size) solid currentColor;
+	}
+
+	@media (width < 800px) {
+		& {
+			background-color: transparent;
+		}
+
+		& span {
+			display: none;
+		}
+	}
+}
+
+.components__header__nav_button {
+	color: var(--_font-color);
+	display: inline-block;
+	text-decoration: none;
+	outline: none;
+	padding: var(--_gap-half) var(--_gap);
+
+	& i {
+		display: none;
+	}
+
+	@media (width < 800px) {
+		& {
+			display: grid;
+			font-size: x-small;
+			justify-items: center;
+			align-items: center;
+			font-weight: normal;
+		}
+
+		& i {
+			display: inline;
+			font-size: 1rem;
+		}
+	}
 }

components/Header.tsx

@@ -5,27 +5,38 @@ export function Header() {
 	return (
 		<header>
 			<div>
-				<span>
+				<span class='components__header__brand'>
 					<a href='/'>
-						Coh<img
+						<span class='components__header__brand__text'>Coh</span>
-							src={asset('/assets/bulb.svg')}
+						<img src={asset('/assets/bulb.svg')} alt='a' />
-							alt='a'
+						<span class='components__header__brand__text'>bit</span>
-						/>bit POC
 					</a>
 				</span>
 				<nav>
 					<li>
-						<a href='/machines'>Machines</a>
+						<a href='/machines' class='components__header__nav_button'>
+							<i class='ri-hammer-line'></i>
+							<span>Machines</span>
+						</a>
 					</li>
 					<li>
-						<a href='/projets'>Projets</a>
+						<a href='/projets' class='components__header__nav_button'>
+							<i class='ri-organization-chart'></i>
+							<span>Projets</span>
+						</a>
 					</li>
 					<li>
-						<a href='/blog'>Blog</a>
+						<a href='/blog' class='components__header__nav_button'>
+							<i class='ri-question-answer-line'></i>
+							<span>Blog</span>
+						</a>
 					</li>
 					<li>
 						<details>
-							<summary>Fablab</summary>
+							<summary>
+								<i class='ri-function-line'></i>
+								<span>Fablab</span>
+							</summary>
 							<ul>
 								<li>
 									<a href='/membres'>Membres</a>
@@ -50,7 +61,10 @@ export function Header() {
 						</details>
 					</li>
 				</nav>
-				<input type='search' name='' id='' placeholder='Rechercher' />
+				<button class='components__header__search'>
+					<i class='ri-search-line'></i>
+					<span>&nbsp;Rechercher</span>
+				</button>
 				<ThemePicker />
 			</div>
 		</header>

islands/ThemePicker.css

@@ -26,4 +26,10 @@
 		font-weight: normal;
 		line-height: normal;
 	}
+
+	@media (width < 800px) {
+		& select {
+			width: 0;
+		}
+	}
 }

src/stylesheets/base.css

@@ -13,6 +13,7 @@
 	--_gap: var(--size-3);
 	--_gap-half: calc(var(--_gap) / 2);
 	--_wide-screen: 1400px;
+	--_small-screen: 800px;
 
 	/* color */
 	--_accent-color: var(--lime-6);