From 08ab03a2d515a182a4130bcfeac1dc439fffb991 Mon Sep 17 00:00:00 2001
From: Szymon Kin <68154191+hoolek77@users.noreply.github.com>
Date: Mon, 7 Nov 2022 21:16:39 +0100
Subject: [PATCH] Update active sidebar item dynamically on scroll (#79)

---
 src/components/atoms/sidebar-item.tsx         |  4 +--
 .../sections/experience-section.astro         | 12 +++++++-
 .../sections/favorites-section.astro          | 12 +++++++-
 src/components/sections/main-section.astro    |  7 +++--
 .../sections/portfolio-section.astro          | 12 +++++++-
 src/components/sections/skills-section.astro  |  7 +++--
 .../sections/testimonials-section.astro       |  7 +++--
 src/pages/index.astro                         |  6 ++++
 src/scripts/updateHash.ts                     | 28 +++++++++++++++++++
 9 files changed, 84 insertions(+), 11 deletions(-)
 create mode 100644 src/scripts/updateHash.ts

diff --git a/src/components/atoms/sidebar-item.tsx b/src/components/atoms/sidebar-item.tsx
index 289ab38..ce7576c 100644
--- a/src/components/atoms/sidebar-item.tsx
+++ b/src/components/atoms/sidebar-item.tsx
@@ -1,4 +1,4 @@
-import { useHash } from 'react-use';
+import { useLocation } from 'react-use';
 
 import { MAIN_SECTION } from '@/constants/section';
 import type { Section } from '@/types/data';
@@ -12,7 +12,7 @@ export interface Props {
 }
 
 const SidebarItem = ({ section, icon }: Props) => {
-  const [hash] = useHash();
+  const { hash } = useLocation();
   const href = `#${section}`;
 
   const active = hash === '' ? section === MAIN_SECTION : hash === href;
diff --git a/src/components/sections/experience-section.astro b/src/components/sections/experience-section.astro
index a386bfe..41d2238 100644
--- a/src/components/sections/experience-section.astro
+++ b/src/components/sections/experience-section.astro
@@ -1,8 +1,18 @@
 ---
 import SectionCard from '@/atoms/section-card.astro';
+import Typography from '@/atoms/typography.astro';
+import type { Section } from '@/types/data';
 import type { ExperienceSection } from '@/types/experience-section';
 
 export interface Props extends ExperienceSection {}
+
+const {
+  config: { title },
+} = Astro.props;
+
+const section: Section = 'experience';
 ---
 
-<SectionCard section="experience">Experience section</SectionCard>
+<SectionCard section={section}
+  ><Typography variant="section-title" id={`${section}-heading`}>{title}</Typography>
+</SectionCard>
diff --git a/src/components/sections/favorites-section.astro b/src/components/sections/favorites-section.astro
index 62da0b5..3c97766 100644
--- a/src/components/sections/favorites-section.astro
+++ b/src/components/sections/favorites-section.astro
@@ -1,8 +1,18 @@
 ---
 import SectionCard from '@/atoms/section-card.astro';
+import Typography from '@/atoms/typography.astro';
+import type { Section } from '@/types/data';
 import type { FavoritesSection } from '@/types/favorites-section';
 
 export interface Props extends FavoritesSection {}
+
+const {
+  config: { title },
+} = Astro.props;
+
+const section: Section = 'favorites';
 ---
 
-<SectionCard section="favorites">Favorites section</SectionCard>
+<SectionCard section={section}
+  ><Typography variant="section-title" id={`${section}-heading`}>{title}</Typography>
+</SectionCard>
diff --git a/src/components/sections/main-section.astro b/src/components/sections/main-section.astro
index 63fa703..0508b1e 100644
--- a/src/components/sections/main-section.astro
+++ b/src/components/sections/main-section.astro
@@ -6,6 +6,7 @@ import IconButton from '@/atoms/icon-button.astro';
 import SectionCard from '@/atoms/section-card.astro';
 import Tag from '@/atoms/tag.astro';
 import Typography from '@/atoms/typography.astro';
+import type { Section } from '@/types/data';
 import type { MainSection } from '@/types/main-section';
 
 export interface Props extends MainSection {}
@@ -20,9 +21,11 @@ const {
   action: { label, url, downloadedFileName },
   tags,
 } = Astro.props;
+
+const section: Section = 'main';
 ---
 
-<SectionCard section="main">
+<SectionCard section={section}>
   <div class:list={['flex', 'gap-6', 'flex-col', 'sm:flex-row', 'items-start']}>
     <div class:list={['flex', 'sm:flex-col', 'gap-4', 'items-center']}>
       <Image
@@ -35,7 +38,7 @@ const {
     <div class:list={['w-full', 'flex', 'flex-col', 'gap-5']}>
       <div class:list={['w-full', 'flex', 'flex-col', 'sm:flex-row', 'justify-between', 'gap-2']}>
         <div class:list={['w-full']}>
-          <Typography variant="main-title">{fullName}</Typography>
+          <Typography variant="main-title" id={`${section}-heading`}>{fullName}</Typography>
           <Typography variant="main-subtitle">{role}</Typography>
         </div>
         {
diff --git a/src/components/sections/portfolio-section.astro b/src/components/sections/portfolio-section.astro
index dd12910..8f9d557 100644
--- a/src/components/sections/portfolio-section.astro
+++ b/src/components/sections/portfolio-section.astro
@@ -1,8 +1,18 @@
 ---
 import SectionCard from '@/atoms/section-card.astro';
+import Typography from '@/atoms/typography.astro';
+import type { Section } from '@/types/data';
 import type { PortfolioSection } from '@/types/portfolio-section';
 
 export interface Props extends PortfolioSection {}
+
+const {
+  config: { title },
+} = Astro.props;
+
+const section: Section = 'portfolio';
 ---
 
-<SectionCard section="portfolio">Portfolio section</SectionCard>
+<SectionCard section={section}
+  ><Typography variant="section-title" id={`${section}-heading`}>{title}</Typography>
+</SectionCard>
diff --git a/src/components/sections/skills-section.astro b/src/components/sections/skills-section.astro
index fc7cfc7..b5ee281 100644
--- a/src/components/sections/skills-section.astro
+++ b/src/components/sections/skills-section.astro
@@ -2,6 +2,7 @@
 import SectionCard from '@/atoms/section-card.astro';
 import Typography from '@/atoms/typography.astro';
 import SkillSubsection from '@/organisms/skill-subsection.astro';
+import type { Section } from '@/types/data';
 import type { SkillsSection } from '@/types/skills-section';
 
 export interface Props extends SkillsSection {}
@@ -10,10 +11,12 @@ const {
   config: { title },
   skillSets,
 } = Astro.props;
+
+const section: Section = 'skills';
 ---
 
-<SectionCard section="skills">
-  <Typography variant="section-title">{title}</Typography>
+<SectionCard section={section}>
+  <Typography variant="section-title" id={`${section}-heading`}>{title}</Typography>
   <div class:list={['flex', 'flex-col', 'gap-10']}>
     {skillSets.map((skillSet) => <SkillSubsection skillSet={skillSet} />)}
   </div>
diff --git a/src/components/sections/testimonials-section.astro b/src/components/sections/testimonials-section.astro
index a366ec3..1e1d13d 100644
--- a/src/components/sections/testimonials-section.astro
+++ b/src/components/sections/testimonials-section.astro
@@ -3,6 +3,7 @@ import Divider from '@/atoms/divider.astro';
 import SectionCard from '@/atoms/section-card.astro';
 import Typography from '@/atoms/typography.astro';
 import Testimonial from '@/organisms/testimonial.astro';
+import type { Section } from '@/types/data';
 import type { TestimonialsSection } from '@/types/testimonials-section';
 
 export interface Props extends TestimonialsSection {}
@@ -11,10 +12,12 @@ const {
   testimonials,
   config: { title },
 } = Astro.props;
+
+const section: Section = 'testimonials';
 ---
 
-<SectionCard section="testimonials">
-  <Typography variant="section-title">{title}</Typography>
+<SectionCard section={section}>
+  <Typography variant="section-title" id={`${section}-heading`}>{title}</Typography>
   <div class:list={['flex', 'flex-col']}>
     {
       testimonials.map((testimonial, index) => (
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f56f763..672c126 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -46,4 +46,10 @@ const { seo, ...dataWithoutSeo } = data;
       </main>
     </div>
   </body>
+  <script>
+    import updateHash from '../scripts/updateHash';
+    import data from '../data';
+
+    document.addEventListener('scroll', () => updateHash(data));
+  </script>
 </html>
diff --git a/src/scripts/updateHash.ts b/src/scripts/updateHash.ts
new file mode 100644
index 0000000..fa44b77
--- /dev/null
+++ b/src/scripts/updateHash.ts
@@ -0,0 +1,28 @@
+import type { Data } from '@/types/data';
+
+const updateHash = (data: Data) => {
+  const { seo, ...dataWithoutSeo } = data;
+
+  const distancesToHeadingBottom = Object.keys(dataWithoutSeo)
+    .flatMap((section) => {
+      const sectionWrapper = document.getElementById(`${section}-heading`);
+
+      if (!sectionWrapper) return [];
+
+      const { bottom } = sectionWrapper.getBoundingClientRect();
+
+      return {
+        section,
+        bottom,
+      };
+    })
+    .filter((section) => section.bottom > 0);
+
+  const currentSection = distancesToHeadingBottom.reduce((previous, current) =>
+    previous.bottom < current.bottom ? previous : current
+  );
+
+  window.history.pushState({}, '', `${window.location.pathname}#${currentSection.section}`);
+};
+
+export default updateHash;