/* eslint-disable no-unreachable */ import { useEffect } from 'react' export const NavBar = () => { useEffect(() => { // ======= Sticky window.onscroll = function () { // 这里有点bug return // eslint-disable-next-line camelcase const ud_header = document.querySelector('.ud-header'); const sticky = ud_header.offsetTop; const logo = document.querySelectorAll('.header-logo'); if (window.pageYOffset > sticky) { ud_header.classList.add('sticky'); } else { ud_header.classList.remove('sticky'); } if (logo.length) { // === logo change if (ud_header.classList.contains('sticky')) { document.querySelector('.header-logo').src = '/images/landing-2/logo/logo.svg' } else { document.querySelector('.header-logo').src = '/images/landing-2/logo/logo-white.svg' } } if (document.documentElement.classList.contains('dark')) { if (logo.length) { // === logo change if (ud_header.classList.contains('sticky')) { document.querySelector('.header-logo').src = '/images/landing-2/logo/logo-white.svg' } } } // show or hide the back-top-top button const backToTop = document.querySelector('.back-to-top'); if ( document.body.scrollTop > 50 || document.documentElement.scrollTop > 50 ) { backToTop.style.display = 'flex'; } else { backToTop.style.display = 'none'; } }; // ===== responsive navbar const navbarToggler = document.querySelector('#navbarToggler'); const navbarCollapse = document.querySelector('#navbarCollapse'); navbarToggler.addEventListener('click', () => { navbarToggler.classList.toggle('navbarTogglerActive'); navbarCollapse.classList.toggle('hidden'); }); //= ==== close navbar-collapse when a clicked document .querySelectorAll('#navbarCollapse ul li:not(.submenu-item) a') .forEach((e) => e.addEventListener('click', () => { navbarToggler.classList.remove('navbarTogglerActive'); navbarCollapse.classList.add('hidden'); }) ); // ===== Sub-menu const submenuItems = document.querySelectorAll('.submenu-item'); submenuItems.forEach((el) => { el.querySelector('a').addEventListener('click', () => { el.querySelector('.submenu').classList.toggle('hidden'); }); }); /* ======== themeSwitcher start ========= */ // themeSwitcher const themeSwitcher = document.getElementById('themeSwitcher'); // Theme Vars const userTheme = localStorage.getItem('theme'); const systemTheme = window.matchMedia('(prefers-color0scheme: dark)').matches; // Initial Theme Check const themeCheck = () => { if (userTheme === 'dark' || (!userTheme && systemTheme)) { document.documentElement.classList.add('dark'); } }; // Manual Theme Switch const themeSwitch = () => { if (document.documentElement.classList.contains('dark')) { document.documentElement.classList.remove('dark'); localStorage.setItem('theme', 'light'); return; } document.documentElement.classList.add('dark'); localStorage.setItem('theme', 'dark'); }; // call theme switch on clicking buttons themeSwitcher.addEventListener('click', () => { themeSwitch(); }); // invoke theme check on initial load themeCheck(); /* ======== themeSwitcher End ========= */ }) return <> {/* */}
logo
{/* */} }