Modifications I Made in Astro-erudite v1.6.0

This site is based from astro-erudite’s v1.6.0 release, which I made some modifications to fit my personal taste and preferences. You would notice that I kept the original features, UX, and styles, but tweaked a few things here and there.

Navigation

The initial look of the navigation header is meant to fit the bento style of the landing page.

Then when you navigate through the pages it will transition into the default style of navigations where it sticks to the top.

This changing style of navigation header is to give more consistent experience between the landing page and the posts, while not compromising the aesthetic and the site’s usability.

The Logic

The script only runs a function that initially checks if the user is on the landing or homepage, which is where the grid or bento style is.

50
<script>
51
  function initHeaderScroll() {
52
    const header = document.getElementById('main-header');
53
    const isHomePage = header?.getAttribute('data-home-page') === 'true';
54

55
    if (isHomePage) {
56
      const scrollThreshold = 100;
57

58
      function handleScroll() {
59
        const currentScrollY = window.scrollY;
60

61
        if (currentScrollY > scrollThreshold) {
62
          header?.classList.remove('-translate-y-full');
63
        } else {
64
          header?.classList.add('-translate-y-full');
65
        }
66
      }
67

68
      handleScroll();
69
      window.addEventListener('scroll', handleScroll, { passive: true });
70
    }
71
  }
72

73
  initHeaderScroll();
74
  document.addEventListener('astro:page-load', initHeaderScroll);
75
</script>

Then, when the user scrolls down past a certain threshold (100 pixels in this case), the header becomes visible by removing the -translate-y-full class, which is responsible for hiding it off-screen.

When the user scrolls back up to the top of the page, the header hides again by adding the same class back. To be continued… (Still writing the other parts, antok na ‘ko).