From 6d32c9ad0eb6ad3c398ed59f8a4ac5b0f9c7ed49 Mon Sep 17 00:00:00 2001
From: Clay Martinez <clay.ms@hotmail.com>
Date: Sat, 9 Sep 2023 15:31:05 -0500
Subject: [PATCH 1/4] optimizacion componente MenuMobile

---
 src/components/navBar/MenuMobile.tsx | 46 ++++++++++++----------------
 1 file changed, 19 insertions(+), 27 deletions(-)

diff --git a/src/components/navBar/MenuMobile.tsx b/src/components/navBar/MenuMobile.tsx
index 4108c4b..f9f0b94 100644
--- a/src/components/navBar/MenuMobile.tsx
+++ b/src/components/navBar/MenuMobile.tsx
@@ -4,35 +4,27 @@ import React, { FC } from 'react';
 interface MenuMobileProps {}
 
 const MenuMobile: FC<MenuMobileProps> = ({}) => {
+  const navItems = [
+    { label: 'Productos', url: '/products' },
+    { label: 'Como comprar', url: '/how-to-buy' },
+    { label: 'Blog', url: '/blog' },
+    { label: 'Nosotros', url: '/about-us' },
+    { label: 'Contacto', url: '/contact' },
+  ];
+
   return (
     <div className="flex flex-col items-center">
-      <Link
-        href="/products"
-        className="block p-4 hover:text-2xl hover:font-bold"
-      >
-        Productos
-      </Link>
-      <Link
-        href="/how-to-buy"
-        className="block p-4 hover:text-2xl hover:font-bold"
-      >
-        Como comprar
-      </Link>
-      <Link href="/blog" className="block p-4 hover:text-2xl hover:font-bold">
-        Blog
-      </Link>
-      <Link
-        href="/about-us"
-        className="block p-4 hover:text-2xl hover:font-bold"
-      >
-        Nosotros
-      </Link>
-      <Link
-        href="/contact"
-        className="block p-4 hover:text-2xl hover:font-bold"
-      >
-        Contacto
-      </Link>
+      {navItems.map((item) => (
+        <>
+          <Link
+            key={item.url}
+            href={item.url}
+            className="block p-4 hover:text-2xl hover:font-bold"
+          >
+            {item.label}
+          </Link>
+        </>
+      ))}
     </div>
   );
 };

From 27a6c5e3505c2a318de8e7dd6b6e31c45a2cb3a0 Mon Sep 17 00:00:00 2001
From: Clay Martinez <clay.ms@hotmail.com>
Date: Tue, 12 Sep 2023 10:34:34 -0500
Subject: [PATCH 2/4] productCard limitando la cantidad de linea en el titulo.
 InputField elimino ancho maximo para manipularlo en navBar. .

---
 src/components/cards/ProductCard.tsx | 2 +-
 src/components/inputs/InputField.tsx | 4 ++--
 src/components/navBar/navBar.tsx     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/cards/ProductCard.tsx b/src/components/cards/ProductCard.tsx
index a911662..75dc9e9 100644
--- a/src/components/cards/ProductCard.tsx
+++ b/src/components/cards/ProductCard.tsx
@@ -23,7 +23,7 @@ export function ProductCard({
         className="w-full h-[9.625rem] "
       />
       <div>
-        <h3 className="font-semibold mb-2">{title}</h3>
+        <h3 className="font-semibold mb-2 line-clamp-3">{title}</h3>
         <p className="line-through text-secondary-dm text-sm">{`${toCurrency(
           price
         )}`}</p>
diff --git a/src/components/inputs/InputField.tsx b/src/components/inputs/InputField.tsx
index 0093f6f..1bf4a84 100644
--- a/src/components/inputs/InputField.tsx
+++ b/src/components/inputs/InputField.tsx
@@ -24,7 +24,7 @@ export function InputField({
   const currentColor = color === 'red' ? 'primary-lm' : '';
 
   return (
-    <div className="max-w-md">
+    <div className="">
       <div className="flex">
         <label
           className={`flex-grow font-semibold text-${currentColor}`}
@@ -39,7 +39,7 @@ export function InputField({
       <div className="rounded relative">
         {leftIcon && (
           <div
-            className={`absolute left-0 inset-y-0 py-2 pl-2 px-1 aspect-square  text-${currentColor}`}
+            className={`absolute left-0 inset-y-0 py-2 pl-2 px-1 aspect-square text-${currentColor}`}
           >
             {leftIcon}
           </div>
diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx
index 4f7eb1d..aafd57b 100644
--- a/src/components/navBar/navBar.tsx
+++ b/src/components/navBar/navBar.tsx
@@ -23,7 +23,7 @@ const NavBar: FC<NavBarProps> = ({}) => {
   return (
     <div className="bg-white">
       <div className="z-50 fixed top-0 bg-opacity-70 bg-white w-full backdrop-blur-sm flex-col">
-        <nav className="p-4 flex items-center h-[60px] justify-between max-w-[1480px] mx-auto">
+        <nav className="p-4 flex items-center h-[60px] justify-between mx-auto">
           {/* Contenedor lado izquierdo menu hamburguesa-imagenes*/}
           <div className="flex items-center gap-2">
             <div className="">

From 5fda2a8f029ef159bf23173f154428db18d6d6dc Mon Sep 17 00:00:00 2001
From: Clay Martinez <clay.ms@hotmail.com>
Date: Tue, 12 Sep 2023 15:10:45 -0500
Subject: [PATCH 3/4] Cambio de iconos menu hamburguerClose,
 hamburguerOpen,Login. Cambio de color ThemeMode. MenuMobile correccion de
 expansion del contenedor con el hover.

---
 src/assets/icons/HamburguerClose.tsx |  27 +++--
 src/assets/icons/HamburguerOpen.tsx  |  28 +++--
 src/assets/icons/Login.tsx           |  17 +--
 src/components/ThemeMode.tsx         |   4 +-
 src/components/navBar/MenuMobile.tsx |   2 +-
 src/components/navBar/navBar.tsx     | 150 +++++++++++++--------------
 6 files changed, 113 insertions(+), 115 deletions(-)

diff --git a/src/assets/icons/HamburguerClose.tsx b/src/assets/icons/HamburguerClose.tsx
index 4c68050..4a5b54a 100644
--- a/src/assets/icons/HamburguerClose.tsx
+++ b/src/assets/icons/HamburguerClose.tsx
@@ -2,16 +2,23 @@ import React from 'react';
 
 export default function HamburguerClose() {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="100%"
-      height="100%"
-      viewBox="-5 -7 24 24"
-    >
-      <path
-        fill="currentColor"
-        d="M1 0h5a1 1 0 1 1 0 2H1a1 1 0 1 1 0-2zm7 8h5a1 1 0 0 1 0 2H8a1 1 0 1 1 0-2zM1 4h12a1 1 0 0 1 0 2H1a1 1 0 1 1 0-2z"
-      />
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+      <g
+        id="SVGRepo_tracerCarrier"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></g>
+      <g id="SVGRepo_iconCarrier">
+        {' '}
+        <path
+          d="M4 6H20M4 12H14M4 18H9"
+          stroke="#000000"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></path>{' '}
+      </g>
     </svg>
   );
 }
diff --git a/src/assets/icons/HamburguerOpen.tsx b/src/assets/icons/HamburguerOpen.tsx
index eca8faa..392238e 100644
--- a/src/assets/icons/HamburguerOpen.tsx
+++ b/src/assets/icons/HamburguerOpen.tsx
@@ -2,17 +2,23 @@ import React from 'react';
 
 export default function HamburguerClose() {
   return (
-    <svg
-      width="100%"
-      height="100%"
-      viewBox="0 0 36 30"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M2.52379 30H33.6349C34.7043 30 35.5793 28.875 35.5793 27.5C35.5793 26.125 34.7043 25 33.6349 25H2.52379C1.45435 25 0.579346 26.125 0.579346 27.5C0.579346 28.875 1.45435 30 2.52379 30ZM2.52379 17.5H33.6349C34.7043 17.5 35.5793 16.375 35.5793 15C35.5793 13.625 34.7043 12.5 33.6349 12.5H2.52379C1.45435 12.5 0.579346 13.625 0.579346 15C0.579346 16.375 1.45435 17.5 2.52379 17.5ZM0.579346 2.5C0.579346 3.875 1.45435 5 2.52379 5H33.6349C34.7043 5 35.5793 3.875 35.5793 2.5C35.5793 1.125 34.7043 0 33.6349 0H2.52379C1.45435 0 0.579346 1.125 0.579346 2.5Z"
-        fill="black"
-      />
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+      <g
+        id="SVGRepo_tracerCarrier"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></g>
+      <g id="SVGRepo_iconCarrier">
+        {' '}
+        <path
+          d="M4 6H20M4 12H20M4 18H20"
+          stroke="#000000"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        ></path>{' '}
+      </g>
     </svg>
   );
 }
diff --git a/src/assets/icons/Login.tsx b/src/assets/icons/Login.tsx
index fb5d5fe..334840d 100644
--- a/src/assets/icons/Login.tsx
+++ b/src/assets/icons/Login.tsx
@@ -2,19 +2,12 @@ import React from 'react';
 
 export default function Login() {
   return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="100%"
-      height="100%"
-      viewBox="0 0 16 16"
-      fill="none"
-    >
+    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="#000000">
       <path
-        fill="black"
-        fill-rule="evenodd"
-        d="M8 14.5a6.47 6.47 0 0 0 3.25-.87V11.5A2.25 2.25 0 0 0 9 9.25H7a2.25 2.25 0 0 0-2.25 2.25v2.13A6.47 6.47 0 0 0 8 14.5Zm4.75-3v.937a6.5 6.5 0 1 0-9.5 0V11.5a3.752 3.752 0 0 1 2.486-3.532a3 3 0 1 1 4.528 0A3.752 3.752 0 0 1 12.75 11.5ZM8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16ZM9.5 6a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0Z"
-        clip-rule="evenodd"
-      />
+        d="M 10 0 C 4.4830748 0 0 4.4830748 0 10 C 0 15.516925 4.4830748 20 10 20 C 15.516925 20 20 15.516925 20 10 C 20 4.4830748 15.516925 0 10 0 z M 10 1 C 14.976485 1 19 5.0235149 19 10 C 19 12.349397 18.095422 14.478558 16.625 16.080078 L 15.998047 15.878906 L 15.15625 15.646484 L 14.306641 15.449219 L 13.447266 15.287109 L 13.322266 15.25 L 13.212891 15.181641 L 13.125 15.087891 L 13.0625 14.974609 L 13.033203 14.847656 L 13.035156 14.720703 L 13.070312 14.595703 L 13.136719 14.484375 L 13.347656 14.193359 L 13.529297 13.884766 L 13.833984 13.275391 L 14.103516 12.652344 L 14.339844 12.013672 L 14.541016 11.361328 L 14.705078 10.703125 L 14.833984 10.035156 L 14.925781 9.359375 L 14.982422 8.6816406 L 15 8.0019531 L 14.982422 7.5664062 L 14.923828 7.1328125 L 14.830078 6.7070312 L 14.697266 6.2910156 L 14.53125 5.8886719 L 14.330078 5.5 L 14.097656 5.1328125 L 13.830078 4.7871094 L 13.537109 4.4648438 L 13.212891 4.171875 L 12.869141 3.90625 L 12.5 3.6699219 L 12.113281 3.46875 L 11.710938 3.3027344 L 11.294922 3.1699219 L 10.867188 3.0761719 L 10.435547 3.0195312 L 10 3 L 9.5644531 3.0195312 L 9.1328125 3.0761719 L 8.7050781 3.1699219 L 8.2890625 3.3027344 L 7.8867188 3.46875 L 7.5 3.6699219 L 7.1328125 3.90625 L 6.7871094 4.171875 L 6.4628906 4.4648438 L 6.1699219 4.7871094 L 5.9042969 5.1328125 L 5.6699219 5.5 L 5.46875 5.8886719 L 5.3027344 6.2910156 L 5.1699219 6.7070312 L 5.0761719 7.1328125 L 5.0195312 7.5664062 L 5 8.0019531 L 5.0175781 8.6816406 L 5.0742188 9.359375 L 5.1660156 10.035156 L 5.2949219 10.703125 L 5.4589844 11.361328 L 5.6601562 12.013672 L 5.8984375 12.652344 L 6.1660156 13.275391 L 6.4707031 13.884766 L 6.6523438 14.193359 L 6.8632812 14.484375 L 6.9296875 14.595703 L 6.9648438 14.720703 L 6.96875 14.847656 L 6.9375 14.974609 L 6.875 15.087891 L 6.7871094 15.181641 L 6.6777344 15.25 L 6.5527344 15.287109 L 5.6953125 15.449219 L 4.84375 15.646484 L 4.0019531 15.878906 L 3.375 16.080078 C 1.9045777 14.478558 1 12.349397 1 10 C 1 5.0235149 5.0235149 1 10 1 z M 10 4 L 10.392578 4.0195312 L 10.78125 4.078125 L 11.160156 4.1738281 L 11.529297 4.3046875 L 11.886719 4.4746094 L 12.222656 4.6738281 L 12.537109 4.9082031 L 12.830078 5.171875 L 13.091797 5.4628906 L 13.326172 5.7792969 L 13.527344 6.1152344 L 13.695312 6.4707031 L 13.828125 6.8398438 L 13.923828 7.2207031 L 13.982422 7.609375 L 14 8.0019531 L 13.984375 8.6289062 L 13.931641 9.2519531 L 13.845703 9.8710938 L 13.728516 10.486328 L 13.576172 11.09375 L 13.390625 11.693359 L 13.173828 12.279297 L 12.925781 12.855469 L 12.646484 13.416016 L 12.509766 13.644531 L 12.351562 13.865234 L 12.220703 14.0625 L 12.121094 14.279297 L 12.056641 14.509766 L 12.029297 14.748047 L 12.042969 14.986328 L 12.091797 15.220703 L 12.177734 15.443359 L 12.298828 15.652344 L 12.451172 15.835938 L 12.628906 15.996094 L 12.830078 16.123047 L 13.052734 16.216797 L 13.283203 16.273438 L 14.099609 16.427734 L 14.912109 16.615234 L 15.712891 16.835938 L 15.8125 16.867188 C 14.244524 18.195439 12.219491 19 10 19 C 7.7805094 19 5.7554759 18.195439 4.1875 16.867188 L 4.2871094 16.835938 L 5.0878906 16.615234 L 5.9003906 16.427734 L 6.7167969 16.273438 L 6.9472656 16.216797 L 7.1699219 16.123047 L 7.3710938 15.996094 L 7.5507812 15.835938 L 7.7011719 15.652344 L 7.8222656 15.443359 L 7.9101562 15.220703 L 7.9570312 14.986328 L 7.9707031 14.748047 L 7.9433594 14.509766 L 7.8789062 14.279297 L 7.7792969 14.0625 L 7.6484375 13.865234 L 7.4902344 13.644531 L 7.3535156 13.416016 L 7.0742188 12.855469 L 6.8261719 12.279297 L 6.609375 11.693359 L 6.4238281 11.09375 L 6.2734375 10.486328 L 6.1542969 9.8710938 L 6.0683594 9.2519531 L 6.015625 8.6289062 L 6 8.0019531 L 6.0195312 7.609375 L 6.078125 7.2207031 L 6.171875 6.8398438 L 6.3046875 6.4707031 L 6.4726562 6.1152344 L 6.6738281 5.7792969 L 6.9082031 5.4628906 L 7.1699219 5.171875 L 7.4628906 4.9082031 L 7.7773438 4.6738281 L 8.1152344 4.4746094 L 8.4707031 4.3046875 L 8.8398438 4.1738281 L 9.21875 4.078125 L 9.6074219 4.0195312 L 10 4 z "
+        fill="currentColor"
+        strokeWidth="1.5"
+      ></path>
     </svg>
   );
 }
diff --git a/src/components/ThemeMode.tsx b/src/components/ThemeMode.tsx
index 466a7d1..4e2729e 100644
--- a/src/components/ThemeMode.tsx
+++ b/src/components/ThemeMode.tsx
@@ -37,7 +37,7 @@ type IconButtonProps = {
 function IconButton({ icon, ...props }: IconButtonProps) {
   return (
     <button
-      className="group p-1 rounded-full text-secondary-dm hover:text-text-lm dark:hover:text-text-dm"
+      className="group p-1 rounded-full text-background-dm hover:text-text-lm dark:hover:text-text-dm"
       {...props}
     >
       {icon}
@@ -79,7 +79,7 @@ function MoonIcon({ size, ...props }: IconProps) {
       height={size}
       viewBox="0 0 24 24"
     >
-      <g fill="none" stroke="currentColor" strokeWidth="2">
+      <g fill="none" stroke="currentColor" strokeWidth="1.5">
         <path d="M20.958 15.325c.204-.486-.379-.9-.868-.684a7.684 7.684 0 0 1-3.101.648c-4.185 0-7.577-3.324-7.577-7.425a7.28 7.28 0 0 1 1.134-3.91c.284-.448-.057-1.068-.577-.936C5.96 4.041 3 7.613 3 11.862C3 16.909 7.175 21 12.326 21c3.9 0 7.24-2.345 8.632-5.675Z" />
         <path d="M15.611 3.103c-.53-.354-1.162.278-.809.808l.63.945a2.332 2.332 0 0 1 0 2.588l-.63.945c-.353.53.28 1.162.81.808l.944-.63a2.332 2.332 0 0 1 2.588 0l.945.63c.53.354 1.162-.278.808-.808l-.63-.945a2.332 2.332 0 0 1 0-2.588l.63-.945c.354-.53-.278-1.162-.809-.808l-.944.63a2.332 2.332 0 0 1-2.588 0l-.945-.63Z" />
       </g>
diff --git a/src/components/navBar/MenuMobile.tsx b/src/components/navBar/MenuMobile.tsx
index f9f0b94..a6e5d74 100644
--- a/src/components/navBar/MenuMobile.tsx
+++ b/src/components/navBar/MenuMobile.tsx
@@ -19,7 +19,7 @@ const MenuMobile: FC<MenuMobileProps> = ({}) => {
           <Link
             key={item.url}
             href={item.url}
-            className="block p-4 hover:text-2xl hover:font-bold"
+            className="block p-4 transform  hover:scale-125"
           >
             {item.label}
           </Link>
diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx
index aafd57b..8a4e644 100644
--- a/src/components/navBar/navBar.tsx
+++ b/src/components/navBar/navBar.tsx
@@ -1,15 +1,13 @@
 'use client';
 import Image from 'next/image';
 import React, { FC, useState } from 'react';
-import { Images } from '~/assets/img';
-import ButtonComponent, { MainButton } from '../button/button';
-import { DropDownMenu } from '../dropdownMenu/dropdownMenu';
-import { ThemeModeButton } from '../ThemeMode';
-import { InputField } from '../inputs/InputField';
 import Link from 'next/link';
-import IconText from '../IconText';
+import { Images } from '~/assets/img';
 import Icon from '~/assets/icons/icon';
 import MenuMobile from './MenuMobile';
+import { InputField } from '../inputs/InputField';
+import { ThemeModeButton } from '../ThemeMode';
+import { MainButton } from '../button/button';
 
 interface NavBarProps {}
 
@@ -21,90 +19,84 @@ const NavBar: FC<NavBarProps> = ({}) => {
   };
 
   return (
-    <div className="bg-white">
-      <div className="z-50 fixed top-0 bg-opacity-70 bg-white w-full backdrop-blur-sm flex-col">
-        <nav className="p-4 flex items-center h-[60px] justify-between mx-auto">
-          {/* Contenedor lado izquierdo menu hamburguesa-imagenes*/}
+    <div className="z-50 fixed top-0 bg-opacity-70 bg-white w-full backdrop-blur-sm flex-col shadow-sm">
+      <nav className="p-4 flex items-center h-[60px] justify-between mx-auto">
+        {/* Contenedor lado izquierdo menu hamburguesa-imagenes*/}
+        <div className="flex items-center gap-2">
+          {/* Icono hamburguesa */}
           <div className="flex items-center gap-2">
-            <div className="">
-              {/* Iconos menu mobile */}
-              <MainButton onClick={toggleNavbar}>
-                {isOpen ? (
-                  <div className="h-14 w-14">
-                    <Icon icon="HamburguerClose" />
-                  </div>
-                ) : (
-                  <div className="h-[30px] w-[36px]">
-                    <Icon icon="HamburguerOpen" />
-                  </div>
-                )}
-              </MainButton>
-            </div>
-            <div>
-              {/* imagenes tablet y desktop */}
-              <div className="hidden md:flex justify-center items-center">
-                <Link href="/">
-                  <Image
-                    src={Images.logos.LogoRedColor}
-                    width={200}
-                    height={30}
-                    alt="Your Company"
-                  />
-                </Link>
+            <MainButton onClick={toggleNavbar}>
+              <div className={isOpen ? 'h-14 w-14' : 'h-h-14 w-14'}>
+                <Icon icon={isOpen ? 'HamburguerClose' : 'HamburguerOpen'} />
               </div>
-              {/* imagen mobile */}
-              <div className="md:hidden flex justify-center items-center">
-                <Link href="/">
-                  <Image
-                    src={Images.logos.ActLogo}
-                    width={55}
-                    height={32}
-                    alt="Your Company"
-                  />
-                </Link>
-              </div>
-            </div>
+            </MainButton>
           </div>
-          {/* Contenedor central dropDownMenus e input */}
-          <div className="hidden md:flex items-center justify-center gap-5">
-            {/* input */}
-            <div className="flex items-center justify-center">
-              <InputField
-                placeholder="Buscar Productos"
-                leftIcon={<Icon icon="SearchIcon" />}
-              />
-            </div>
-          </div>
-          {/* Contenedor lado derecho iconos*/}
-          <div className="flex items-center gap-6">
-            <div className="h-[35px] w-[35px]">
-              <Link href={'/login'}>
-                <Icon icon="Login" />
+          <div>
+            {/* imagenes tablet y desktop */}
+            <div className="hidden md:flex justify-center items-center">
+              <Link href="/">
+                <Image
+                  src={Images.logos.LogoRedColor}
+                  width={200}
+                  height={30}
+                  alt="Your Company"
+                />
               </Link>
             </div>
-            <div className="h-[35px] w-[35px]">
-              <Link href={'#'}>
-                <Icon icon="CarShoping" />
+            {/* imagen mobile */}
+            <div className="md:hidden flex justify-center items-center">
+              <Link href="/">
+                <Image
+                  src={Images.logos.ActLogo}
+                  width={55}
+                  height={32}
+                  alt="Your Company"
+                />
               </Link>
             </div>
-
-            <ThemeModeButton />
           </div>
-        </nav>
-        {/* Input mobile*/}
-        <div className="md:hidden flex items-center justify-center pb-3">
-          <InputField
-            placeholder="Buscar Productos"
-            leftIcon={<Icon icon="SearchIcon" />}
-          />
         </div>
-        {/* Menu */}
-        {isOpen && (
-          <div className="border-t-2 border-t-white">
-            <MenuMobile />
+        {/* Contenedor central dropDownMenus e input */}
+        <div className="hidden md:flex items-center justify-center gap-5">
+          {/* input */}
+          <div className="flex items-center justify-center ">
+            <InputField
+              className="w-[40vw] shadow-md bg-opacity-70 bg-white "
+              placeholder="Buscar Productos"
+              leftIcon={<Icon icon="SearchIcon" />}
+            />
+          </div>
+        </div>
+        {/* Contenedor lado derecho iconos*/}
+        <div className="flex items-center gap-6">
+          <div className="h-[35px] w-[35px]">
+            <Link href={'/login'}>
+              <Icon icon="Login" />
+            </Link>
           </div>
-        )}
+          <div className="h-[35px] w-[35px]">
+            <Link href={'#'}>
+              <Icon icon="CarShoping" />
+            </Link>
+          </div>
+
+          <ThemeModeButton />
+        </div>
+      </nav>
+      {/* Input mobile*/}
+      <div className="md:hidden flex items-center justify-center pb-3">
+        <InputField
+          className="w-[70vw] max-w-md shadow-md bg-opacity-70 bg-white"
+          placeholder="Buscar Productos"
+          leftIcon={<Icon icon="SearchIcon" />}
+        />
       </div>
+      {/* Menu */}
+      {isOpen && (
+        <div className="border-t-2 border-t-white" onMouseLeave={toggleNavbar}>
+          <MenuMobile />
+        </div>
+      )}
     </div>
   );
 };

From da8bf6a0ee86ab5058029c38ecb358edbe09b62c Mon Sep 17 00:00:00 2001
From: Clay Martinez <clay.ms@hotmail.com>
Date: Tue, 12 Sep 2023 15:29:35 -0500
Subject: [PATCH 4/4] modificacion width inputField

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

diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx
index 8a4e644..3623f44 100644
--- a/src/components/navBar/navBar.tsx
+++ b/src/components/navBar/navBar.tsx
@@ -61,7 +61,7 @@ const NavBar: FC<NavBarProps> = ({}) => {
           {/* input */}
           <div className="flex items-center justify-center ">
             <InputField
-              className="w-[40vw] shadow-md bg-opacity-70 bg-white "
+              className="w-[50vw] shadow-md bg-opacity-70 bg-white "
               placeholder="Buscar Productos"
               leftIcon={<Icon icon="SearchIcon" />}
             />
@@ -86,7 +86,7 @@ const NavBar: FC<NavBarProps> = ({}) => {
       {/* Input mobile*/}
       <div className="md:hidden flex items-center justify-center pb-3">
         <InputField
-          className="w-[70vw] max-w-md shadow-md bg-opacity-70 bg-white"
+          className="w-[60vw] max-w-md shadow-md bg-opacity-70 bg-white"
           placeholder="Buscar Productos"
           leftIcon={<Icon icon="SearchIcon" />}
         />