CODIGO

MAINHEADER:

import AvatarImage from '@/assets/images/image-avatar.png';

import MenuIcon from '@/assets/components/icons/MenuIcon';

import CartIcon from '@/assets/components/icons/CartIcon';

import CloseIcon from '@/assets/components/icons/CloseIcon';

import { useState } from 'react';

import NavLinkHeader from '@/assets/components/header/NavLinkHeader';

const MainHeader = () => {

    const COMPANY_NAME = "Shoreline";

    const [navClass, setNavClass] = useState("hidden font-bold md:mr-auto md:gap-4 md:flex-row top-0 left-0 p-8 md:static md:p-8 md:h-auto")

    const handleOpenMenu = () => {

        setnavClass("absolute w-4/5 font-bold flex flex-col md:mr-auto md:gap-4 md:flex md:flex-row top-0 left-0 bg-white h-full p-8 gap-y-[21px] md:static md:p-0 md:h-auto");

    };

    const handleClosedMenu = () => {

        setnavClass("hidden font-bold md:mr-auto md:gap-4 md:flex md:flex-row top-0 left-0  p-8 md:static md:p-0 md:h-auto")

    };

    return (

        <>

            <header>

                <button>

                    <MenuIcon />

                </button>

                <div>

                    {COMPANY_NAME}

                </div>

                <nav>

                    <button>

                        <CloseIcon />

                    </button>

                    <NavLinkHeader text="Collections" />

                    <NavLinkHeader text="Men" />

                    <NavLinkHeader text="Women" />

                    <NavLinkHeader text="About" />

                    <NavLinkHeader text="Contact" />

                </nav>

                <button>

                    <CartIcon />

                </button>

            </header>

        </>

    );

};

export default MainHeader;

VITE.CONFIG.JS

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

import path from 'path'

export default defineConfig({

  plugins: [react()],

  resolve: {

    alias: {

      '@': path.resolve(__dirname, './src')

    }

  }

})

APP.JSX

import MainHeader from "@/assets/components/header/MainHeader";

function App() {

  return (

    <>

      <MainHeader />

    </>

  );

}

export default App;