add types navbar

components/petdex/Navbar/Navbar.tsx

@@ -5,6 +5,9 @@ import { Logo } from './assets/Logo'
 import { MenuButton } from './assets/Menu-button'
 import { SearchIcon } from './assets/SearchIcon'
 import { Menu } from './assets/Menu'
+import { LogoMobile } from './assets/Logo-mobile'
+import { MenuButtonMobile } from './assets/Menu-button-mobile'
+import { NavbarTypes } from './Navbar.types'
 
 function Navbar() {
   const [isOpen, setIsOpen] = useState(false)
@@ -20,7 +23,10 @@ function Navbar() {
         <div className="flex">
           <nav className='flex items-center mobile:w-[90%] mx-auto '>
             <div className='w-28 items-center mr-10'>
-              <Logo isSearch={isSearch} />
+              {isSearch
+                ? <Logo />
+                : <LogoMobile />
+              }
             </div>
             <div
               className={`${!isOpen ? '' : 'left-[-400px]'} absolute flex flex-col left-0 top-[8rem] lg:relative lg:left-0 lg:top-0 `}
@@ -31,11 +37,10 @@ function Navbar() {
         </div>
         <div className='flex items-center  space-x-3'>
           <div
-            onClick={handleSearchButton}
             className={`flex border-2 space-x-3 border-gray-200 rounded-3xl px-4 py-3 cursor-pointer`}
           >
-            <SearchIcon />
-
+            <SearchIcon
+              handleSearchButton={handleSearchButton} />
             <input
               className={` hidden lg:block`}
               type="search"
@@ -51,7 +56,10 @@ function Navbar() {
           </button>
           {isSearch &&
             <div className='cursor-pointer lg:hidden'>
-              <MenuButton handleButton={handleButton} isOpen={isOpen} />
+              {!isOpen
+                ? <MenuButton handleButton={handleButton} />
+                : <MenuButtonMobile handleButton={handleButton} />
+              }
             </div>
           }
         </div>

components/petdex/Navbar/Navbar.types.ts

@@ -0,0 +1,5 @@
+
+export type NavbarTypes = & {
+  handleSearchButton?: () => boolean | void
+  handleButton?: () => boolean
+}

components/petdex/Navbar/assets/Logo-mobile.tsx

@@ -0,0 +1,10 @@
+
+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 }

components/petdex/Navbar/assets/Menu-button-mobile.tsx

@@ -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 }

components/petdex/Navbar/assets/Menu-button.tsx

@@ -1,21 +1,14 @@
 'use client'
 
-function MenuButton({ handleButton, isOpen }) {
+function MenuButton({ handleButton }) {
 
   return (
     <>
-      {!isOpen ?
-        <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>
-        :
-        <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>
-      }
+      <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>
+
     </>
   )
 }

components/petdex/Navbar/assets/SearchIcon.tsx

@@ -1,6 +1,10 @@
-function SearchIcon() {
+import { NavbarTypes } from "../Navbar.types"
+
+
+
+function SearchIcon({ handleSearchButton }: NavbarTypes) {
   return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg onClick={handleSearchButton} width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M18.0918 16.9083L15.0002 13.8416C16.2002 12.3453 16.7814 10.4461 16.6242 8.5344C16.4669 6.62273 15.5832 4.84397 14.1548 3.56385C12.7263 2.28374 10.8617 1.59957 8.94427 1.65204C7.02686 1.70451 5.20243 2.48962 3.84612 3.84593C2.4898 5.20225 1.70469 7.02668 1.65222 8.94408C1.59976 10.8615 2.28392 12.7261 3.56403 14.1546C4.84415 15.583 6.62292 16.4667 8.53458 16.624C10.4462 16.7812 12.3455 16.2001 13.8418 15L16.9085 18.0666C16.986 18.1448 17.0781 18.2068 17.1797 18.2491C17.2812 18.2914 17.3902 18.3131 17.5002 18.3131C17.6102 18.3131 17.7191 18.2914 17.8206 18.2491C17.9222 18.2068 18.0144 18.1448 18.0918 18.0666C18.242 17.9113 18.326 17.7036 18.326 17.4875C18.326 17.2714 18.242 17.0637 18.0918 16.9083ZM9.16683 15C8.01311 15 6.88529 14.6579 5.926 14.0169C4.96672 13.3759 4.21904 12.4649 3.77753 11.399C3.33602 10.3331 3.2205 9.16018 3.44558 8.02862C3.67066 6.89707 4.22624 5.85767 5.04204 5.04186C5.85785 4.22605 6.89725 3.67048 8.0288 3.4454C9.16036 3.22032 10.3332 3.33584 11.3992 3.77735C12.4651 4.21886 13.3761 4.96654 14.0171 5.92582C14.658 6.88511 15.0002 8.01292 15.0002 9.16665C15.0002 10.7137 14.3856 12.1975 13.2916 13.2914C12.1977 14.3854 10.7139 15 9.16683 15Z" fill="#667479" />
     </svg>
   )