Fix mobile menu behavior

Author: jlukic

docs/src/components/TopBar.astro

@@ -19,23 +19,16 @@ showThemeSwitcher = (showThemeSwitcher === 'false') ? false : true;
 import './TopBar.css';
 ---
 <script>
+  import { ScrollNav } from '../javascript/scrollnav.js';
   import { $ } from '@semantic-ui/query';
-  let scrollingDown;
-  let lastScrollPosition;
-  $(window).on('scroll', function() {
-    const isMobile = $(window).width() < 768;
-    const scrollTop = $('html').scrollTop();
-    scrollingDown = Boolean(scrollTop >= lastScrollPosition);
-    lastScrollPosition = scrollTop;
-    requestAnimationFrame(() => {
-      if(isMobile && scrollingDown && scrollTop !== 0) {
-        $('topbar').addClass('hidden');
-      }
-      else {
-        $('topbar').removeClass('hidden');
-      }
-    });
-  }, { passive: true });
+  console.log(ScrollNav);
+  const nav = new ScrollNav($('topbar').el(),
+    {
+      deltaThreshold: 5,
+      velocityThreshold: 15,
+      hideClass: 'hidden'
+    }
+  );
 </script>
 <topbar class={floating ? 'floating' : 'fluid'} transition:persist>
   <div class="content">

docs/src/javascript/scrollnav.js

@@ -0,0 +1,98 @@
+class ScrollNav {
+  constructor(element, options = {}) {
+    if (!(element instanceof Element)) {
+      throw new Error('ScrollNav requires a DOM element');
+    }
+
+    // Store element reference
+    this.element = element;
+
+    // Configuration with defaults
+    this.options = {
+      deltaThreshold: 5,
+      velocityThreshold: 15,
+      hideClass: 'hidden',
+      ...options
+    };
+
+    // State
+    this.lastScrollY = window.scrollY;
+    this.currentScrollY = window.scrollY;
+    this.isVisible = true;
+    this.isScrolling = false;
+    this.scrollTimeout = null;
+    this.ticking = false;
+
+    // Bind methods
+    this.onScroll = this.onScroll.bind(this);
+    this.update = this.update.bind(this);
+
+    // Initialize
+    this.init();
+  }
+
+  init() {
+    // Initial state
+    this.show();
+
+    // Attach scroll listener using passive event for performance
+    window.addEventListener('scroll', this.onScroll, { passive: true });
+  }
+
+  onScroll() {
+    this.currentScrollY = window.scrollY;
+
+    // Only request animation frame if we're not already processing one
+    if (!this.ticking) {
+      requestAnimationFrame(this.update);
+      this.ticking = true;
+    }
+
+    // Reset scroll end timer
+    clearTimeout(this.scrollTimeout);
+    this.scrollTimeout = setTimeout(() => {
+      this.isScrolling = false;
+    }, 150);
+  }
+
+  update() {
+    // Calculate delta and velocity
+    const delta = this.currentScrollY - this.lastScrollY;
+    const velocity = Math.abs(delta);
+
+    // Only trigger if we've crossed our thresholds
+    if (velocity > this.options.velocityThreshold &&
+        Math.abs(delta) > this.options.deltaThreshold) {
+      if (delta > 0) {  // Scrolling down
+        this.hide();
+      } else {  // Scrolling up
+        this.show();
+      }
+    }
+
+    // Update state for next frame
+    this.lastScrollY = this.currentScrollY;
+    this.ticking = false;
+  }
+
+  show() {
+    if (!this.isVisible) {
+      this.element.classList.remove(this.options.hideClass);
+      this.isVisible = true;
+    }
+  }
+
+  hide() {
+    if (this.isVisible) {
+      this.element.classList.add(this.options.hideClass);
+      this.isVisible = false;
+    }
+  }
+
+  destroy() {
+    window.removeEventListener('scroll', this.onScroll);
+    clearTimeout(this.scrollTimeout);
+  }
+}
+
+export { ScrollNav };

docs/src/layouts/Homepage.css

@@ -26,6 +26,11 @@
   }
   li ui-icon[check] {
     color: var(--secondary-text-color);
+    background-color: #eab59f1c;
+    border-radius: var(--circular-radius);
+    padding: 3px;
+    height: 17px;
+    font-size: 12px;
   }
 
 
@@ -129,6 +134,15 @@
     }
 
 
+    &.offscreen {
+      canvas {
+        display: none;
+      }
+
+      &:before {
+        display: none;
+      }
+    }
 
   }
 
@@ -257,7 +271,7 @@
     background-position: 0% 0%;
   }
   100% {
-    background-position: 0% -475px;
+    background-position: 0% 475px;
   }
 }
 

docs/src/pages/index.astro

@@ -42,7 +42,7 @@ const code2=`
     <content>
     <ui-container>
       <div class="center">
-        <h1>Web Components Ready for Scale</h1>
+        <h1>Scalable Web Components</h1>
         <p>Build UI components with <b>web standards</b>, <b>signals-based reactivity</b>, and <b>zero abstraction cost</b>. Create truly <b>portable in house design systems</b> that work everywhere.</p>
         <ui-button primary icon-after icon="right-chevron" href="/learn/selection">Try In 5 Minutes</ui-button>
         <ui-button secondary href="/components">View Docs</ui-button>
@@ -54,6 +54,19 @@ const code2=`
     import { Gradient } from '../javascript/gradient.js'
     const gradient = new Gradient()
     gradient.initGradient('#gradient')
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach(entry => {
+          entry.target.classList.toggle('offscreen', !entry.isIntersecting);
+        });
+      },
+      {
+        threshold: 0,
+        rootMargin: '0px'
+      }
+    );
+    const el = document.querySelector('aboveFold');
+    observer.observe(el);
   </script>
   <ribbons>
     <ribbon>