From 5eaae629e25421d55fa594fa1a75655b9c39f9d2 Mon Sep 17 00:00:00 2001
From: Papin Nikolai <nikolai@weirdcat.ru>
Date: Mon, 5 Aug 2024 10:13:20 +0300
Subject: [PATCH] Completed header but struggling to center the searchbar in
 flexbox; will try grid instead

---
 frontend/src/lib/components/header.svelte    |  5 +--
 frontend/src/lib/components/searchbar.svelte | 35 ++++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/header.svelte b/frontend/src/lib/components/header.svelte
index 3f2d21b..e7fed12 100644
--- a/frontend/src/lib/components/header.svelte
+++ b/frontend/src/lib/components/header.svelte
@@ -1,5 +1,4 @@
 <script>
-	import Searchbar from "./searchbar.svelte";
     import Logo from "$lib/images/gif/maxwell-cat.gif";
 	import Icon from "./icon.svelte";
 
@@ -7,6 +6,7 @@
     import LanguageIcon from "$lib/images/icons/ui/language.svg";
     import DarkmodeIcon from "$lib/images/icons/ui/darkmode.svg";
 	import Spacer from "./service/spacer.svelte";
+	import Searchbar from "./searchbar.svelte";
     
 </script>
 
@@ -20,6 +20,8 @@
     <a class="header__link" href="/blog">Blog</a>
     <a class="header__link" href="/services">Services</a>
 
+
+    <Spacer type="right"/>
     <Searchbar/>
 
     <Spacer type="left"/>
@@ -54,5 +56,4 @@
 
     }
 
-
 </style>
\ No newline at end of file
diff --git a/frontend/src/lib/components/searchbar.svelte b/frontend/src/lib/components/searchbar.svelte
index e69de29..c60ccb2 100644
--- a/frontend/src/lib/components/searchbar.svelte
+++ b/frontend/src/lib/components/searchbar.svelte
@@ -0,0 +1,35 @@
+<script>
+    import Icon from "./icon.svelte";
+    import SearchIcon from "$lib/images/icons/ui/search.svg";
+</script>
+
+<div class="searchbar">
+    <Icon class="searchbar__icon" image={SearchIcon} size="36px"/>
+    <input class="searchbar__input" type="text" placeholder="Search stuff...">
+</div>
+
+<style>
+    .searchbar {
+
+        display: flex;
+        align-items: center;
+
+        background-color: var(--col_panel_field);
+        border-radius: 30px;
+
+        padding: 10px;
+    }
+
+    .searchbar__input {
+        border: none;
+        background-color: transparent;
+        color: var(--col_text_panel);
+
+        font-size: 18px;
+    }
+
+    .searchbar__input:focus {
+        outline: none;
+    }
+
+</style>
\ No newline at end of file