Merge pull request #63 from Dium-dev/7-L-ATC-nav-component

Fix target property into routes
Dium-dev · Sep 24, 2024 · 8d1a163 · 8d1a163
2 parents bfa08f4 + e219b13
commit 8d1a163
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 28 deletions.
diff --git a/src/app/(nav-bar)/index.tsx b/src/app/(nav-bar)/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 import { Button } from '@/components/button'
 import Image from 'next/image'
+import Link from 'next/link'
 import { HiBars3 } from 'react-icons/hi2'
 import { ContactIcon, ShoppingCartIcon } from '@/assets/icons'
 import { MobileMenu } from './mobile-menu'
@@ -14,15 +15,17 @@ export type RoutesProps = Array<{
   label: string
   to: string
   sub?: Array<{ label: string; to: string }>
+  target?: string
 }>
 
 const routes: RoutesProps = [
   {
     label: 'Tienda',
     to: 'https://shop.actualizatucarro.com/',
+    target: '_blank'
   },
   { label: 'Como comprar', to: '/como-comprar' },
-  { label: 'Blog', to: 'https://actualizatucarro.blogspot.com' },
+  { label: 'Blog', to: 'https://actualizatucarro.blogspot.com', target: '_blank' },
   { label: 'Nosotros', to: '/about-us' },
 ]
 
@@ -58,16 +61,17 @@ export function NavBar() {
       />
 
       <ul className="ms:flex gap-3 mx-auto hidden md:left-1/2 md:absolute md:-translate-x-1/2 lg:gap-7">
-        {routes.map(({ label, to, sub }) => (
+        {routes.map(({ label, to, sub, target }) => (
           <li className="relative group" key={label}>
-            <Button
-              className="flex items-center gap-2 relative"
-              onClick={() => route.push(to)}
-            >
-              {' '}
-              {label}
-              {sub?.length && <CgChevronDown className="w-5 h-5 -mr-2" />}
-            </Button>
+            <Link href={to} target={target}>
+              <Button
+                className="flex items-center gap-2 relative"
+              >
+                {' '}
+                {label}
+                {sub?.length && <CgChevronDown className="w-5 h-5 -mr-2" />}
+              </Button>
+            </Link>
             {sub?.length && (
               <div
                 style={{ animation: 'popover-ani 0.5s alternate' }}

diff --git a/src/app/(nav-bar)/mobile-menu.tsx b/src/app/(nav-bar)/mobile-menu.tsx
@@ -77,30 +77,31 @@ export function MobileMenu({ buttonValue, open, handleOPen, routes }: Props) {
               </button>
             </header>
             <ul className="space-y-3">
-              {routes.map(({ label, to, sub }) => (
+              {routes.map(({ label, to, sub, target }) => (
                 <li
                   className="transition-all ease-in-out"
                   key={label}
-                  onClick={() => route.push(to)}
                 >
-                  <div className="flex items-center">
-                    <Button className="w-full text-start">{'' + label}</Button>
+                  <Link href={to} target={target}>
+                    <div className="flex items-center">
+                      <Button className="w-full text-start">{'' + label}</Button>
+                      {sub && (
+                        <Button
+                          className="w-1/5"
+                          onClick={(evt) => {
+                            evt.stopPropagation()
+                            handleCurIndex(curIndex === 1 ? 0 : 1)
+                          }}
+                        >
+                          <FiChevronDown className="w-full h-full" />
+                        </Button>
+                      )}
+                    </div>
+
                     {sub && (
-                      <Button
-                        className="w-1/5"
-                        onClick={(evt) => {
-                          evt.stopPropagation()
-                          handleCurIndex(curIndex === 1 ? 0 : 1)
-                        }}
-                      >
-                        <FiChevronDown className="w-full h-full" />
-                      </Button>
+                      <Accordion index={1} current={curIndex} values={sub} />
                     )}
-                  </div>
-
-                  {sub && (
-                    <Accordion index={1} current={curIndex} values={sub} />
-                  )}
+                  </Link>
                 </li>
               ))}