'use client'
          import { useState } from "react";
          import styles from "./page.module.css";

          export default function Classic() {
            const [isOpen, setIsOpen] = useState(false);

            const toggleMenu = () => {
              setIsOpen(!isOpen);
            };

            return (
            <div className={styles["div-general"]}>
                <button className={styles["button-deploy"]} onClick={toggleMenu}>
                  +
                </button>
                <nav className={`${styles["nav-menu"]} ${isOpen ? styles["open"] : ""}`}>
                  <ul className={styles["ul-menu"]}>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Acerca de</a></li>
                    <li><a href="#">Contacto</a></li>
                  </ul>
                </nav>
              </div>
            );
          } 
        

          'use client'

          import React, { useState } from 'react';
          import styles from "@/app/page.module.css"
          import { CiMenuBurger } from "react-icons/ci";
          import { IoMdClose } from 'react-icons/io';


          const MenuNexus = () => {
            const [isOpen, setIsOpen] = useState(false);

            const toggleMenu = () => {
              setIsOpen(!isOpen);
            };

            return (
              <div className={styles["div-general"]}>
                <button className={styles["button-deploy"]} onClick={toggleMenu}>
                  <CiMenuBurger />
                </button>

                <div
                  className={`${styles["overlay"]} ${isOpen ? styles["show"] : ""}`}
                  onClick={() => setIsOpen(false)}
                ></div>

                <nav className={`${styles["nav-menu"]} ${isOpen ? styles["open"] : ""}`}>
                  <button
                    className={styles["close-btn"]}
                    onClick={() => setIsOpen(false)}
                  >
                    <IoMdClose />
                  </button>
                  <p className={styles["icono"]}>🍔</p>
                  <ul className={styles["ul-menu"]}>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Acerca de</a></li>
                    <li><a href="#">Contacto</a></li>
                  </ul>
                </nav>
              </div >
            );
          };

          export default MenuNexus; 
        

          'use client'

          import React, { useState } from 'react';
          import styles from "@/app/page.module.css"
          import { CiMenuBurger } from "react-icons/ci";
          import { IoMdClose } from 'react-icons/io';


          const MenuVertex = () => {
            const [isOpen, setIsOpen] = useState(false);

            const toggleMenu = () => {
              setIsOpen(!isOpen);
            };

            return (
              <div className={styles["div-general"]}>
                <button className={styles["button-deploy"]} onClick={toggleMenu}>
                  <CiMenuBurger />
                </button>

                <div
                  className={`${styles["overlay"]} ${isOpen ? styles["show"] : ""}`}
                  onClick={() => setIsOpen(false)}
                ></div>

                <nav className={`${styles["nav-menu"]} ${isOpen ? styles["open"] : ""}`}>
                  <button
                    className={styles["close-btn"]}
                    onClick={() => setIsOpen(false)}
                  >
                    <IoMdClose />
                  </button>
                  <p className={styles["icono"]}>🍔</p>
                  <ul className={styles["ul-menu"]}>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Acerca de</a></li>
                    <li><a href="#">Contacto</a></li>
                    <div className={styles['div-search']}>
                      <li>
                        <input
                          type="text"
                          className={styles['input-search']}
                          placeholder='Search'
                        />
                      </li>
                      <li>
                        <button className={styles['button-search']}>Submit</button>
                      </li>
                    </div>
                  </ul>
                </nav>
              </div >
            );
          };

          export default MenuVertex;
    

          'use client'

          import React, { useState } from 'react';
          import styles from "@/app/page.module.css"
          import { CiMenuBurger } from "react-icons/ci";
          import { IoMdClose } from 'react-icons/io';


          const MenuAxis = () => {
            const [isOpen, setIsOpen] = useState(false);

            const toggleMenu = () => {
              setIsOpen(!isOpen);
            };

            return (
              <div className={styles["div-general"]}>
                <button className={styles["button-deploy"]} onClick={toggleMenu}>
                  <CiMenuBurger />
                </button>

                <div
                  className={`${styles["overlay"]} ${isOpen ? styles["show"] : ""}`}
                  onClick={() => setIsOpen(false)}
                ></div>

                <nav className={`${styles["nav-menu"]} ${isOpen ? styles["open"] : ""}`}>
                  <button
                    className={styles["close-btn"]}
                    onClick={() => setIsOpen(false)}
                  >
                    <IoMdClose />
                  </button>
                  <p className={styles["icono"]}>🍔</p>
                  <ul className={styles["ul-menu"]}>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Acerca de</a></li>
                    <li><a href="#">Contacto</a></li>
                  </ul>
                </nav>
              </div >
            );
          };

          export default MenuAxis;
    

        'use client'

        import React, { useState } from 'react';
        import styles from "@/app/page.module.css"
        import { CiMenuBurger } from "react-icons/ci";
        import { IoMdClose } from 'react-icons/io';
        import { IoMdCart } from "react-icons/io";
        import { FaUser } from "react-icons/fa";


        const MenuLocus = () => {
          const [isOpen, setIsOpen] = useState(false);

          const toggleMenu = () => {
            setIsOpen(!isOpen);
          };

          return (
            <div className={styles["div-general"]}>
              <button className={styles["button-deploy"]} onClick={toggleMenu}>
                <CiMenuBurger />
              </button>

              <div
                className={`${styles["overlay"]} ${isOpen ? styles["show"] : ""}`}
                onClick={() => setIsOpen(false)}
              ></div>

               <nav className={`${styles["nav-menu"]} ${isOpen ? styles["open"] : ""}`}>

                <button
                  className={styles["close-btn"]}
                  onClick={() => setIsOpen(false)}
                >
                  <IoMdClose />
                </button>
                <p className={styles["icono"]}>🍔</p>
                <ul className={styles["ul-menu"]}>
                  <li><a href="#">Inicio</a></li>
                  <li><a href="#">Acerca de</a></li>
                  <li><a href="#">Contacto</a></li>
                  <li><a className={styles["user-icon"]} href="#"><FaUser /></a></li>
                  <li><a className={styles["cart-icon"]} href="#"><IoMdCart /></a></li>
                </ul>
              </nav>
            </div >
          );
        };

        export default MenuLocus;
    

         'use client'

          import React, { useState } from 'react';
          import styles from "@/app/page.module.css"
          import { CiMenuBurger } from "react-icons/ci";
          import { IoMdClose } from 'react-icons/io';
          import { IoMdCart } from "react-icons/io";
          import { FaUser } from "react-icons/fa";

          const MenuVector = () => {
            const [isOpen, setIsOpen] = useState(false);

            const toggleMenu = () => {
              setIsOpen(!isOpen);
            };

            return (
              <div className={styles["div-general"]}>

                <div className={styles["div-menu-butons"]}>
                  <button className={styles["button-deploy"]} onClick={toggleMenu}>
                    <CiMenuBurger />
                  </button>

                  <div className={styles["auth-buttons"]}>
                    <button className={styles["btn-signin"]}>Sign in</button>
                    <button className={styles["btn-register"]}>Register</button>
                  </div>
                </div>
                <div
                  className={`${styles["overlay"]} ${isOpen ? styles["show"] : ""}`}
                  onClick={() => setIsOpen(false)}
                ></div>

                <nav className={`${styles["nav-menu"]} ${isOpen ? styles["open"] : ""}`}>
                  <button
                    className={styles["close-btn"]}
                    onClick={() => setIsOpen(false)}
                  >
                    <IoMdClose />
                  </button>
                  <p className={styles["icono"]}>🍔</p>
                  <ul className={styles["ul-menu"]}>
                    <li><a href="#">Inicio</a></li>
                    <li><a href="#">Acerca de</a></li>
                    <li><a href="#">Contacto</a></li>
                    <li><a className={styles["user-icon"]} href="#"><FaUser /></a></li>
                    <li><a className={styles["cart-icon"]} href="#"><IoMdCart /></a></li>
                  </ul>
                </nav>
              </div >
            );
          };

          export default MenuVector;