响应式网站的js效果怎么修改

// 原始代码
document.querySelector('.nav-toggle').addEventListener('click', function() {
    document.querySelector('.nav-menu').classList.toggle('active');
});

// 修改后的代码
document.querySelector('.nav-toggle').addEventListener('click', function() {
    const navMenu = document.querySelector('.nav-menu');
    navMenu.classList.toggle('active');
    if (navMenu.classList.contains('active')) {
        navMenu.style.transition = 'all 0.3s ease-in-out';
        navMenu.style.opacity = '1';
        navMenu.style.transform = 'translateY(0)';
    } else {
        navMenu.style.transition = 'all 0.3s ease-in-out';
        navMenu.style.opacity = '0';
        navMenu.style.transform = 'translateY(-100%)';
    }
});

/* CSS */
@media (max-width: 768px) {
    .nav-menu {
        display: none;
    }
}

// JavaScript
document.querySelector('.nav-toggle').addEventListener('click', function() {
    const navMenu = document.querySelector('.nav-menu');
    if (window.innerWidth <= 768) {
        navMenu.classList.toggle('active');
    } else {
        // 在大屏幕上可能有不同的逻辑
        navMenu.classList.remove('active');
    }
});

import React, { useState } from 'react';

function Navbar() {
    const [isActive, setIsActive] = useState(false);

    return (
        <div>
            <button className="nav-toggle" onClick={() => setIsActive(!isActive)}>Toggle</button>
            <nav className={`nav-menu ${isActive ? 'active' : ''}`}>
                {/* 导航内容 */}
            </nav>
        </div>
    );
}

export default Navbar;