From 5ab1557a93016ade4e3d9a40c2439723e8367d15 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Fri, 5 Jul 2024 06:43:45 +0300
Subject: [PATCH] Make the search bar visually part of the navbar

Plus make it nicer structucally
---
 sass/_nav.scss              | 172 +++++++++++++++++-------------------
 templates/partials/nav.html |   8 +-
 2 files changed, 87 insertions(+), 93 deletions(-)

diff --git a/sass/_nav.scss b/sass/_nav.scss
index 8e3fc93..01eca04 100644
--- a/sass/_nav.scss
+++ b/sass/_nav.scss
@@ -9,11 +9,6 @@
 	border-radius: 1.625rem;
 	background-color: var(--nav-bg);
 	max-width: min(var(--container-width), 90%);
-	transition: var(--transition);
-
-	&:has(#search-container.active) {
-		border-radius: 1.625rem 1.625rem 0 0;
-	}
 
 	nav {
 		padding: 0.5rem;
@@ -42,90 +37,6 @@
 			}
 		}
 
-		#search-container {
-			-webkit-backdrop-filter: var(--blur);
-			position: absolute;
-			top: calc(100% - 1rem);
-			left: 0;
-			opacity: 0;
-			z-index: 999;
-			backdrop-filter: var(--blur);
-			transition: var(--transition);
-			box-shadow:
-				// var(--edge-highlight),
-				0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
-			border-radius: 1.625rem;
-			background-color: var(--nav-bg);
-			padding: 0.5rem;
-			width: 100%;
-			pointer-events: none;
-
-			&.active {
-				top: 100%;
-				opacity: 1;
-				pointer-events: unset;
-				border-radius: 0 0 1.625rem 1.625rem;
-			}
-
-			#search-bar {
-				box-shadow: var(--edge-highlight);
-				border: none;
-				border-radius: 999px;
-				background-image: none;
-				background-color: var(--fg-muted-1);
-				padding: 0.5rem 0.75rem;
-				width: 100%;
-				font-size: 1rem;
-
-				&::placeholder {
-					opacity: 1;
-					color: var(--fg-muted-4);
-				}
-			}
-
-			#search-results {
-				display: none;
-				flex-direction: column;
-				gap: 0.5rem;
-				margin-top: 0.5rem;
-				border-radius: 1.125rem;
-				max-height: 50vh;
-				overflow: auto;
-
-				.item {
-					display: inline-flex;
-					flex-direction: column;
-					box-shadow: var(--edge-highlight);
-					border-radius: var(--rounded-corner);
-					background-color: var(--fg-muted-1);
-					padding: 0.5rem;
-
-					a {
-						line-height: normal;
-
-						&::after {
-							content: " →";
-
-							:root[dir*="rtl"] & {
-								content: " ←";
-							}
-						}
-					}
-
-					div {
-						margin-top: 0.5rem;
-						border-top: 0.0625rem solid var(--fg-muted-2);
-						padding-top: 0.25rem;
-						color: var(--fg-muted-5);
-
-						b {
-							color: var(--fg-color);
-						}
-					}
-				}
-			}
-		}
-
 		ul {
 			display: flex;
 			flex-wrap: wrap;
@@ -327,4 +238,87 @@
 			}
 		}
 	}
+
+	#search-container {
+		transform: translateY(-2.75rem);
+		opacity: 0;
+		transition: var(--transition);
+		padding: 0 0.5rem 0;
+		height: 0;
+		pointer-events: none;
+
+		&.active {
+			transform: translateY(0);
+			opacity: 1;
+			padding: 0 0.5rem 0.5rem;
+			height: 2.75rem;
+			pointer-events: unset;
+		}
+
+		#search-bar {
+			box-shadow: var(--edge-highlight);
+			border: none;
+			border-radius: 999px;
+			background-image: none;
+			background-color: var(--fg-muted-1);
+			padding: 0.5rem 0.75rem;
+			width: 100%;
+			font-size: 1rem;
+
+			&::placeholder {
+				opacity: 1;
+				color: var(--fg-muted-4);
+			}
+		}
+
+		#search-results {
+			-webkit-backdrop-filter: var(--blur);
+			display: none;
+			position: absolute;
+			top: calc(100% + 0.5rem);
+			left: 0;
+			flex-direction: column;
+			gap: 0.5rem;
+			backdrop-filter: var(--blur);
+			box-shadow: var(--edge-highlight), 0 0.75rem 1.5rem -1rem rgba(0, 0, 0, 0.5);
+			border-radius: 1.125rem;
+			background-color: var(--nav-bg);
+			padding: 0.5rem;
+			width: 100%;
+			max-height: 50vh;
+			overflow: auto;
+
+			.item {
+				display: inline-flex;
+				flex-direction: column;
+				box-shadow: var(--edge-highlight);
+				border-radius: var(--rounded-corner);
+				background-color: var(--fg-muted-1);
+				padding: 0.5rem;
+
+				a {
+					line-height: normal;
+
+					&::after {
+						content: " →";
+
+						:root[dir*="rtl"] & {
+							content: " ←";
+						}
+					}
+				}
+
+				div {
+					margin-top: 0.5rem;
+					border-top: 0.0625rem solid var(--fg-muted-2);
+					padding-top: 0.25rem;
+					color: var(--fg-muted-5);
+
+					b {
+						color: var(--fg-color);
+					}
+				}
+			}
+		}
+	}
 }
diff --git a/templates/partials/nav.html b/templates/partials/nav.html
index 3242b03..2c31b5c 100644
--- a/templates/partials/nav.html
+++ b/templates/partials/nav.html
@@ -3,10 +3,6 @@
 		<a href="#main" id="main-content" tabindex="0">
 			{{ macros_translate::translate(key="skip_to_content", default="Skip to main content", language_strings=language_strings) }}
 		</a>
-		<div id="search-container">
-			<input id="search-bar" type="search" placeholder="{{ macros_translate::translate(key='search_for', default='Search for…', language_strings=language_strings) }}">
-			<div id="search-results"></div>
-		</div>
 		<ul>
 			<li id="home">
 				<a href="{{ get_url(path='/', lang=lang) }}"
@@ -62,4 +58,8 @@
 			{%- endif %}
 		</ul>
 	</nav>
+	<div id="search-container">
+		<input id="search-bar" type="search" placeholder="{{ macros_translate::translate(key='search_for', default='Search for…', language_strings=language_strings) }}">
+		<div id="search-results"></div>
+	</div>
 </header>