add icon to search field

assets/css/src/html.css

@@ -30,6 +30,10 @@ nav hr {
   margin-left: 0;
 }
 
+input[type="text"]:focus-visible {
+  outline: none;
+}
+
 /* ================= SCROLLBAR ================= */
 body,
 html {

assets/css/src/nav.css

@@ -61,7 +61,28 @@
   overflow: auto;
 }
 
-.panel > ul {
+.search {
+  position: relative;
+}
+.search__input {
+  width: 100%;
+  background-color: transparent;
+  border: none;
+  border-bottom: 1px solid #fff;
+  color: #fff;
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-light);
+  margin-bottom: var(--unit--vertical);
+}
+.search__icon {
+  position: absolute;
+  width: 1.1rem;
+  height: 1.1rem;
+  top: 0;
+  right: calc(var(--unit--horizontal) / 2);
+}
+
+.panel__result .panel__items {
   margin-bottom: calc(var(--unit--vertical) * 4);
 }
 

assets/images/icons/search.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FFF"><path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path></svg>