Add search field

3 files changed, 38 insertions, 4 deletions

diff --git a/src/main/scala/reading/component/index/style/BookDetail.scala b/src/main/scala/reading/component/index/style/BookDetail.scala
index e8f970e..f432fda 100644
--- a/src/main/scala/reading/component/index/style/BookDetail.scala
+++ b/src/main/scala/reading/component/index/style/BookDetail.scala
@@ -18,6 +18,10 @@ object BookDetail extends StyleSheet.Inline {
     marginBottom(30.px)
   )
 
+  val items = style(
+    marginBottom(25.px)
+  )
+
   val item = style(
     lineHeight(25.px),
     margin(0.px, 15.px, 15.px),
diff --git a/src/main/scala/reading/component/index/style/Header.scala b/src/main/scala/reading/component/index/style/Header.scala
index 2260c91..2eb6eb2 100644
--- a/src/main/scala/reading/component/index/style/Header.scala
+++ b/src/main/scala/reading/component/index/style/Header.scala
@@ -66,6 +66,18 @@ object Header extends StyleSheet.Inline {
     height(15.px)
   )
 
+  val searchAndCount = style(
+    display.flex,
+    flexWrap.wrap,
+    alignItems.center,
+    Media.mobile(justifyContent.center)
+  )
+
+  val search = style(
+    Media.mobile(display.none),
+    Media.desktop(marginRight(30.px))
+  )
+
   val booksCount = style(
     fontSize(20.px),
     color(C.gray.value),
diff --git a/src/main/scala/reading/component/index/style/Menu.scala b/src/main/scala/reading/component/index/style/Menu.scala
index 12b0646..dd74039 100644
--- a/src/main/scala/reading/component/index/style/Menu.scala
+++ b/src/main/scala/reading/component/index/style/Menu.scala
@@ -10,9 +10,27 @@ object Menu extends StyleSheet.Inline {
 
   val menu = style(
     Media.mobile(display.none),
-    color(C.white.value),
+    Media.desktop(
+      color(C.white.value),
+      position.relative,
+      width(280.px)
+    )
+  )
+
+  val background = style(
+    Media.desktop(
+      position.fixed,
+      width(280.px),
+      height(100.%%),
+      backgroundColor(C.englishWalnut.value),
+      boxShadow := "4px 0px 6px -1px rgba(0, 0, 0, 0.2)"
+    )
+  )
+
+  val content = style(
     position.relative,
-    width(280.px)
+    width(100.%%),
+    height(100.%%)
   )
 
   val header = style(
@@ -50,6 +68,8 @@ object Menu extends StyleSheet.Inline {
     )
   )
 
+  val empty = style()
+
   val groups = style(
     Media.mobile(
       height :=! "calc(100% - 120px)",
@@ -57,8 +77,6 @@ object Menu extends StyleSheet.Inline {
     )
   )
 
-  val filterGroup = style()
-
   val filterTitle = style(
     Commons.filter(),
     minHeight(50.px),