Powerful adaptive for the header

frontend/src/lib/components/header.svelte

@@ -52,6 +52,10 @@
 
     }
 
+    :global(.header__menu-button) {
+        display: none;
+    }
+
     .header__link {
         font-size: 28px;
         text-decoration: none; 
@@ -69,4 +73,42 @@
         gap: inherit;
     }
 
+    @media only screen and (max-width: 1036px) {
+        .header {
+            grid-template-columns: auto auto auto;
+        }
+    }
+
+    @media only screen and (max-width: 935px) {
+
+        .header {
+            grid-template-columns: auto auto 1fr;
+        }
+    }
+
+    @media only screen and (max-width: 730px) {
+
+        .header {
+            grid-template-columns: auto auto auto;
+        }
+        
+        :global(.header__menu-button) {
+            display: block;
+        }
+
+        .container > .header__link {
+            display: none;
+        }
+
+        .container > :global(.header__language-button), :global(.container > .header__darkmode-button) {
+            display: none;
+        }
+    }
+
+    @media only screen and (max-width: 622px) {
+        .header {
+            grid-template-columns: 1fr 1fr;
+        }
+    }
+
 </style>

frontend/src/lib/components/icon.svelte

@@ -6,15 +6,20 @@
     export let color = "var(--col_text_panel)";
     export let size = "25px";
 
+    let externalClasses = "";
+    export { externalClasses as class };
+
+    const Clickablility = onclick ? "clickable" : "";
+
 </script>
 
 <!-- FIXME: You horrible son of a goose-->
-<input class={"icon " + (onclick ? "clickable" : "")} type="button" value="" 
+<input class="{externalClasses} {Clickablility} icon" type="button" value="" 
 style="--image: url({image}); --color: {color}; background-color: {color}; --size: {size};" 
 on:click={onclick ? onclick : null}>
 
 <style>
-    .icon {
+    :global(.icon) {
         background-color: var(--color);
         object-fit: contain;
         -webkit-mask-image: var(--image);

frontend/src/lib/components/searchbar.svelte

@@ -1,11 +1,20 @@
 <script>
     import Icon from "./icon.svelte";
     import SearchIcon from "$lib/images/icons/ui/search.svg";
+
+    let classList = "";
+    export { classList as class };
 </script>
 
-<div class="searchbar">
+<div class="{classList} searchbar">
+    <div class="normal">
         <Icon class="searchbar__icon" image={SearchIcon} size="36px"/>
         <input class="searchbar__input" type="text" placeholder="Search stuff...">
+    </div>
+    <div class="compact">
+        <Icon class="searchbar__icon" image={SearchIcon} size="36px"/>
+    </div>
+
 </div>
 
 <style>
@@ -18,6 +27,7 @@
         border-radius: 30px;
 
 
+        width: auto;
         height: 36px;
         padding: 10px;
     }
@@ -27,6 +37,7 @@
         background-color: transparent;
         color: var(--col_text_panel);
 
+        max-width: 200px;
         font-size: 16px;
     }
 
@@ -34,4 +45,48 @@
         outline: none;
     }
 
+    .compact {
+        display: none;
+    }
+
+    @media only screen and (max-width: 935px) {
+
+        .searchbar {
+            margin-left: auto;
+        }
+        .normal {
+            display: none;
+        }
+        .compact {
+            display: flex;
+        }
+    }
+
+    @media only screen and (max-width: 730px) {
+
+        .searchbar {
+            margin-left: auto;
+        }
+        .normal {
+            display: flex;
+        }
+        .compact {
+            display: none;
+        }
+
+    }
+
+    @media only screen and (max-width: 506px) {
+
+        .searchbar {
+            margin-left: auto;
+        }
+        .normal {
+            display: none;
+        }
+        .compact {
+            display: flex;
+        }
+    }
+
 </style>