devhatt · muritadb · Aug 15, 2024 · Aug 16, 2024 · Aug 16, 2024 · Aug 17, 2024
@@ -1,5 +1,11 @@
+import { Navbar } from "@/components/petdex/Navbar/Navbar";
+
 function Page() {
-  return <h1>Petdex</h1>
+  return (
+    <>
+      <Navbar />
+    </>
+  );
 }
 
 export default Page
@@ -0,0 +1,77 @@
+'use client'
+
+import { useState } from 'react'
+import { Logo } from './assets/Logo'
+import { MenuButtonClose } from './assets/MenuButtonClose'
+import { SearchIcon } from './assets/SearchIcon'
+import { Menu } from './assets/Menu'
+import { LogoMobile } from './assets/LogoMobile'
+import { MenuButtonMobile } from './assets/MenuButtonMobile'
+import { NavbarTypes } from './Navbar.types'
+import { MenuMobile } from './assets/MenuMobile'
+
+function Navbar() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [isSearch, setIsSearch] = useState(false)
+
+  const handleButton = () => setIsOpen(o => !o)
+
+  const handleSearchButton = () => setIsSearch(s => !s)
+
+  return (
+    <div className="py-8">
+      <header className="flex  justify-between w-[80%] h-20 mx-auto sm:w-[90%]">
+        <div className="flex">
+          <nav className='flex items-center mobile:w-[90%] mx-auto '>
+            <div className='w-28 items-center mr-10'>
+              {!isSearch
+                ? <Logo />
+                : <LogoMobile />
+              }
+            </div>
+            <div
+              className={'absolute flex flex-col left-0 top-[8rem] lg:relative lg:left-0 lg:top-0'}
+            >
+              <Menu />
+              <MenuMobile isOpen={isOpen} />
+            </div>
+          </nav>
+        </div>
+        <div className='flex items-center  space-x-3'>
+
+          <div
+            className={`flex border-2 space-x-3 border-gray-200 rounded-3xl px-4 py-3 cursor-pointer`}
+          >
+            <SearchIcon
+              handleSearchButton={handleSearchButton}
+            />
+            <input
+              className={` block w-full `}
+              type="text"
+              name="search"
+              placeholder="Pesquise seu amigo aqui!"
+            />
+
+          </div>
+
+          <button
+            className={`${isOpen ? 'block' : 'hidden'} absolute left-0 top-[30rem] bg-petdex-secondaryGreen text-white px-10 py-3 rounded-3xl lg:relative lg:block lg:top-0 `}
+          >
+            Entrar | Cadastrar
+          </button>
+
+          {!isSearch &&
+            <div className='cursor-pointer lg:hidden'>
+              {isOpen
+                ? <MenuButtonClose handleButton={handleButton} />
+                : <MenuButtonMobile handleButton={handleButton} />
+              }
+            </div>
+          }
+        </div>
+      </header >
+    </div >
+  )
+}
+
+export { Navbar }
@@ -0,0 +1,5 @@
+
+export type NavbarTypes = & {
+  handleSearchButton?: () => boolean | void
+  handleButton?: () => boolean
+}
@@ -0,0 +1,24 @@
+import { SVGProps } from "react"
+
+function Logo(props: SVGProps<SVGAElement>) {
+  return (
+    <>
+      <svg
+        viewBox="0 0 147 29"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        < path d="M17.0016 6.49626V6.53373C17.0011 7.26641 17.1293 7.99369 17.3806 8.68355L17.3658 8.63884C17.6101 9.31107 18.0252 9.91089 18.5717 10.3814L18.5766 10.385C19.0947 10.8431 19.7837 11.1222 20.5393 11.1222H20.5983H20.5959C21.5926 11.1166 22.5472 10.7264 23.2537 10.0358C24.0255 9.34004 24.626 8.48089 25.0096 7.52344L25.0256 7.47752C25.3974 6.57267 25.5932 5.60735 25.6027 4.63163V4.58933C25.6027 3.83526 25.4686 3.1114 25.2237 2.43951L25.2385 2.48422C24.9942 1.81199 24.5791 1.21217 24.0326 0.741638L24.0277 0.738012C23.4716 0.246665 22.7452 -0.0170868 21.9974 0.00085922H22.0011C21.004 0.00504458 20.0489 0.395448 19.3432 1.08725C18.5791 1.78298 17.9837 2.63822 17.6009 3.58995L17.5849 3.63587C17.2293 4.48178 17.0189 5.46425 17.0078 6.49264V6.49626H17.0016ZM23.5786 15.6176L23.5773 15.7191C23.5759 16.6279 23.8618 17.5146 24.3956 18.2569L24.3858 18.2424C24.6292 18.5868 24.9538 18.8682 25.332 19.0626C25.7102 19.2571 26.1307 19.3587 26.5576 19.359L26.6794 19.3566H26.6732C27.6818 19.3457 28.6512 18.9716 29.3975 18.3052L29.3938 18.3088C30.1878 17.641 30.8299 16.8167 31.2787 15.8895C31.7274 14.9622 31.9728 13.9527 31.9988 12.9264V12.9167L32 12.8177C32 11.869 31.6973 10.9893 31.1817 10.2678L31.1916 10.2823C30.9383 9.91873 30.5947 9.62465 30.1933 9.42798C29.7919 9.2313 29.3461 9.13854 28.8979 9.15847H28.9041C27.8955 9.16937 26.9261 9.54348 26.1798 10.2098L26.1835 10.2062C25.3883 10.878 24.7456 11.7063 24.2969 12.6374C23.8482 13.5685 23.6034 14.5817 23.5786 15.6116V15.62V15.6176ZM15.9975 15.1077C14.2011 15.204 12.4805 15.851 11.0781 16.9578L11.0953 16.9445C9.37858 18.1419 7.89939 19.6376 6.73077 21.3577L6.69139 21.4194C5.63808 22.8092 5.0225 24.4716 4.92072 26.2012L4.91949 26.2254L4.91703 26.3305C4.91703 26.8187 5.03885 27.2804 5.25419 27.6852L5.2468 27.6695C5.45341 28.0407 5.77609 28.3368 6.16721 28.5142L6.17951 28.519C6.53758 28.687 6.95472 28.8187 7.39031 28.8924L7.41984 28.896C7.87405 28.9664 8.33324 29.0012 8.79306 29H8.88535H8.88042C10.1483 28.9175 11.3921 28.6207 12.5571 28.1226L12.4857 28.1504C13.586 27.6793 14.7589 27.3929 15.9557 27.3033L15.9939 27.3009C17.3511 27.4 18.6086 27.6997 19.7776 28.1698L19.6952 28.1408C20.9141 28.6216 22.2044 28.9048 23.5158 28.9794L23.5503 28.9806C25.9013 28.9822 27.0768 28.0642 27.0768 26.2266C27.0235 24.939 26.6465 23.6843 25.9792 22.5747L26.0002 22.6109C25.2803 21.2813 24.3758 20.0563 23.3128 18.9711L23.3177 18.9759C22.2786 17.9101 21.0904 16.995 19.7887 16.2581L19.7124 16.2182C18.6006 15.537 17.3267 15.1533 16.0172 15.1052H16.0025L15.9975 15.1077ZM11.4017 11.1234H11.4583C12.1839 11.1242 12.8841 10.8607 13.4234 10.3838L13.4209 10.3863C13.9631 9.92269 14.3763 9.33136 14.6219 8.66784L14.6317 8.63884C14.8758 7.96298 14.9995 7.25084 14.9972 6.53373V6.49385V6.49626C14.9861 5.46304 14.7757 4.48178 14.4004 3.5827L14.4201 3.63587C14.0388 2.66807 13.4388 1.79788 12.6654 1.09088L12.6605 1.08725C11.9546 0.396627 11.0002 0.0067715 10.0039 0.00206767H9.94602C9.19051 0.00206767 8.50143 0.282428 7.98094 0.741638L7.9834 0.739221C7.44445 1.20206 7.02855 1.78936 6.78245 2.45763L6.7726 2.48664C6.53758 3.11745 6.40223 3.84614 6.40223 4.60504V4.62921V4.628C6.41289 5.62427 6.61537 6.60957 6.99901 7.5319L6.97933 7.47873C7.36091 8.45181 7.96552 9.32554 8.7463 10.0322L8.75122 10.037C9.45808 10.7259 10.412 11.1147 11.4078 11.1198H11.4091L11.4017 11.1234ZM3.09592 9.16089L2.98271 9.15847C2.08323 9.15847 1.28957 9.60077 0.814598 10.2763L0.808445 10.2847C0.279819 11.0285 -0.00247574 11.9142 1.71661e-05 12.8213L0.00124931 12.9252V12.9204C0.0254803 13.9461 0.269035 14.9553 0.716108 15.8825C1.16318 16.8098 1.80378 17.6344 2.59634 18.3028L2.60618 18.3113C3.35134 18.9751 4.31832 19.3478 5.32432 19.359H5.32679C5.77114 19.3786 6.21333 19.2875 6.6122 19.0942C7.01107 18.9008 7.35367 18.6116 7.6081 18.2532L7.61426 18.2448C8.16394 17.4762 8.44698 16.5541 8.42145 15.6152V15.62C8.39789 14.5907 8.15476 13.5777 7.70776 12.6465C7.26076 11.7152 6.61983 10.8863 5.82636 10.2134L5.81652 10.205C5.0722 9.54322 4.10725 9.17146 3.1033 9.15968H3.10084L3.09592 9.16089Z" fill="#003459" />
+        <path d="M143.512 9.237H146.807V9.76117C146.807 13.1308 145.459 15.8266 142.763 17.8484C144.061 18.7969 145.06 19.9825 145.759 21.4053C146.458 22.803 146.807 24.2882 146.807 25.8607V27.2086H143.512V25.8607C143.512 24.4629 143.175 23.2024 142.501 22.0792C141.827 20.956 140.829 20.0948 139.506 19.4958C138.208 20.1198 137.21 21.0184 136.511 22.1915C135.837 23.3647 135.5 24.6626 135.5 26.0853V27.2086H132.205V26.0853C132.205 22.5909 133.553 19.8452 136.249 17.8484C133.553 15.8266 132.205 13.056 132.205 9.53652V9.237H135.5V9.53652C135.5 10.9593 135.837 12.2572 136.511 13.4304C137.21 14.6035 138.208 15.5146 139.506 16.1635C142.177 14.9155 143.512 12.7814 143.512 9.76117V9.237Z" fill="#003459" />
+        <path d="M123.037 8.86258C127.28 9.0373 129.402 10.797 129.402 14.1417C129.402 18.3101 126.669 20.3943 121.202 20.3943H119.667V17.5114H121.464C123.137 17.5114 124.297 17.2618 124.946 16.7626C125.595 16.2384 125.92 15.3773 125.92 14.1792C125.92 13.4054 125.633 12.8313 125.059 12.4569C124.485 12.0575 123.748 11.8578 122.85 11.8578C121.078 11.8578 119.68 12.4819 118.656 13.7299C117.658 14.9779 117.159 16.4755 117.159 18.2228C117.159 20.0698 117.695 21.5675 118.769 22.7157C119.867 23.8638 121.29 24.4379 123.037 24.4379C124.609 24.4379 125.895 24.0511 126.893 23.2773L129.14 25.4863C127.418 26.8841 125.383 27.583 123.037 27.583C120.191 27.583 117.92 26.7468 116.223 25.0744C114.525 23.4021 113.677 21.243 113.677 18.5972C113.677 15.6518 114.513 13.2681 116.185 11.446C117.858 9.62387 120.142 8.76274 123.037 8.86258Z" fill="#003459" />
+        <path d="M106.377 1H109.747V27.2085H100.948C98.2277 27.2085 96.0187 26.3474 94.3214 24.6251C92.624 22.8779 91.7754 20.6814 91.7754 18.0356C91.7754 15.4397 92.649 13.2681 94.3962 11.5209C96.1684 9.74866 98.2651 8.86256 100.686 8.86256C102.234 8.86256 103.682 9.23697 105.029 9.98579V13.3555C103.781 12.4569 102.334 12.0076 100.686 12.0076C99.1887 12.0076 97.9157 12.5692 96.8673 13.6924C95.844 14.7907 95.3323 16.2384 95.3323 18.0356C95.3323 19.8577 95.819 21.3179 96.7925 22.4161C97.7909 23.5144 99.1762 24.0635 100.948 24.0635H106.377V1Z" fill="#003459" />
+        <path d="M77.0098 12.382L83.7117 5.68011V9.23699H88.7662V12.382H83.7117V20.0948C83.7117 20.9684 83.8489 21.6923 84.1235 22.2664C84.423 22.8405 84.8474 23.2523 85.3965 23.5019C85.9456 23.7266 86.4573 23.8763 86.9316 23.9512C87.4308 24.0261 88.0423 24.0635 88.7662 24.0635V27.2086C85.8957 27.2086 83.7741 26.6594 82.4012 25.5612C81.0284 24.4629 80.342 22.6408 80.342 20.0948V12.382H77.0098Z" fill="#003459" />
+        <path d="M68.7772 8.86258C73.0205 9.0373 75.1421 10.797 75.1421 14.1417C75.1421 18.3101 72.4089 20.3943 66.9426 20.3943H65.4075V17.5114H67.2047C68.877 17.5114 70.0377 17.2618 70.6867 16.7626C71.3356 16.2384 71.6601 15.3773 71.6601 14.1792C71.6601 13.4054 71.3731 12.8313 70.799 12.4569C70.2249 12.0575 69.4886 11.8578 68.59 11.8578C66.8178 11.8578 65.42 12.4819 64.3966 13.7299C63.3982 14.9779 62.899 16.4755 62.899 18.2228C62.899 20.0698 63.4356 21.5675 64.5089 22.7157C65.6072 23.8638 67.0299 24.4379 68.7772 24.4379C70.3497 24.4379 71.6352 24.0511 72.6336 23.2773L74.88 25.4863C73.1578 26.8841 71.1235 27.583 68.7772 27.583C65.9317 27.583 63.6603 26.7468 61.963 25.0744C60.2656 23.4021 59.417 21.243 59.417 18.5972C59.417 15.6518 60.2532 13.2681 61.9255 11.446C63.5979 9.62387 65.8818 8.76274 68.7772 8.86258Z" fill="#003459" />
+        <path d="M42.5834 27.583C42.2839 27.583 41.9719 27.533 41.6474 27.4332C41.3479 27.3334 41.0983 27.0962 40.8986 26.7218C40.6989 26.3474 40.5991 25.7733 40.5991 24.9995C40.5991 24.3755 40.649 23.5893 40.7488 22.6408C40.8736 21.6673 41.0234 20.6315 41.1981 19.5332C41.3728 18.41 41.5101 17.2243 41.61 15.9763C41.7348 14.7283 41.7972 13.4678 41.7972 12.1948C41.7972 11.6956 41.7847 11.1589 41.7597 10.5849C41.7348 10.0108 41.6848 9.44915 41.61 8.90002C41.4352 8.99986 41.2605 9.08722 41.0858 9.1621C40.936 9.21202 40.7863 9.23698 40.6365 9.23698C40.2122 9.23698 40 8.82513 40 8.00144C40 7.25262 40.1622 6.62861 40.4867 6.1294C40.8362 5.60523 41.4602 5.10602 42.3588 4.63177C43.2324 4.15752 44.2558 3.77063 45.4289 3.47111C46.627 3.14662 47.8376 2.98438 49.0607 2.98438C51.4818 2.98438 53.4163 3.62087 54.864 4.89385C56.3367 6.16684 57.073 7.86416 57.073 9.9858C57.073 11.2837 56.8109 12.4819 56.2867 13.5801C55.7626 14.6784 55.0637 15.6394 54.1901 16.4631C53.3414 17.2618 52.4054 17.8858 51.382 18.3351C50.3836 18.7594 49.3976 18.9716 48.4242 18.9716C47.5006 18.9716 46.8766 18.7719 46.5521 18.3725C46.2276 17.9482 46.0654 17.3492 46.0654 16.5754C46.0654 16.201 46.1028 15.864 46.1777 15.5645C46.2776 15.24 46.4773 15.0777 46.7768 15.0777C46.8517 15.0777 46.964 15.0902 47.1137 15.1152C47.2635 15.1401 47.4133 15.1776 47.563 15.2275C47.7128 15.2525 47.925 15.2899 48.1995 15.3398C48.4741 15.3898 48.7861 15.4147 49.1355 15.4147C50.5084 15.4147 51.6191 15.0278 52.4678 14.254C53.3414 13.4803 53.7782 12.4819 53.7782 11.2588C53.7782 9.9858 53.304 8.98738 52.3555 8.26352C51.407 7.53967 50.1839 7.17774 48.6863 7.17774C48.1371 7.17774 47.5755 7.22766 47.0014 7.3275C46.4273 7.40239 45.8532 7.51471 45.2791 7.66447C45.2043 9.31187 45.0295 11.1839 44.755 13.2806C44.6052 14.5286 44.4679 15.7642 44.3431 16.9872C44.2433 18.1853 44.1934 19.2836 44.1934 20.282C44.1934 21.1556 44.2682 21.9294 44.418 22.6033C44.5927 23.2523 44.9297 23.8139 45.4289 24.2882C45.7784 24.6376 45.9531 25.012 45.9531 25.4114C45.9531 25.9605 45.6411 26.4597 45.0171 26.909C44.3931 27.3583 43.5818 27.583 42.5834 27.583Z" fill="#003459" />
+      </svg >
+    </>
+  )
+}
+
+export { Logo }
@@ -0,0 +1,16 @@
+
+function LogoMobile() {
+  return (
+    <svg
+      width="26"
+      height="24"
+      viewBox="0 0 24 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M12.3115 4.70419V4.73132C12.3111 5.26188 12.4039 5.78853 12.5859 6.28809L12.5752 6.25571C12.7521 6.7425 13.0527 7.17685 13.4484 7.51758L13.452 7.52021C13.8271 7.85186 14.3261 8.05401 14.8732 8.05401H14.916H14.9142C15.636 8.04994 16.3273 7.76739 16.8388 7.26731C17.3977 6.76347 17.8326 6.14133 18.1104 5.44801L18.1219 5.41476C18.3912 4.75952 18.533 4.0605 18.5398 3.35394V3.32331C18.5398 2.77726 18.4427 2.25308 18.2654 1.76654L18.2761 1.79892C18.0992 1.31213 17.7986 0.877779 17.4029 0.537048L17.3993 0.534423C16.9966 0.17862 16.4706 -0.0123732 15.9291 0.000622194H15.9318C15.2098 0.00365297 14.5181 0.286359 14.0071 0.787321C13.4538 1.29112 13.0226 1.91043 12.7454 2.59962L12.7338 2.63287C12.4763 3.24543 12.3239 3.95687 12.3159 4.70157V4.70419H12.3115ZM17.0741 11.3093L17.0732 11.3828C17.0721 12.0409 17.2792 12.683 17.6657 13.2205L17.6586 13.21C17.8349 13.4594 18.07 13.6632 18.3438 13.804C18.6177 13.9448 18.9222 14.0184 19.2313 14.0186L19.3195 14.0168H19.315C20.0454 14.0089 20.7474 13.738 21.2878 13.2555L21.2851 13.2581C21.8601 12.7745 22.3251 12.1776 22.65 11.5062C22.975 10.8347 23.1526 10.1037 23.1715 9.36051V9.35351L23.1724 9.28175C23.1724 8.59481 22.9532 7.95775 22.5798 7.43532L22.5869 7.44583C22.4036 7.18253 22.1547 6.96958 21.8641 6.82716C21.5734 6.68474 21.2505 6.61756 20.9261 6.632H20.9305C20.2002 6.63989 19.4982 6.9108 18.9577 7.39332L18.9604 7.3907C18.3846 7.87718 17.9192 8.47694 17.5942 9.1512C17.2693 9.82546 17.0921 10.5592 17.0741 11.3049V11.3111V11.3093ZM11.5844 10.94C10.2835 11.0098 9.03758 11.4783 8.022 12.2798L8.03448 12.2702C6.79134 13.1372 5.7202 14.2203 4.87395 15.466L4.84544 15.5106C4.0827 16.517 3.63693 17.7208 3.56323 18.9733L3.56234 18.9908L3.56056 19.0669C3.56056 19.4205 3.64877 19.7547 3.8047 20.0479L3.79936 20.0365C3.94897 20.3053 4.18264 20.5198 4.46586 20.6482L4.47477 20.6517C4.73406 20.7733 5.03612 20.8687 5.35155 20.9221L5.37294 20.9247C5.70185 20.9757 6.03436 21.0008 6.36734 21H6.43417H6.4306C7.3487 20.9403 8.24941 20.7254 9.09303 20.3647L9.04135 20.3848C9.83805 20.0436 10.6874 19.8362 11.5541 19.7714L11.5817 19.7696C12.5645 19.8414 13.4752 20.0584 14.3217 20.3988L14.262 20.3778C15.1446 20.726 16.079 20.9311 17.0286 20.9851L17.0536 20.986C18.7561 20.9871 19.6073 20.3224 19.6073 18.9917C19.5687 18.0592 19.2957 17.1507 18.8125 16.3472L18.8276 16.3734C18.3064 15.4106 17.6514 14.5235 16.8816 13.7377L16.8852 13.7412C16.1328 12.9694 15.2723 12.3067 14.3297 11.7731L14.2744 11.7442C13.4694 11.2509 12.5469 10.9731 11.5986 10.9383H11.5879L11.5844 10.94ZM8.25634 8.05488H8.29733C8.8228 8.05544 9.32981 7.86462 9.72032 7.51933L9.71854 7.52108C10.1111 7.1854 10.4104 6.75719 10.5882 6.27671L10.5953 6.25571C10.7721 5.7663 10.8616 5.25061 10.86 4.73132V4.70244V4.70419C10.8519 3.956 10.6996 3.24543 10.4278 2.59437L10.4421 2.63287C10.166 1.93205 9.73153 1.30191 9.17144 0.789947L9.16788 0.787321C8.65674 0.287213 7.96562 0.0049035 7.24412 0.00149728H7.20224C6.65514 0.00149728 6.15616 0.204516 5.77925 0.537048L5.78103 0.535298C5.39076 0.870454 5.08959 1.29574 4.91138 1.77967L4.90425 1.80067C4.73406 2.25746 4.63605 2.78514 4.63605 3.33469V3.35219V3.35131C4.64376 4.07275 4.79039 4.78624 5.0682 5.45414L5.05395 5.41563C5.33026 6.12028 5.76808 6.75298 6.33348 7.26468L6.33704 7.26818C6.84891 7.76701 7.5397 8.04856 8.2608 8.05226H8.26169L8.25634 8.05488ZM2.24182 6.63375L2.15984 6.632C1.50849 6.632 0.933773 6.95228 0.589832 7.44145L0.585375 7.44758C0.202578 7.98616 -0.00184441 8.62756 -3.8147e-05 9.28437L0.000854492 9.35963V9.35613C0.0184021 10.0989 0.194767 10.8297 0.518511 11.5012C0.842253 12.1726 1.30614 12.7697 1.88006 13.2537L1.88719 13.2599C2.42678 13.7406 3.12701 14.0105 3.85549 14.0186H3.85728C4.17905 14.0328 4.49926 13.9668 4.7881 13.8268C5.07693 13.6868 5.32502 13.4773 5.50927 13.2179L5.51372 13.2117C5.91177 12.6552 6.11673 11.9875 6.09824 11.3076V11.3111C6.08118 10.5657 5.90512 9.83215 5.58143 9.15778C5.25774 8.4834 4.79362 7.8832 4.21904 7.39595L4.21191 7.38982C3.67292 6.91061 2.97417 6.6414 2.24717 6.63287H2.24538L2.24182 6.63375Z" fill="#003459" />
+    </svg>
+  )
+}
+
+export { LogoMobile }
@@ -0,0 +1,19 @@
+import Link from "next/link"
+
+function Menu() {
+  return (
+    <ul className="hidden lg:space-x-10 lg:space-y-0 lg:ml-3 lg:flex">
+      <li className='text-petdex-secondaryGreen'>
+        <Link className='hover:underline hover:font-semibold' href="#">Home</Link>
+      </li>
+      <li className='text-petdex-secondaryGreen'>
+        <Link className='hover:underline hover:font-semibold' href="#">Petdex</Link>
+      </li>
+      <li className='text-petdex-secondaryGreen'>
+        <Link className='hover:underline hover:font-semibold' href="#">Contato</Link>
+      </li>
+    </ul>
+  )
+}
+
+export { Menu }
@@ -0,0 +1,16 @@
+'use client'
+
+function MenuButtonClose({ handleButton }) {
+
+  return (
+    <>
+      <svg onClick={handleButton} width="30" height="20" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17.9993 1L1.0287 17.9706" stroke="black" stroke-width="2" stroke-linecap="round" />
+        <path d="M17.9705 17.9706L0.999897 1.00002" stroke="black" stroke-width="2" stroke-linecap="round" />
+      </svg>
+
+    </>
+  )
+}
+
+export { MenuButtonClose }
@@ -0,0 +1,13 @@
+
+function MenuButtonMobile({ handleButton }) {
+  return (
+    <svg onClick={handleButton}
+      width="30" height="20" viewBox="0 0 30 20" fill="none" xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M30 20H16.6667C15.7462 20 15 19.2538 15 18.3333C15 17.4129 15.7462 16.6667 16.6667 16.6667H30V20ZM30 11.6667H1.66667C0.746193 11.6667 0 10.9205 0 10C0 9.07952 0.746192 8.33333 1.66667 8.33333H30V11.6667ZM30 3.33333H1.66667C0.746193 3.33333 0 2.58714 0 1.66667C0 0.746192 0.746192 0 1.66667 0H30V3.33333Z" fill="black" />
+    </svg>
+  )
+}
+
+
+export { MenuButtonMobile }
@@ -0,0 +1,19 @@
+import Link from "next/link"
+
+function MenuMobile({ isOpen }) {
+  return (
+    <ul className={`${isOpen ? '' : 'hidden'} space-y-6 ml-10 lg:hidden`}>
+      <li className='text-petdex-secondaryGreen'>
+        <Link className='hover:underline hover:font-semibold' href="#">Home</Link>
+      </li>
+      <li className='text-petdex-secondaryGreen'>
+        <Link className='hover:underline hover:font-semibold' href="#">Petdex</Link>
+      </li>
+      <li className='text-petdex-secondaryGreen'>
+        <Link className='hover:underline hover:font-semibold' href="#">Contato</Link>
+      </li>
+    </ul >
+  )
+}
+
+export { MenuMobile }