Почему переключение разделов сайта не работает? И Ripple-эффект не воспроизводится… Как будто бы JS отключился.

HTML:
```
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Сайт</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
</head>

<body>
    <div class="page">
        <aside class="sidebar">
            <div class="sidebar-header">
                <div class="sidebar-title">Сайт</div>
            </div>
            <nav class="sidebar-menu">
                <div class="menu-item" data-section="home">Главная</div>
                <div class="menu-item" data-section="about">Обо мне</div>
                <div class="menu-item" data-section="projectdex">Проектдекс</div>
                <div class="menu-item" data-section="bestiary">Бестиарий</div>
                <div class="menu-item" data-section="gallery">Галерея</div>
                <div class="menu-item" data-section="useful">Полезное</div>
                <div class="menu-item" data-section="settings">Настройки</div>
                <div class="menu-item" data-section="inweb">В интернете</div>
            </nav>
        </aside>
        <main class="section-content">
            <section id="home" class="content-section">
                <h2>Добро пожаловать на мой сайт!</h2>
            </section>

            <section id="about" class="content-section">
                <h3>🔮 Обо мне</h3>
                <p></p>

                <h4>Я:</h4>
                <ul>
                    <li>студент,</li>
                    <ul>
                        <li></li>
                    </ul>
                    <li></li>
                    <ul>
                        <li></li>
                    </ul>
                    <li></li>
                    <ul>
                        <li></li>
                    </ul>
                    <li></li>
                    <ul>
                        <li></li>
                    </ul>
                    <li></li>
                    <ul>
                        <li><b>
                        </li>
                    </ul>
                    <li></li>
                    <ul>
                        <li><b>
                        </li>
                    </ul>
                    <li></li>
                    <ul>
                        <li><b></li>
                    </ul>
                    <li>ютубер.</li>
                    <ul>
                        <li><b></li>
                    </ul>
                </ul>
            </section>

            <section id="projectdex" class="content-section active">
                <h2>Главная</h2>
                <div class="search-bar">
                    <input type="text" id="search-input" placeholder="Место для запроса">
                    <button id="search-button">Поиск</button>
                </div>
                <div class="filter-bar">
                    <select id="filter-tags">
                        <option value="all">Все теги</option>
                        <option value="tag1">Тег 1</option>
                        <option value="tag2">Тег 2</option>
                    </select>
                    <select id="sort-options">
                        <option value="newest">По новизне</option>
                        <option value="popular">По популярности</option>
                    </select>
                </div>
                <div id="project-list" class="project-list">
                </div>
            </section>

            <section id="settings" class="content-section">
                <h2>Настройки</h2>
                <div>
                    <label for="language-select">Выбор языка:</label>
                    <select id="language-select">
                        <option value="ru">Русский</option>
                        <option value="en">English</option>
                    </select>
                </div>
                <div>
                    <label for="theme-select">Выбор темы:</label>
                    <select id="theme-select">
                        <option value="light-green">Зеленая светлая</option>
                        <option value="dark-green">Зеленая тёмная</option>
                        <option value="light-pink">Розовая светлая</option>
                        <option value="dark-pink">Розовая тёмная</option>
                    </select>
                </div>
            </section>

            <section id="inweb" class="content-section">
                <style>
                    a[href] {
                        vertical-align: middle;
                    }

                    a[href^='https://gamejolt.'] {
                        background: url(pics/game-jolt-logo.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://www.curseforge.'] {
                        background: url(pics/old-curseforge-logo.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://modrinth.com'] {
                        background: url(pics/modrinth-logo.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://ovk.'] {
                        background: url(pics/openvk-logo.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://ru-minecraft.'] {
                        background: url(pics/ru-minecraft-logo.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://twitter.'] {
                        background: url(pics/twitter-logo.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://discord.'] {
                        background: url(pics/discord-logo.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://github.'] {
                        background: url(pics/gh.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://soundcloud.'] {
                        background: url(pics/sc.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://steamcommunity.'] {
                        background: url(pics/steam.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://ellies.'] {
                        background: url(pics/ellies.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://fkokf.'] {
                        background: url(pics/fkokfii.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://the-return-to-freddy-s.'] {
                        background: url(pics/trtf.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://animal-crossing.'] {
                        background: url(pics/ac.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }

                    a[href^='https://t.'] {
                        background: url(pics/tg.png) no-repeat 0;
                        /* вставка иконки */
                        padding-left: 22px;
                        /* вставка иконки */
                    }
                </style>
                <h4>Вы можете связаться со мной здесь:</h4>
                <ul>
                    <li>ВКонтакте,</li>
                    <li>Дискорд,</li>
                    <li>Телеграм.</li>
                </ul>

                <h4>Мои проекты опубликованы здесь:</h4>
                <ul>
                    <li>Модринт,</li>
                    <li>Кёрсфордж,</li>
                    <li>Гитхаб,</li>
                    <li>ВКонтакте,</li>
                    <li>Геймджолт.</li>
                </ul>
                <h3>🌳 Разделы сайта</h3>
                <ul>
                </ul>

                <h3>🔗 Внешние ссылки</h3>
                <ul>
                </ul>
            </section>
        </main>
    </div>
    <script src="script.js"></script>
</body>

</html>
```

JS:
```
document.addEventListener('DOMContentLoaded', function() {
    const savedTheme = localStorage.getItem('theme');
    const savedLanguage = localStorage.getItem('language');
    if (savedTheme) {
        document.documentElement.setAttribute('data-theme', savedTheme);
        document.getElementById('theme-select').value = savedTheme;
    }

    if (savedLanguage) {
        document.querySelector('html').setAttribute('lang', savedLanguage);
        document.getElementById('language-select').value = savedLanguage;
        switchLanguage(savedLanguage);
    }

    document.querySelectorAll('.menu-item').forEach(item => {
        item.addEventListener('click', function(e) {
            const sectionToShow = this.getAttribute('data-section');
            document.querySelectorAll('.content-section').forEach(section => {
                section.classList.remove('active');
            });
            document.getElementById(sectionToShow).classList.add('active');

            // Создание Ripple-эффекта
            createRipple(e, this);
        });
    });

    document.getElementById('theme-select').addEventListener('change', function(event) {
        const selectedTheme = event.target.value;
        document.documentElement.setAttribute('data-theme', selectedTheme);
        localStorage.setItem('theme', selectedTheme);
    });

    document.getElementById('language-select').addEventListener('change', function() {
        const selectedLanguage = this.value;
        document.querySelector('html').setAttribute('lang', selectedLanguage);
        localStorage.setItem('language', selectedLanguage);
        switchLanguage(selectedLanguage);
    });

    function switchLanguage(language) {
        if (language === 'en') {
            document.querySelector('.sidebar-title').textContent = 'Site';
            document.querySelector('#home h2').textContent = 'Home';
            document.querySelector('#about h2').textContent = 'About';
            document.querySelector('#settings h2').textContent = 'Settings';
            document.getElementById('search-input').placeholder = 'Search projects';
        } else {
            document.querySelector('.sidebar-title').textContent = 'Сайт';
            document.querySelector('#home h2').textContent = 'Главная';
            document.querySelector('#about h2').textContent = 'Обо мне';
            document.querySelector('#settings h2').textContent = 'Настройки';
            document.getElementById('search-input').placeholder = 'Поиск проектов';
        }
    }

    const projects = [{
            name: 'Проект 1',
            tag: 'tag1',
            popularity: 5
        },
        {
            name: 'Проект 2',
            tag: 'tag2',
            popularity: 10
        },
    ];

    updateProjectList(projects);

    document.getElementById('search-button').addEventListener('click', function() {
        const query = document.getElementById('search-input').value.toLowerCase();
        const filteredProjects = projects.filter(project =>
            project.name.toLowerCase().includes(query)
        );
        updateProjectList(filteredProjects);
    });

    document.getElementById('filter-tags').addEventListener('change', function() {
        const selectedTag = this.value;
        const filteredProjects = selectedTag === 'all' ?
            projects :
            projects.filter(project => project.tag === selectedTag);
        updateProjectList(filteredProjects);
    });

    document.getElementById('sort-options').addEventListener('change', function() {
        const sortOrder = this.value;
        const sortedProjects = [...projects];
        if (sortOrder === 'newest') {
            sortedProjects.reverse();
        } else if (sortOrder === 'popular') {
            sortedProjects.sort((a, b) => b.popularity - a.popularity);
        }
        updateProjectList(sortedProjects);
    });

    function updateProjectList(projectList) {
        const projectListContainer = document.getElementById('project-list');
        projectListContainer.innerHTML = '';
        projectList.forEach(project => {
            const projectElement = document.createElement('div');
            projectElement.textContent = project.name;
            projectListContainer.appendChild(projectElement);
        });
    }

    /**
     * Функция для создания Ripple эффекта
     * @param {Event} event - Событие клика
     * @param {Element} element - Элемент, на котором произошло нажатие
     */
    function createRipple(event, element) {
        const ripple = document.createElement('span');

        // Получаем размеры и позицию элемента
        const rect = element.getBoundingClientRect();

        // Вычисляем координаты клика относительно элемента
        const x = event.clientX - rect.left;
        const y = event.clientY - rect.top;

        // Вычисляем максимальный радиус Ripple для полного охвата элемента
        const maxDim = Math.max(rect.width, rect.height);
        const rippleSize = maxDim * 2;

        // Настраиваем стили Ripple
        ripple.style.width = ripple.style.height = `${rippleSize}px`;
        ripple.style.left = `${x - rippleSize / 2}px`;
        ripple.style.top = `${y - rippleSize / 2}px`;

        // Добавляем класс для стилей
        ripple.classList.add('ripple');

        // Добавляем элемент в DOM
        element.appendChild(ripple);

        // Удаляем Ripple после завершения анимации
        ripple.addEventListener('animationend', function() {
            ripple.remove();
        });
    }
});
```