add search component

components/MobileNav.tsx

@@ -20,17 +20,13 @@ const MobileNav = () => {
   }
 
   return (
-    <div className="sm:hidden">
-      <button
-        className="ml-1 mr-1 h-8 w-8 rounded py-1"
-        aria-label="Toggle Menu"
-        onClick={onToggleNav}
-      >
+    <>
+      <button aria-label="Toggle Menu" onClick={onToggleNav} className="sm:hidden">
         <svg
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 20 20"
           fill="currentColor"
-          className="text-gray-900 dark:text-gray-100"
+          className="text-gray-900 dark:text-gray-100 h-8 w-8"
         >
           <path
             fillRule="evenodd"
@@ -45,11 +41,7 @@ const MobileNav = () => {
         }`}
       >
         <div className="flex justify-end">
-          <button
-            className="mr-5 mt-11 h-8 w-8 rounded"
-            aria-label="Toggle Menu"
-            onClick={onToggleNav}
-          >
+          <button className="mr-8 mt-11 h-8 w-8" aria-label="Toggle Menu" onClick={onToggleNav}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 20 20"
@@ -78,7 +70,7 @@ const MobileNav = () => {
           ))}
         </nav>
       </div>
-    </div>
+    </>
   )
 }