Updated navbar. Search can now be customized.

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" />

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>
+		<SvgIcon
-		<input type="text" placeholder="Rechercher..." bind:this={input_search} />
+			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>

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} />

frontend/src/lib/css/navbar.css

@@ -146,20 +146,8 @@ a {
 
 .navbar-search {
     justify-content: center;
-}
+    padding-right: 1rem;
-
+    padding-left: 1rem;
-.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;
 }
 
 .navbar-search-floating input {

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;

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">