From 03c3386c0cad4964eb68b6133616cbef4668c5a1 Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Tue, 6 Aug 2024 23:34:18 +0100
Subject: [PATCH] Updated navbar. Search can now be customized.

---
 frontend/src/lib/components/navbar.svelte     | 20 +--------
 frontend/src/lib/components/search.svelte     | 43 ++++++++++---------
 .../src/lib/components/svg-icon-custom.svelte |  5 ++-
 frontend/src/lib/css/navbar.css               | 16 +------
 frontend/src/lib/css/search.css               | 14 +++---
 frontend/src/routes/style/+page.svelte        | 15 +++++--
 6 files changed, 45 insertions(+), 68 deletions(-)

diff --git a/frontend/src/lib/components/navbar.svelte b/frontend/src/lib/components/navbar.svelte
index c499808..3f8f5db 100644
--- a/frontend/src/lib/components/navbar.svelte
+++ b/frontend/src/lib/components/navbar.svelte
@@ -16,7 +16,6 @@
 
 	let navbar_title;
 	let navbar_category;
-	let navbar_search;
 
 	function isActive(str, url) {
 		if (url === str) return 'navbar-active';
@@ -106,27 +105,10 @@
 			<div>
 				<a class={isActive('/categories', pageUrl)} href="/categories">Catégories</a>
 			</div>
+			<Search width="15rem" font_size="0.8rem" padding="0rem" logo_size=25/>
 		</div>
 		<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
 		<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_category} />
 	</div>
-
-	<div
-		role="banner"
-		class="navbar-height flex-row container"
-		on:mousemove={(event) => {
-			update_gradient(event, navbar_search);
-		}}
-		on:mouseenter={() => {
-			animateForeground(true, navbar_search);
-		}}
-		on:mouseleave={() => {
-			animateForeground(false, navbar_search);
-		}}
-	>
-		<div class="content navbar-search"><Search /></div>
-		<div class={scrollY < SCROLL ? 'navbar-overlay-front' : ''} />
-		<div class={scrollY < SCROLL ? 'navbar-overlay-back' : ''} bind:this={navbar_search} />
-	</div>
 </nav>
 <div class="navbar-fake" />
diff --git a/frontend/src/lib/components/search.svelte b/frontend/src/lib/components/search.svelte
index a1db255..9a67c6c 100644
--- a/frontend/src/lib/components/search.svelte
+++ b/frontend/src/lib/components/search.svelte
@@ -6,6 +6,13 @@
 	import { mdiMagnify } from '@mdi/js';
 	import anime from 'animejs';
 
+	export let width = '50%';
+	export let font_size = '1rem';
+	export let padding = '1rem';
+	export let logo_size = 20;
+	export let margin = '0rem';
+	export let text_color = 'var(--color-subtext)';
+
 	let div_search;
 	let input_search;
 	let svgIcon;
@@ -18,7 +25,6 @@
 			return;
 		}
 		selected = true;
-		animateButton(true);
 		showSearch(true);
 
 		// Animating the div
@@ -37,7 +43,7 @@
 					percent_var: [0, 100],
 					opacity_var: [1, 0],
 					easing: 'easeOutQuad',
-					duration: 400,
+					duration: 300,
 					update: function (anim) {
 						div_search.style.background = `radial-gradient(circle farthest-corner at 0px 0px, var(--color-background) ${anim.animations[0].currentValue}%, rgba(149,138,152,${anim.animations[1].currentValue}) 100%)`;
 					}
@@ -48,27 +54,11 @@
 
 	function closeSearch(event) {
 		if (selected && event.target != input_search && event.target != svgIcon.svgElement) {
-			animateButton(false);
 			showSearch(false);
 			selected = false;
 		}
 	}
 
-	function animateButton(isEntering) {
-		const tvalue = isEntering ? [0, -0.8] : [-0.8, 0];
-		const svalue = isEntering ? [1, 1.2] : [1.2, 1];
-		anime({
-			targets: { transform: 0, scale: 1 },
-			transform: tvalue,
-			scale: svalue,
-			duration: 300,
-			easing: 'easeOutQuad',
-			update: function (anim) {
-				svgIcon.svgElement.style.transform = `scale(${anim.animations[1].currentValue}) translateX(${anim.animations[0].currentValue}rem)`;
-			}
-		});
-	}
-
 	function showSearch(isEntering) {
 		//transform: ;
 		if (isEntering) {
@@ -98,10 +88,21 @@
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<div style="width:50%;">
+<div style="width: {width}; margin: {margin} !important;">
 	<div class="search" on:click={animate} bind:this={div_search}>
-		<SvgIcon type="mdi" path={mdiMagnify} size="20" bind:this={svgIcon}></SvgIcon>
-		<input type="text" placeholder="Rechercher..." bind:this={input_search} />
+		<SvgIcon
+			type="mdi"
+			path={mdiMagnify}
+			size={logo_size}
+			bind:this={svgIcon}
+			padding={logo_size / 3}
+		></SvgIcon>
+		<input
+			type="text"
+			style="font-size: {font_size};padding-top: {padding};padding-bottom: {padding};color: {text_color};"
+			placeholder="Rechercher..."
+			bind:this={input_search}
+		/>
 	</div>
 	<div class="search-box" bind:this={search_box}></div>
 </div>
diff --git a/frontend/src/lib/components/svg-icon-custom.svelte b/frontend/src/lib/components/svg-icon-custom.svelte
index 90a079d..0c0840c 100644
--- a/frontend/src/lib/components/svg-icon-custom.svelte
+++ b/frontend/src/lib/components/svg-icon-custom.svelte
@@ -22,6 +22,7 @@
 	export let viewbox = null;
 	export let flip = 'none';
 	export let rotate = 0;
+	export let padding = 0;
 
 	// Reactive statements to set default values based on type
 	$: defaults = types[type] || types.default;
@@ -37,9 +38,9 @@
 <svg
 	bind:this={svgElement}
 	width={sizeValue}
-	height={sizeValue}
+	height=auto
 	viewBox={viewboxValue}
-	style="--sx: {sx}; --sy: {sy}; --r: {r}"
+	style="--sx: {sx}; --sy: {sy}; --r: {r}; padding: {padding}px"
 	{...$$restProps}
 >
 	<path d={path} />
diff --git a/frontend/src/lib/css/navbar.css b/frontend/src/lib/css/navbar.css
index bdad68d..1eea510 100644
--- a/frontend/src/lib/css/navbar.css
+++ b/frontend/src/lib/css/navbar.css
@@ -146,20 +146,8 @@ a {
 
 .navbar-search {
     justify-content: center;
-}
-
-.navbar-search input {
-    width: 10rem;
-    margin-right: 1rem;
-    margin-left: 1rem;
-    margin-top: calc((5rem / 2) - 1.2rem);
-    background-color: var(--color-text);
-    color: var(--color-background);
-    height: 1.5rem;
-    border: 2px solid;
-    border-color: var(--color-subtext);
-    border-radius: 2rem;
-    padding-left: 0.5rem;
+    padding-right: 1rem;
+    padding-left: 1rem;
 }
 
 .navbar-search-floating input {
diff --git a/frontend/src/lib/css/search.css b/frontend/src/lib/css/search.css
index 775ed9b..59aa2e4 100644
--- a/frontend/src/lib/css/search.css
+++ b/frontend/src/lib/css/search.css
@@ -3,15 +3,15 @@
     flex-direction: row;
     box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
     border-radius: 5rem;
+    background-color: var(--color-background);
+    margin: 0 !important;
 }
 
 .search input {
-    padding: 1rem;
+    padding-left: 0.5rem;
     background-color: var(--color-background);
     font-family: 'JetBrains Mono';
-    font-size: 1.2rem;
     background-color: #00000000;
-    color: var(--color-subtext);
     border: 0;
     width: 100%;
     border-top-right-radius: 5rem;
@@ -24,15 +24,13 @@
 }
 
 .search svg {
-    width: 3rem;
-    height: auto;
-    padding: 1rem;
     color: var(--color-background);
     background-color: var(--color-text);
-    border-radius: 3rem;
+    border-radius: 100%;
     box-shadow: #4f325d40 15px 0px 60px -12px, #0000004d 15px 0px 36px -18px;
     background: radial-gradient(circle farthest-corner at 0px 0px, var(--color-subtext) 0%, var(--color-text) 80%);
     cursor: pointer;
+    transform: scale(1.1) !important;
 }
 
 .search-box {
@@ -41,7 +39,7 @@
     background-color: var(--color-background);
     box-shadow: rgba(79, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
     border-radius: 1rem;
-    position: absolute;
+    position: absolute !important;
     z-index: 1;
     transform: translateX(-1rem);
     display: none;
diff --git a/frontend/src/routes/style/+page.svelte b/frontend/src/routes/style/+page.svelte
index cc935ce..c693231 100644
--- a/frontend/src/routes/style/+page.svelte
+++ b/frontend/src/routes/style/+page.svelte
@@ -8,12 +8,10 @@
 </script>
 
 <div class="base">
-	<div class="blank" />
-	<div class="blank" />
 	<div class="margin-left-3">
 		<Post
 			cover="https://share.etheryo.fr/Rando-01.11.2023/Groupe%20Ombre%20Lac%20Montagne%20Rouge%20Bleu.jpg"
-			profile="https://avatars.githubusercontent.com/u/115081848?v=4"
+			profile="https://cloud.etheryo.fr/s/JrKoP57R4qHcR4A/download/pfp.jpg"
 			title="Le lorem est-il 'Ipsum' ? C'est une question que je me pose souvent"
 			text="Petit texte explicatif sans vraiment de grande importance, hormis le fait que ce soit le meilleur texte de tous les temps, après je ne suis pas ouvert au débat mais on peut essayer... bref"
 			author="Yohan boujon"
@@ -21,8 +19,17 @@
 		/>
 	</div>
 	<div class="blank" />
+	<div class="blank" />
+	<div class="blank" />
+	<div class="blank" />
+	<div class="blank" />
+	<div class="blank" />
+	<div class="blank" />
+	<div class="blank" />
+	<div class="blank" />
+	<div class="blank" />
 	<div class="margin-left-3">
-		<Search />
+		<Search logo_size=48 />
 	</div>
 	<div class="blank" />
 	<div class="margin-left-3">