navbar

components/Navbar/Navbar.module.css

@@ -1,12 +1,7 @@
 .root {
-  @apply border-black border-b;
+  @apply;
 }
 
 .container {
-  @apply flex justify-between items-center flex-row px-4 border-black border-l border-r h-20 relative;
-}
-
-.logoContainer {
-  @apply absolute transform -translate-x-1/2;
-  left: 50%;
+  @apply flex justify-between items-center flex-row px-6 h-20 relative border-gray-100 border-b;
 }

components/Navbar/Navbar.tsx

@@ -13,15 +13,15 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
   return (
     <div className={rootClassName}>
       <Container className={s.container}>
-        <div className="flex flex-row h-full content-center">
+        <Logo />
+        <div className="flex flex-row h-full content-center flex-1">
           <Searchbar />
           <nav className="flex flex-row items-center px-3">
-            All Clothes Accesories
+            <a className="pr-4">All</a>
+            <a className="pr-4">Clothes</a>
+            <a>Accesories</a>
           </nav>
         </div>
-        <span className={s.logoContainer}>
-          <Logo />
-        </span>
         <nav>
           <Avatar />
         </nav>

components/Searchbar/Searchbar.module.css

@@ -1,3 +1,25 @@
 .root {
-  @apply px-4 border-black border-r h-full flex items-center;
+  @apply px-4 flex items-center;
+}
+
+.container {
+  @apply relative rounded-lg flex flex-row text-sm items-center;
+  background-color: #fafafa;
+}
+
+.input {
+  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg;
+  min-width: 300px;
+}
+
+.input:focus {
+  @apply outline-none shadow-outline-gray;
+}
+
+.iconContainer {
+  @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
+}
+
+.icon {
+  @apply h-5 w-5;
 }

components/Searchbar/Searchbar.tsx

@@ -12,13 +12,18 @@ const Searchbar: FunctionComponent<Props> = ({ className }) => {
   return (
     <div className={rootClassName}>
       <div className="flex-1 flex justify-between px-2">
-        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-          />
-        </svg>
+        <div className={s.container}>
+          <input className={s.input} placeholder="Search for products..." />
+          <div className={s.iconContainer}>
+            <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+              />
+            </svg>
+          </div>
+        </div>
       </div>
     </div>
   );