Creacion de nav bar

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "next": "14.1.0",
+    "next-themes": "^0.2.1",
     "react": "^18",
     "react-dom": "^18",
     "react-fast-marquee": "^1.6.4",

src/app/(nav-bar)/index.tsx

@@ -0,0 +1,93 @@
+'use client'
+import { Button } from '@/components/button'
+import Image from 'next/image'
+import { HiBars3 } from 'react-icons/hi2'
+import { ContactIcon, ShoppingCartIcon } from '@/assets/icons'
+import { MobileMenu } from './mobile-menu'
+import { useState } from 'react'
+import { ThemeModeButton } from '@/components/theme-mode'
+import { CgChevronDown } from 'react-icons/cg'
+
+const routes = [
+  {
+    label: 'Productos',
+    url: '/products',
+    sub: [
+      {
+        label: 'Farola',
+        to: 'farolas',
+      },
+      {
+        label: 'Luces',
+        to: 'farolas',
+      },
+    ],
+  },
+  { label: 'Como comprar', url: '/how-to-buy' },
+  { label: 'Blog', url: 'https://actualizatucarro.blogspot.com' },
+  { label: 'Nosotros', url: '/about-us' },
+]
+
+export function NavBar() {
+  const [open, setOpen] = useState(false)
+  const handleOPen = () => setOpen((cur) => !cur)
+
+  return (
+    <nav className="text-text-lm sticky top-0 z-40 backdrop-blur-sm px-4 py-6 justify-between flex items-center bg-background-lm/90 dark:bg-background-dm/90 shadow-md dark:text-text-dm">
+      <MobileMenu
+        buttonValue={<HiBars3 className="w-full h-full" />}
+        open={open}
+        handleOPen={handleOPen}
+      />
+      <Image
+        className="absolute right-1/2 translate-x-1/2 top-1/2 -translate-y-1/2 ms:relative ms:right-0 ms:translate-x-0 ms:top-0 ms:-translate-y-0 md:hidden"
+        src="./icons/logoActualizatucarroM.svg"
+        alt="Actualiza tu carro logotipo"
+        width={50}
+        height={50}
+      />
+      <Image
+        src="./icons/logoActualizatucarroD.svg"
+        width={200}
+        height={30}
+        alt="Your Company"
+        onClick={() => {}}
+        className="hidden md:block"
+      />
+
+      <ul className="ms:flex gap-3 mx-auto hidden">
+        {routes.map(({ label, sub }) => (
+          <li className="relative group" key={label}>
+            <Button className="flex items-center gap-2 relative">
+              {' '}
+              {label}
+              {sub?.length && <CgChevronDown className="w-5 h-5 -mr-2" />}
+            </Button>
+            {sub?.length && (
+              <div
+                style={{ animation: 'popover-ani 0.5s alternate' }}
+                className="hidden -z-10 absolute left-1/2 -translate-x-1/2 w-full top-full group-hover:block"
+              >
+                <main style={{
+                  zIndex: '-1000'
+                }} className="bg-background-lm ring-1 ring-primary-dm/5 leading-3 mt-6 rounded px-3 py-4 shadow dark:bg-background-dm">
+                  {sub.map((_a, i) => (
+                    <Button key={i} className="w-full text-start text-primary-dm">
+                      {_a.label}
+                    </Button>
+                  ))}
+                </main>
+              </div>
+            )}
+          </li>
+        ))}
+      </ul>
+
+      <ContactIcon className="w-10 h-full hidden ml-auto ms:block mr-2" />
+      <div className="hidden ms:block">
+        <ThemeModeButton />
+      </div>
+      <ShoppingCartIcon className="w-10 p-0.5 h-full hover:bg-primary-dm/20 rounded relative  transition-all ease-in-out" />
+    </nav>
+  )
+}

src/app/(nav-bar)/mobile-menu.tsx

@@ -0,0 +1,163 @@
+import Image from 'next/image'
+import { useEffect, type ReactNode, useState } from 'react'
+
+import { ToggleTheme } from '@/components/theme-mode'
+import { useRouter } from 'next/navigation'
+import { Button } from '@/components/button'
+import { FiChevronDown } from 'react-icons/fi'
+import { HiOutlineX } from 'react-icons/hi'
+import Link from 'next/link'
+
+interface Props {
+  buttonValue: ReactNode
+  open: boolean
+  handleOPen(): void
+}
+
+export function MobileMenu({ buttonValue, open, handleOPen }: Props) {
+  const [curIndex, setCurIndex] = useState(0)
+  const handleCurIndex = (index: number) => setCurIndex(index ? index : 0)
+  const route = useRouter()
+  const routes = [
+    {
+      label: 'Productos',
+      url: '/products',
+      sub: [
+        {
+          label: 'Farola',
+          to: 'farolas',
+        },
+        {
+          label: 'Luces',
+          to: 'farolas',
+        },
+      ],
+    },
+    { label: 'Como comprar', url: '/how-to-buy' },
+    { label: 'Blog', url: 'https://actualizatucarro.blogspot.com' },
+    { label: 'Nosotros', url: '/about-us' },
+  ]
+
+  useEffect(() => {
+    document.body.style.overflow = open ? 'hidden' : ''
+  }, [open])
+
+  return (
+    <>
+      <button className="w-10 p-1 ms:hidden" onClick={handleOPen}>
+        {buttonValue}
+      </button>
+      {open && (
+        <div
+          className="fixed top-0 left-0 h-screen bg-background-dm/70 w-full z-[60] ms:hidden"
+          onClick={handleOPen}
+        >
+          <div
+            style={{
+              animation: '1s mobile-menu-animate',
+            }}
+            className="h-full bg-background-lm max-w-[290px] p-3 gap-5 flex flex-col dark:bg-background-dm transition-all ease-in-out"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <header className="flex items-center justify-between">
+              <Image
+                src={'./icons/logoActualizatucarroD.svg'}
+                width={200}
+                height={30}
+                alt="Your Company"
+                onClick={() => route.back()}
+              />
+              <button
+                className="w-9 aspect-square"
+                onClick={() => {
+                  handleOPen()
+                }}
+              >
+                <HiOutlineX className="w-full h-full" />
+              </button>
+            </header>
+            <ul className="flex-1 space-y-3">
+              {routes.map(({ label, url, sub }) => (
+                <li
+                  className="transition-all ease-in-out"
+                  key={label}
+                  onClick={() => route.push(url)}
+                >
+                  <div className="flex items-center">
+                    <Button className="w-4/5 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 && (
+                    <Accordion index={1} current={curIndex} values={sub} />
+                  )}
+                </li>
+              ))}
+              <div className="pt-6">
+                <hr className="border-secondary-dm/50 pb-6" />
+                <p className="pl-3 flex items-center justify-between font-medium">
+                  Apariencia: {<ToggleTheme />}
+                </p>
+              </div>
+            </ul>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
+
+interface AccordionProps {
+  index: number
+  current: number
+  values: Array<{
+    label: string
+    to: string
+  }>
+}
+
+function Accordion({ index, current, values }: AccordionProps) {
+  return (
+    <div
+      className={`${
+        index === current ? 'h-auto' : 'h-0'
+      } overflow-hidden ml-4 transition-all ease-in-out`}
+    >
+      {values.map(({ label }, i) => (
+        <Link href={`/products?category=${label}`} key={i} className="block">
+          {label}
+        </Link>
+      ))}
+    </div>
+  )
+}
+
+function AvatarProfile({ image, name }: { image: string; name: string }) {
+  return (
+    <div className="flex box-content">
+      <Image
+        src={'./images/logo/logoM.svg'}
+        width={50}
+        height={50}
+        alt={name}
+        className="border rounded-full"
+      />
+      <Button className="flex flex-col line-clamp-1">
+        <span title={name} className="whitespace-nowrap line-clamp-1 w-full">
+          {name.length > 21 ? name.slice(0, 21) + '...' : name}
+        </span>
+        <span className="text-xs font-normal">Ver Perfil</span>
+      </Button>
+    </div>
+  )
+}

src/app/layout.tsx

@@ -1,23 +1,27 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
+'use client'
+import { Inter } from 'next/font/google'
+import './globals.css'
+import { NavBar } from './(nav-bar)'
+import { ThemeProvider } from 'next-themes'
 
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "Actualizatucarro",
-  description: "Accesorios premiun para autos tipo Original",
-  keywords: ["accesorios", "repuestos", "farolas", "stops", "tuning"],
-};
+const inter = Inter({ subsets: ['latin'] })
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <html lang="es">
-      <body className={inter.className}>{children}</body>
+      <body
+        className={inter.className}
+        style={{ maxWidth: '1920px', margin: '0 auto' }}
+      >
+        <ThemeProvider attribute="class">
+          <NavBar />
+          {children}
+        </ThemeProvider>
+      </body>
     </html>
-  );
+  )
 }

src/app/page.tsx

@@ -1,5 +1,12 @@
-import Banner from "@/components/Banner";
-import Categories from "@/components/Categories";
+import Banner from '@/components/Banner'
+import Categories from '@/components/Categories'
+import type { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: 'Actualizatucarro',
+  description: 'Accesorios premiun para autos tipo Original',
+  keywords: ['accesorios', 'repuestos', 'farolas', 'stops', 'tuning'],
+}
 import Blog from "@/components/Blog";
 import BrandsCarousel from "@/components/BrandsCarousel";
 
@@ -11,5 +18,5 @@ export default function Home() {
       <BrandsCarousel />
       <Blog />
     </main>
-  );
+  )
 }