From cc4febf595d6554021e571b5424e146fab7a991a Mon Sep 17 00:00:00 2001
From: Damillora <damillora@damillora.com>
Date: Fri, 7 May 2021 21:41:48 +0700
Subject: [PATCH] feat(shian): search styles

---
 src/sass/components/_header.scss |  3 +-
 src/sass/components/_menu.scss   | 49 +++++++++++++++++++++++++++++++-
 2 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/src/sass/components/_header.scss b/src/sass/components/_header.scss
index e36b43f..36c86ef 100644
--- a/src/sass/components/_header.scss
+++ b/src/sass/components/_header.scss
@@ -6,7 +6,7 @@
   overflow: hidden;
   @include transition;
   &.enabled {
-    height: 100vh;
+    height: 100%;
   }
   @include screen(md) {
     height: 4rem;
@@ -48,6 +48,7 @@
 .header {
   display: flex;
   flex-direction: column;
+  height: 100%;
   @include transition;
 
   &__top {
diff --git a/src/sass/components/_menu.scss b/src/sass/components/_menu.scss
index 7def28c..fbd35a2 100644
--- a/src/sass/components/_menu.scss
+++ b/src/sass/components/_menu.scss
@@ -1,6 +1,7 @@
 .menu {
   max-height: 0px;
-  display: block;
+  display: flex;
+  flex-direction: column;
   @include transition;
   overflow: hidden;
   &.enabled {
@@ -18,6 +19,12 @@
     &:hover {
       background-color: $theme-blue;
     }
+
+    &--hidden {
+      max-height: 0;
+      overflow: hidden;
+      @include transition;
+    }
   }
 
   &__link {
@@ -42,9 +49,49 @@
     color: $white;
     @include px(1rem);
   }
+
   &__separator {
     margin-left: 5rem;
     margin-right: 4rem;
     border-top: 0.125rem solid $white;
   }
+
+  &__search-input {
+    display: inline-block;
+    flex-grow: 1;
+    color: $white;
+    @include px(0.5rem);
+    @include mx(0.5rem);
+    @include py(0.25rem);
+    appearance: none;
+    background-color: transparent;
+    outline: none;
+    border-bottom: 1px solid $white;
+    &:focus-visible {
+      outline: none;
+      border-bottom: 1px solid $white;
+    }
+  }
+  &__search-results {
+    flex-grow: 1;
+    overflow-y: scroll;
+  }
+  &__search-result {
+    color: $white;
+    display: block;
+    align-items: center;
+    @include px(2rem);
+    @include py(1rem);
+    @include transition;
+
+    &:hover {
+      background-color: $theme-blue;
+    }
+  }
+  &__search-title {
+    color: $white;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }