Merge pull request #132 from Actualiza-Tu-Carro/114-modificacion-navbar

114 modificacion navbar
Dium-dev · Sep 12, 2023 · 7918d77 · 7918d77
2 parents af203e3 + da8bf6a
commit 7918d77
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 144 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/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
@@ -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/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 transform  hover:scale-125"
+          >
+            {item.label}
+          </Link>
+        </>
+      ))}
     </div>
   );
 };

diff --git 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 max-w-[1480px] 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-[50vw] 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-[60vw] 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>
   );
 };