rename button close

devhatt · Aug 31, 2024 · 063d4f7 · 063d4f7
1 parent c012599
commit 063d4f7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/components/petdex/Navbar/Navbar.tsx b/components/petdex/Navbar/Navbar.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react'
 import { Logo } from './assets/Logo'
-import { MenuButton } from './assets/MenuButton'
+import { MenuButtonClose } from './assets/MenuButtonClose'
 import { SearchIcon } from './assets/SearchIcon'
 import { Menu } from './assets/Menu'
 import { LogoMobile } from './assets/LogoMobile'
@@ -12,7 +12,7 @@ import { MenuMobile } from './assets/MenuMobile'
 
 function Navbar() {
   const [isOpen, setIsOpen] = useState(false)
-  const [isSearch, setIsSearch] = useState(true)
+  const [isSearch, setIsSearch] = useState(false)
 
   const handleButton = () => setIsOpen(o => !o)
 
@@ -24,42 +24,46 @@ function Navbar() {
         <div className="flex">
           <nav className='flex items-center mobile:w-[90%] mx-auto '>
             <div className='w-28 items-center mr-10'>
-              {isSearch
+              {!isSearch
                 ? <Logo />
                 : <LogoMobile />
               }
             </div>
             <div
-              className={` absolute flex flex-col left-0 top-[8rem] lg:relative lg:left-0 lg:top-0 `}
+              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} />
+              handleSearchButton={handleSearchButton}
+            />
             <input
-              className={`${isSearch ? 'hidden' : 'block'}`}
-              type="search"
+              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 &&
+
+          {!isSearch &&
             <div className='cursor-pointer lg:hidden'>
               {isOpen
-                ? <MenuButton handleButton={handleButton} />
+                ? <MenuButtonClose handleButton={handleButton} />
                 : <MenuButtonMobile handleButton={handleButton} />
               }
             </div>

diff --git a/components/petdex/Navbar/assets/LogoMobile.tsx b/components/petdex/Navbar/assets/LogoMobile.tsx
@@ -1,7 +1,12 @@
 
 function LogoMobile() {
   return (
-    <svg width="26" height="24" viewBox="0 0 24 21" fill="none" xmlns="http://www.w3.org/2000/svg"
+    <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>

diff --git a/...nents/petdex/Navbar/assets/MenuButton.tsx → .../petdex/Navbar/assets/MenuButtonClose.tsx b/...nents/petdex/Navbar/assets/MenuButton.tsx → .../petdex/Navbar/assets/MenuButtonClose.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-function MenuButton({ handleButton }) {
+function MenuButtonClose({ handleButton }) {
 
   return (
     <>
@@ -13,4 +13,4 @@ function MenuButton({ handleButton }) {
   )
 }
 
-export { MenuButton }
+export { MenuButtonClose }