From cc41a9c033c1694c5e71524c5cae1fb5cbdc516a Mon Sep 17 00:00:00 2001
From: Pablo Felipe <pablofelipe1999@hotmail.com>
Date: Wed, 19 Jan 2022 18:01:25 -0300
Subject: [PATCH 1/7] Adding new NavBar template and styling it

---
 src/components/NavBar.tsx | 134 ++++++++++++++++++++++++--------------
 1 file changed, 84 insertions(+), 50 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index c0bc089..1a10cc3 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,15 +1,41 @@
-/* This example requires Tailwind CSS v2.0+ */
+/*
+  This example requires Tailwind CSS v2.0+ 
+  
+  This example requires some changes to your config:
+  
+  ```
+  // tailwind.config.js
+  module.exports = {
+    // ...
+    plugins: [
+      // ...
+      require('@tailwindcss/forms'),
+    ],
+  }
+  ```
+*/
 import { Fragment } from 'react'
 import { Disclosure, Menu, Transition } from '@headlessui/react'
+import { SearchIcon } from '@heroicons/react/solid'
 import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
 
 import DittoImg from "../assets/ditto.png"
 
-
+const user = {
+  name: 'Tom Cook',
+  email: 'tom@example.com',
+  imageUrl:
+    'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
+}
 const navigation = [
-  { name: 'Home', href: '#', current: true },
-  { name: 'About Us', href: '#', current: false },
-  { name: 'Search', href: '#', current: false },
+    { name: 'Home', href: '#', current: true },
+    { name: 'About Us', href: '#', current: false },
+    { name: 'Search', href: '#', current: false },
+]
+const userNavigation = [
+  { name: 'Your Profile', href: '#' },
+  { name: 'Settings', href: '#' },
+  { name: 'Sign out', href: '#' },
 ]
 
 function classNames(...classes:any) {
@@ -18,36 +44,15 @@ function classNames(...classes:any) {
 
 export default function NavBar() {
   return (
-    <Disclosure as="nav" className="bg-purple">
+    <Disclosure as="header" className="bg-purple">
       {({ open }) => (
         <>
-          <header>
-            <style>
-              @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
-            </style>
-          </header>
-          <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
-            <div className="relative flex items-center justify-between h-16">
-              <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
-                {/* Mobile menu button*/}
-                <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-400 hover:bg-light-purple focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
-                  <span className="sr-only">Open main menu</span>
-                  {open ? (
-                    <XIcon className="block h-6 w-6" aria-hidden="true" />
-                  ) : (
-                    <MenuIcon className="block h-6 w-6" aria-hidden="true" />
-                  )}
-                </Disclosure.Button>
-              </div>
-              <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
+          <div className="max-w-7xl mx-auto px-2 sm:px-4 lg:divide-y lg:divide-white lg:px-8">
+            <div className="relative h-16 flex justify-between">
+              <div className="relative z-10 px-2 flex lg:px-0">
                 <div className="flex-shrink-0 flex items-center">
                   <img
-                    className="block lg:hidden h-8 w-auto"
-                    src={DittoImg}
-                    alt="Ditto Icon"
-                  />
-                  <img
-                    className="hidden lg:block h-8 w-auto"
+                    className="block h-8 w-auto"
                     src={DittoImg}
                     alt="Ditto Icon"
                   />
@@ -55,36 +60,65 @@ export default function NavBar() {
                     The Game Database
                   </h1>
                 </div>
-                <div className="hidden sm:block sm:ml-6">
-                  <div className="flex space-x-4">
-                    {navigation.map((item) => (
-                      <a
-                        key={item.name}
-                        href={item.href}
-                        className={classNames(
-                          item.current ? 'bg-light-purple text-white' : 'text-gray-300 hover:bg-light-purple hover:text-white',
-                          'px-4 py-2 rounded-md text-sm font-medium'
-                        )}
-                        aria-current={item.current ? 'page' : undefined}
-                      >
-                        {item.name}
-                      </a>
-                    ))}
+              </div>
+              <div className="relative z-0 flex-1 px-2 flex items-center justify-center sm:absolute sm:inset-0">
+                <div className="w-full sm:max-w-xs">
+                  <label htmlFor="search" className="sr-only">
+                    Search
+                  </label>
+                  <div className="relative">
+                    <div className="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
+                      <SearchIcon className="h-5 w-5 text-light-purple" aria-hidden="true" />
+                    </div>
+                    <input
+                      id="search"
+                      name="search"
+                      className="block w-full bg-white border border-transparent rounded-md py-2 pl-10 pr-3 text-sm placeholder-purple focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-light-purple focus:placeholder-gray-500 sm:text-sm"
+                      placeholder="Search"
+                      type="search"
+                    />
                   </div>
                 </div>
               </div>
+              <div className="relative z-10 flex items-center lg:hidden">
+                {/* Mobile menu button */}
+                <Disclosure.Button className="rounded-md p-2 inline-flex items-center justify-center text-white hover:bg-light-purple hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+                  <span className="sr-only">Open menu</span>
+                  {open ? (
+                    <XIcon className="block h-6 w-6" aria-hidden="true" />
+                  ) : (
+                    <MenuIcon className="block h-6 w-6" aria-hidden="true" />
+                  )}
+                </Disclosure.Button>
+              </div>
             </div>
+            <nav className="hidden lg:py-2 lg:flex lg:space-x-8" aria-label="Global">
+              {navigation.map((item) => (
+                <a
+                  key={item.name}
+                  href={item.href}
+                  className={classNames(
+                    item.current ? 'bg-light-purple text-gray-300' : 'text-white hover:bg-light-purple hover:text-gray-300',
+                    'rounded-md py-2 px-3 inline-flex items-center text-sm font-medium'
+                  )}
+                  aria-current={item.current ? 'page' : undefined}
+                >
+                  {item.name}
+                </a>
+              ))}
+            </nav>
           </div>
-          <Disclosure.Panel className="sm:hidden">
-            <div className="px-2 pt-2 pb-3 space-y-1">
+
+          <Disclosure.Panel as="nav" className="lg:hidden" aria-label="Global">
+            <div className="pt-2 pb-3 px-2 space-y-1">
               {navigation.map((item) => (
                 <Disclosure.Button
                   key={item.name}
                   as="a"
                   href={item.href}
                   className={classNames(
-                    item.current ? 'bg-light-purple text-white' : 'text-gray-300 hover:bg-light-purple hover:text-white',
-                    'block px-3 py-2 rounded-md text-base font-medium'
+                    item.current ? 'bg-light-purple text-gray-300' : 'text-white hover:bg-light-purple hover:text-gray-300',
+                    'block rounded-md py-2 px-3 text-base font-medium'
                   )}
                   aria-current={item.current ? 'page' : undefined}
                 >

From 873fe5235d84efb7451167768d950a270fef58dd Mon Sep 17 00:00:00 2001
From: Pablo Felipe <pablofelipe1999@hotmail.com>
Date: Thu, 20 Jan 2022 16:49:16 -0300
Subject: [PATCH 2/7] Putting Search bar to the right

---
 src/components/NavBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 1a10cc3..acb6b03 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -61,7 +61,7 @@ export default function NavBar() {
                   </h1>
                 </div>
               </div>
-              <div className="relative z-0 flex-1 px-2 flex items-center justify-center sm:absolute sm:inset-0">
+              <div className="relative z-0 flex-1 flex items-center justify-end sm:absolute sm:inset-0">
                 <div className="w-full sm:max-w-xs">
                   <label htmlFor="search" className="sr-only">
                     Search

From 581a5b26fb42e56d338aa3ffc1afd6bd269acf61 Mon Sep 17 00:00:00 2001
From: Pablo Felipe <pablofelipe1999@hotmail.com>
Date: Tue, 25 Jan 2022 16:17:18 -0300
Subject: [PATCH 3/7] Identation

---
 src/components/NavBar.tsx | 151 +++++++++++++++++---------------------
 1 file changed, 68 insertions(+), 83 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index acb6b03..997ce4c 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,41 +1,15 @@
-/*
-  This example requires Tailwind CSS v2.0+ 
-  
-  This example requires some changes to your config:
-  
-  ```
-  // tailwind.config.js
-  module.exports = {
-    // ...
-    plugins: [
-      // ...
-      require('@tailwindcss/forms'),
-    ],
-  }
-  ```
-*/
+/* This example requires Tailwind CSS v2.0+ */
 import { Fragment } from 'react'
 import { Disclosure, Menu, Transition } from '@headlessui/react'
-import { SearchIcon } from '@heroicons/react/solid'
 import { BellIcon, MenuIcon, XIcon } from '@heroicons/react/outline'
+import { SearchIcon } from '@heroicons/react/solid'
 
 import DittoImg from "../assets/ditto.png"
 
-const user = {
-  name: 'Tom Cook',
-  email: 'tom@example.com',
-  imageUrl:
-    'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-}
+
 const navigation = [
-    { name: 'Home', href: '#', current: true },
-    { name: 'About Us', href: '#', current: false },
-    { name: 'Search', href: '#', current: false },
-]
-const userNavigation = [
-  { name: 'Your Profile', href: '#' },
-  { name: 'Settings', href: '#' },
-  { name: 'Sign out', href: '#' },
+  { name: 'Home', href: '#', current: true },
+  { name: 'About Us', href: '#', current: false },
 ]
 
 function classNames(...classes:any) {
@@ -44,15 +18,36 @@ function classNames(...classes:any) {
 
 export default function NavBar() {
   return (
-    <Disclosure as="header" className="bg-purple">
+    <Disclosure as="nav" className="bg-purple">
       {({ open }) => (
         <>
-          <div className="max-w-7xl mx-auto px-2 sm:px-4 lg:divide-y lg:divide-white lg:px-8">
-            <div className="relative h-16 flex justify-between">
-              <div className="relative z-10 px-2 flex lg:px-0">
+          <header>
+            <style>
+              @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
+            </style>
+          </header>
+          <div className="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
+            <div className="relative flex items-center justify-between h-16">
+              <div className="absolute inset-y-0 left-0 flex items-center sm:hidden">
+                {/* Mobile menu button*/}
+                <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-gray-400 hover:bg-light-purple focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
+                  <span className="sr-only">Open main menu</span>
+                  {open ? (
+                    <XIcon className="block h-6 w-6" aria-hidden="true" />
+                  ) : (
+                    <MenuIcon className="block h-6 w-6" aria-hidden="true" />
+                  )}
+                </Disclosure.Button>
+              </div>
+              <div className="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
                 <div className="flex-shrink-0 flex items-center">
                   <img
-                    className="block h-8 w-auto"
+                    className="block lg:hidden h-8 w-auto"
+                    src={DittoImg}
+                    alt="Ditto Icon"
+                  />
+                  <img
+                    className="hidden lg:block h-8 w-auto"
                     src={DittoImg}
                     alt="Ditto Icon"
                   />
@@ -60,65 +55,55 @@ export default function NavBar() {
                     The Game Database
                   </h1>
                 </div>
-              </div>
-              <div className="relative z-0 flex-1 flex items-center justify-end sm:absolute sm:inset-0">
-                <div className="w-full sm:max-w-xs">
-                  <label htmlFor="search" className="sr-only">
-                    Search
-                  </label>
-                  <div className="relative">
-                    <div className="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
-                      <SearchIcon className="h-5 w-5 text-light-purple" aria-hidden="true" />
+                <div className="relative z-0 flex-1 flex items-center justify-end sm:absolute sm:inset-0 sm:hidden">
+                  <div className="w-full sm:max-w-xs">
+                    <label htmlFor="search" className="sr-only">
+                      Search
+                    </label>
+                    <div className="relative">
+                      <div className="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
+                        <SearchIcon className="h-5 w-5 text-light-purple" aria-hidden="true" />
+                      </div>
+                      <input
+                        id="search"
+                        name="search"
+                        className="block w-full bg-white border border-transparent rounded-md py-2 pl-10 pr-3 text-sm placeholder-purple focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-light-purple focus:placeholder-gray-500 sm:text-sm"
+                        placeholder="Search"
+                        type="search"
+                      />
                     </div>
-                    <input
-                      id="search"
-                      name="search"
-                      className="block w-full bg-white border border-transparent rounded-md py-2 pl-10 pr-3 text-sm placeholder-purple focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-light-purple focus:placeholder-gray-500 sm:text-sm"
-                      placeholder="Search"
-                      type="search"
-                    />
                   </div>
                 </div>
-              </div>
-              <div className="relative z-10 flex items-center lg:hidden">
-                {/* Mobile menu button */}
-                <Disclosure.Button className="rounded-md p-2 inline-flex items-center justify-center text-white hover:bg-light-purple hover:text-gray-300 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
-                  <span className="sr-only">Open menu</span>
-                  {open ? (
-                    <XIcon className="block h-6 w-6" aria-hidden="true" />
-                  ) : (
-                    <MenuIcon className="block h-6 w-6" aria-hidden="true" />
-                  )}
-                </Disclosure.Button>
+                <div className="hidden sm:block sm:ml-6">
+                  <div className="flex space-x-4">
+                    {navigation.map((item) => (
+                      <a
+                        key={item.name}
+                        href={item.href}
+                        className={classNames(
+                          item.current ? 'bg-light-purple text-white' : 'text-gray-300 hover:bg-light-purple hover:text-white',
+                          'px-4 py-2 rounded-md text-sm font-medium'
+                        )}
+                        aria-current={item.current ? 'page' : undefined}
+                      >
+                        {item.name}
+                      </a>
+                    ))}
+                  </div>
+                </div>
               </div>
             </div>
-            <nav className="hidden lg:py-2 lg:flex lg:space-x-8" aria-label="Global">
-              {navigation.map((item) => (
-                <a
-                  key={item.name}
-                  href={item.href}
-                  className={classNames(
-                    item.current ? 'bg-light-purple text-gray-300' : 'text-white hover:bg-light-purple hover:text-gray-300',
-                    'rounded-md py-2 px-3 inline-flex items-center text-sm font-medium'
-                  )}
-                  aria-current={item.current ? 'page' : undefined}
-                >
-                  {item.name}
-                </a>
-              ))}
-            </nav>
           </div>
-
-          <Disclosure.Panel as="nav" className="lg:hidden" aria-label="Global">
-            <div className="pt-2 pb-3 px-2 space-y-1">
+          <Disclosure.Panel className="sm:hidden">
+            <div className="px-2 pt-2 pb-3 space-y-1">
               {navigation.map((item) => (
                 <Disclosure.Button
                   key={item.name}
                   as="a"
                   href={item.href}
                   className={classNames(
-                    item.current ? 'bg-light-purple text-gray-300' : 'text-white hover:bg-light-purple hover:text-gray-300',
-                    'block rounded-md py-2 px-3 text-base font-medium'
+                    item.current ? 'bg-light-purple text-white' : 'text-gray-300 hover:bg-light-purple hover:text-white',
+                    'block px-3 py-2 rounded-md text-base font-medium'
                   )}
                   aria-current={item.current ? 'page' : undefined}
                 >

From 0aab7c1e7b6df814112da5aa0a962ffedb5a9dbe Mon Sep 17 00:00:00 2001
From: Pablo Felipe <pablofelipe1999@hotmail.com>
Date: Thu, 27 Jan 2022 17:28:19 -0300
Subject: [PATCH 4/7] Adding Search bar responsivity with also, mobile menu

---
 src/components/NavBar.tsx | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 997ce4c..a74a24d 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -55,8 +55,8 @@ export default function NavBar() {
                     The Game Database
                   </h1>
                 </div>
-                <div className="relative z-0 flex-1 flex items-center justify-end sm:absolute sm:inset-0 sm:hidden">
-                  <div className="w-full sm:max-w-xs">
+                <div className="hidden relative z-0 flex-1 sm:flex items-center justify-end sm:absolute sm:inset-0">
+                  <div className="w-full sm:w-36 md:w-64 lg:w-80">
                     <label htmlFor="search" className="sr-only">
                       Search
                     </label>
@@ -110,6 +110,25 @@ export default function NavBar() {
                   {item.name}
                 </Disclosure.Button>
               ))}
+              <div className="relative z-0 flex-1 flex items-center justify-center sm:inset-0">
+                <div className="w-full">
+                  <label htmlFor="search" className="sr-only">
+                    Search
+                  </label>
+                  <div className="relative">
+                    <div className="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
+                      <SearchIcon className="h-5 w-5 text-light-purple" aria-hidden="true" />
+                    </div>
+                    <input
+                      id="search"
+                      name="search"
+                      className="block w-full bg-white border border-transparent rounded-md py-2 pl-10 pr-3 text-sm placeholder-purple focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-light-purple focus:placeholder-gray-500 sm:text-sm"
+                      placeholder="Search"
+                      type="search"
+                    />
+                  </div>
+                </div>
+              </div>
             </div>
           </Disclosure.Panel>
         </>

From b43aebaa2104d0d73490e5b8341665da86b6a73c Mon Sep 17 00:00:00 2001
From: Pablo Felipe <pablofelipe1999@hotmail.com>
Date: Thu, 27 Jan 2022 18:08:09 -0300
Subject: [PATCH 5/7] Fixing Search bar placeholder on sm resolution viewing

---
 src/components/NavBar.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index a74a24d..647ae1c 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -61,14 +61,14 @@ export default function NavBar() {
                       Search
                     </label>
                     <div className="relative">
-                      <div className="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center">
+                      <div className="pointer-events-none absolute inset-y-0 left-0 pl-2.5 flex items-center">
                         <SearchIcon className="h-5 w-5 text-light-purple" aria-hidden="true" />
                       </div>
                       <input
                         id="search"
                         name="search"
-                        className="block w-full bg-white border border-transparent rounded-md py-2 pl-10 pr-3 text-sm placeholder-purple focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-light-purple focus:placeholder-gray-500 sm:text-sm"
-                        placeholder="Search"
+                        className="block w-full bg-white border border-transparent rounded-md py-2 pl-9 text-sm placeholder-purple focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-light-purple focus:placeholder-gray-500 sm:text-sm"
+                        placeholder="Search a game"
                         type="search"
                       />
                     </div>
@@ -123,7 +123,7 @@ export default function NavBar() {
                       id="search"
                       name="search"
                       className="block w-full bg-white border border-transparent rounded-md py-2 pl-10 pr-3 text-sm placeholder-purple focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-light-purple focus:placeholder-gray-500 sm:text-sm"
-                      placeholder="Search"
+                      placeholder="Search a game"
                       type="search"
                     />
                   </div>

From db04a9dbec33a81c2b303a62ef9d6df478c2a8a4 Mon Sep 17 00:00:00 2001
From: Pablo Felipe <pablofelipe1999@hotmail.com>
Date: Thu, 27 Jan 2022 18:28:03 -0300
Subject: [PATCH 6/7] Fixing button hover not visible on NavBar items

---
 src/components/NavBar.tsx | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 647ae1c..2416952 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -55,7 +55,24 @@ export default function NavBar() {
                     The Game Database
                   </h1>
                 </div>
-                <div className="hidden relative z-0 flex-1 sm:flex items-center justify-end sm:absolute sm:inset-0">
+                <div className="hidden sm:block sm:ml-6">
+                  <div className="flex space-x-4">
+                    {navigation.map((item) => (
+                      <a
+                        key={item.name}
+                        href={item.href}
+                        className={classNames(
+                          item.current ? 'bg-light-purple text-white' : 'text-gray-300 hover:bg-light-purple hover:text-white',
+                          'px-4 py-2 rounded-md text-sm font-medium'
+                        )}
+                        aria-current={item.current ? 'page' : undefined}
+                      >
+                        {item.name}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+                <div className="hidden relative z-0 flex-1 sm:flex items-center justify-end sm:inset-0">
                   <div className="w-full sm:w-36 md:w-64 lg:w-80">
                     <label htmlFor="search" className="sr-only">
                       Search
@@ -74,23 +91,6 @@ export default function NavBar() {
                     </div>
                   </div>
                 </div>
-                <div className="hidden sm:block sm:ml-6">
-                  <div className="flex space-x-4">
-                    {navigation.map((item) => (
-                      <a
-                        key={item.name}
-                        href={item.href}
-                        className={classNames(
-                          item.current ? 'bg-light-purple text-white' : 'text-gray-300 hover:bg-light-purple hover:text-white',
-                          'px-4 py-2 rounded-md text-sm font-medium'
-                        )}
-                        aria-current={item.current ? 'page' : undefined}
-                      >
-                        {item.name}
-                      </a>
-                    ))}
-                  </div>
-                </div>
               </div>
             </div>
           </div>

From 0c47ab8e35a3b2550366ad755eb494126d946fd7 Mon Sep 17 00:00:00 2001
From: Pablo Felipe <pablofelipe1999@hotmail.com>
Date: Mon, 31 Jan 2022 15:50:15 -0300
Subject: [PATCH 7/7] Fixing Search bar size on mobile (sm tlwnd) viewing

---
 src/components/NavBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index 2416952..25e66ca 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -72,8 +72,8 @@ export default function NavBar() {
                     ))}
                   </div>
                 </div>
-                <div className="hidden relative z-0 flex-1 sm:flex items-center justify-end sm:inset-0">
-                  <div className="w-full sm:w-36 md:w-64 lg:w-80">
+                <div className="hidden relative pl-3 z-0 flex-1 sm:flex items-center justify-end sm:inset-0">
+                  <div className="w-full md:w-64 lg:w-80">
                     <label htmlFor="search" className="sr-only">
                       Search
                     </label>