MermsWebsite2025/components/layout/MobileMenu.js

import Link from 'next/link'
import { useState } from 'react'
export default function MobileMenu() {
    const [isActive, setIsActive] = useState({
        status: false,
        key: "",
    })

    const handleToggle = (key) => {
        if (isActive.key === key) {
            setIsActive({
                status: false,
            })
        } else {
            setIsActive({
                status: true,
                key,
            })
        }
    }
    return (
        <>
            <ul className="wsmenu-list nav-theme">
                {/* DROPDOWN SUB MENU */}
                <li aria-haspopup="true">
                    <span className={isActive.key == 1 ? "wsmenu-click ws-activearrow" : "wsmenu-click"} onClick={() => handleToggle(1)}><i className="wsmenu-arrow" /></span>
                    <Link href="#" className="h-link">About <span className="wsarrow" /></Link>
                    <ul className="sub-menu" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
                        <li aria-haspopup="true"><Link href="#merms-about">Why MERMS?</Link></li>
                        <li aria-haspopup="true"><Link href="#merms-works">How It Works</Link></li>
                        <li aria-haspopup="true"><Link href="/contacts">Contacts Us</Link></li>
                        <li aria-haspopup="true"><Link href="/faqs">F.A.Q.</Link></li>
                    </ul>
                </li>
                {/* SIMPLE NAVIGATION LINK */}
                <li className="nl-simple" aria-haspopup="true"><Link href="#merms-features" className="h-link">Features</Link></li>

                {/* SIGN IN LINK */}
                <li className="nl-simple reg-fst-link mobile-last-link" aria-haspopup="true">
                    <Link href="https://dev-panel.mermsemr.com/" className="h-link">Sign in</Link>
                </li>
                {/* SIGN UP BUTTON */}
                <li className="nl-simple" aria-haspopup="true">
                    <Link href="https://dev-panel.mermsemr.com/auth/signup" className="btn r-04 btn--theme hover--tra-white last-link">Sign
                        up</Link>
                </li>
            </ul>
        </>
    )
}