Feature/90 layout of the search field–in the navbar

Flows/HomeFlow/Sources/HomeFlow/PageView/PageView.swift

@@ -23,7 +23,8 @@ struct PageView: View {
 
     @Store var store: PageStore
     @State var isFilterViewPresented = false
-
+    @State private var searchText: String = ""
+
     // MARK: - Properties
 
     var columns: [GridItem] {
@@ -35,6 +36,9 @@ struct PageView: View {
     var defaultSpacing: CGFloat {
         UIDevice.current.userInterfaceIdiom.isPad ? 18 : 12
     }
+    var searchBarWidth: CGFloat {
+        UIDevice.current.userInterfaceIdiom.isPad ? 413 : 200
+    }
 
     // MARK: - Views
 
@@ -57,19 +61,29 @@ struct PageView: View {
             }
         }
         .padToolbar {
-            ToolbarItemGroup(placement: .navigationBarLeading) {
-                SidebarLeftButton()
+            ToolbarItem(placement: .navigationBarLeading) {
+                    SidebarLeftButton()
+                }
+            ToolbarItem(placement: .principal) {
+                SearchView(searchText: $searchText)
+                    .frame(idealWidth: searchBarWidth, alignment: .center)
             }
         }
         .phoneToolbar {
-            ToolbarItemGroup(placement: ToolbarItemPlacement.navigationBarTrailing) {
+            ToolbarItem(placement: .principal) {
+                SearchView(searchText: $searchText)
+                    .frame(idealWidth: searchBarWidth, alignment: .center)
+            }
+            ToolbarItem(placement: .navigationBarTrailing) {
                 filterButton(style: .short)
-                #if DEBUG
+            }
+            #if DEBUG
+            ToolbarItem(placement: .navigationBarTrailing) {
                 Button(action: {}) {
                     Image(systemName: "person.crop.circle.fill")
                 }
-                #endif
             }
+            #endif
         }
     }
 
@@ -100,6 +114,7 @@ struct PageView: View {
         VStack(spacing: .zero) {
             if UIDevice.current.userInterfaceIdiom.isPad {
                 sectionHeader
+                SearchView(searchText: $searchText)
             }
 
             LazyVGrid(columns: columns, spacing: defaultSpacing) {

Flows/HomeFlow/Sources/HomeFlow/SearchView/SearchView.swift

@@ -0,0 +1,63 @@
+//
+//  SearchView.swift
+//  StackOv (HomeFlow module)
+//
+//  Created by Илья Князьков
+//  Copyright © 2021 Erik Basargin. All rights reserved.
+//
+
+import SwiftUI
+import Palette
+
+struct SearchView: View {
+
+    @Binding var searchText: String
+
+    var body: some View {
+            HStack(spacing: 16) {
+                searchIcon
+                textField
+                accessoryButton
+            }
+            .background(Color.searchBackground)
+            .cornerRadius(6)
+
+    }
+
+    var textField: some View {
+        TextField("Search", text: $searchText, onCommit: { })
+            .foregroundColor(Color.placeHolder)
+    }
+
+    var searchIcon: some View {
+        Image(systemName: "magnifyingglass")
+            .resizable()
+            .frame(width: 16, height: 16)
+            .foregroundColor(.secondary)
+            .padding(.all, 5)
+    }
+
+    var accessoryButton: some View {
+        Button(action: {
+            searchText = ""
+        }) {
+            accessoryIcon
+        }
+        .foregroundColor(.secondary)
+        .padding(.all, 7)
+    }
+
+    var accessoryIcon: some View {
+        Image(systemName: "xmark.circle.fill")
+            .resizable()
+            .frame(width: 16, height: 16)
+    }
+}
+
+// MARK: - Colors
+
+fileprivate extension Color {
+
+    static let searchBackground = Palette.bluishwhite | Palette.bluishblack
+    static let placeHolder = Palette.slateGray | Palette.dullGray
+}

Palette/Sources/Palette/Palette.xcassets/JordyBlue.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "255",
+          "green" : "255",
+          "red" : "255"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}