恢复 header的收缩效果

Author: CatCodeMe

packages/pure/components/basic/Header.astro

@@ -76,54 +76,34 @@ import { Icon } from '../user'
   </div>
 </header-component>
 
-{/* Use inline to load icon quicker firstly */}
-<!-- <script is:inline>
-  const toggleDarkModeElement = document.getElementById('toggleDarkMode')
-  const initialTheme = localStorage.getItem('theme') || 'system'
-  if (toggleDarkModeElement) {
-    toggleDarkModeElement.dataset.theme = initialTheme
-    document.documentElement.dataset.theme = initialTheme
-  }
-</script>
 <script>
-  import { setTheme, showToast } from '../../utils'
-
   class Header extends HTMLElement {
     constructor() {
       super()
     }
 
     connectedCallback() {
-      // Header
+      // Header scroll behavior - auto hide/show on scroll
       let preScrollY = window.scrollY
       this.classList.toggle('not-top', preScrollY > 20)
+      
       window.addEventListener('scroll', () => {
-        this.classList.toggle('not-top', window.scrollY > 20)
-        this.dataset.show = (window.scrollY < 350 || window.scrollY < preScrollY).toString()
-        preScrollY = window.scrollY
+        const currentScrollY = window.scrollY
+        this.classList.toggle('not-top', currentScrollY > 20)
+        // Show header when scrolling up or near top, hide when scrolling down
+        this.dataset.show = (currentScrollY < 350 || currentScrollY < preScrollY).toString()
+        preScrollY = currentScrollY
       })
 
-      // Dark Mode
-      const darkModeBtn = this.querySelector('#toggleDarkMode') as HTMLElement
-      if (darkModeBtn) {
-        darkModeBtn.addEventListener('click', () => {
-          const newTheme = setTheme(undefined, true)
-          // Update both button and html root element
-          darkModeBtn.dataset.theme = newTheme
-          document.documentElement.dataset.theme = newTheme
-          showToast({ message: `Set theme to ${newTheme}` })
-        })
-      }
-
-      // Menu
+      // Menu toggle
       this.querySelector('#toggleMenu')?.addEventListener('click', () => {
         this.classList.toggle('expanded')
       })
     }
   }
 
   customElements.define('header-component', Header)
-</script> -->
+</script>
 
 <style>
   header-component {