fix: Ditched react-page-scroll

package.json

@@ -25,7 +25,6 @@
     "lucide-react": "^0.252.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-page-scroll": "^1.0.6",
     "react-router-dom": "^6.21.2",
     "vite-plugin-svgr": "^3.2.0"
   },

src/components/Hero.jsx

@@ -4,7 +4,7 @@ import 'styles/components/hero.css'
 
 const Hero = () => {
 	return (
-		<div className="hero__hero">
+		<div id="hero" className="hero__hero">
 			<h1 className="hero__headline">
 				Komunitas Game Developer<br/>
 				Godot Engine #1 di Indonesia

src/components/Misi.jsx

@@ -5,7 +5,7 @@ import 'styles/components/visimisi.css'
 
 const Hero = () => {
 	return (
-		<div className="visimisi__main">
+		<div id="misi" className="visimisi__main">
 			<h2 className="visimisi__header">
 				Misi
 			</h2>

src/components/Profil.jsx

@@ -5,7 +5,7 @@ import godotidjpg from 'misc/imgs/godot_indonesia.jpg'
 
 const Profil = () => {
 	return (
-		<div className="profil__main">
+		<div id="profil" className="profil__main">
 			<div className="profil__left">
 				<h2 className="profil__header">
 					Profil Godot Indonesia

src/components/Visi.jsx

@@ -5,7 +5,7 @@ import 'styles/components/visimisi.css'
 
 const Hero = () => {
 	return (
-		<div className="visimisi__main">
+		<div id="visi" className="visimisi__main">
 			<h2 className="visimisi__header">
 				Visi
 			</h2>

src/pages/index.jsx

@@ -1,6 +1,4 @@
-import { useRef, useState } from 'react';
-import PageScroll from 'react-page-scroll'
-import { redirect } from 'react-router-dom'
+import { useEffect, useState } from 'react';
 
 import 'styles/homepage.css'
 
@@ -11,18 +9,22 @@ import Visi from 'components/Visi'
 import Misi from 'components/Misi'
 import Profil from 'components/Profil'
 
-const hashes = ['hero', 'visi', 'misi', 'profil'];
-
 const Homepage = () => {
 	let [progress, setProgress] = useState("0%");
-	function handleScroll({ targetIndex }) {
-		// Excluding <Hero />
-		// TODO: Algorithmically get sectionCount
-		const sectionCount = 3;
 
-		setProgress(Math.ceil(targetIndex/sectionCount*100) + '%');
+	function handleScroll() {
+        const homepage = document.getElementById('homepage');
+        const scrollProgress = document.body.scrollTop / (homepage.scrollHeight - document.body.clientHeight) * 100;
+		setProgress(scrollProgress + '%');
 	}
 
+    function scrollTo(sectionName) {
+        let section = document.getElementById(sectionName);
+        if (section) {
+            section.scrollIntoView({ behavior: 'smooth' });
+        }
+    }
+
     function handleHashes() {
         let hashval = window.location.hash.substr(1);
         let searchArray = [...hashval.split('?'), ''][1].split('&').map(x => x.split('=', 2));
@@ -34,28 +36,27 @@ const Homepage = () => {
         if (!search['content']) search['content'] = 'hero';
         scrollTo(hashes.indexOf(search['content']));
     }
-	let scrollTo = undefined;
-	function handleScrollInit({ scrollControl }) {
-		scrollTo = scrollControl.scrollTo.bind(scrollControl);
-
-		if (window.location.hash.substr(1)) {
+
+    useEffect(() => {
+		if (window.location.hash.substring(1)) {
             handleHashes();
 		}
 
+        window.addEventListener('scroll', handleScroll);
 		window.addEventListener('hashchange', handleHashes);
-	}
+	}, []);
 
 	return (
-		<div className="homepage__homepage">
+		<div id="homepage" className="homepage__homepage">
 			<NavBar/>
 			<div className="homepage__content">
 				<Sidebar progress={progress} />
-				<PageScroll className="homepage__main" onScrollStart={handleScroll} onScrollInit={handleScrollInit}>
+				<div className="homepage__main">
 					<Hero />
 					<Visi />
 					<Misi />
 					<Profil />
-				</PageScroll>
+				</div>
 			</div>
 		</div>
 	);

src/styles/components/navbar.css

@@ -6,7 +6,8 @@
     border-radius: var(--border-radius-2);
 
 	display: flex;
-	position: absolute;
+	position: fixed;
+    top: 0;
 	z-index: 1;
 }
 

src/styles/components/sidebar.css

@@ -1,5 +1,7 @@
 .sidebar__wrapper {
-	position: relative;
+	position: fixed;
+    top: 0;
+    left: 0;
 	display: flex;
 	flex-direction: column-reverse;
 	z-index: 2;
@@ -15,7 +17,6 @@
 	width: 100%;
 	background: var(--primary-text);
     border-radius: var(--border-radius-2);
-	transition: 1s;
 	overflow: hidden;
 	position: relative;
 }

src/styles/general.css

@@ -1,3 +1,7 @@
+html, body, #root {
+    height: 100%;
+}
+
 body {
 	margin: 0;
 	min-height: 100vh;

src/styles/homepage.css

@@ -1,5 +1,5 @@
 .homepage__homepage {
-	height: 100%;
+    height: min-content;
 	background-image: radial-gradient(
         75% 75% at 68% 71%,
         #3DA42C10 0%,
@@ -19,7 +19,6 @@
 }
 
 .homepage__main {
-	overflow: hidden;
 	width: 100%;
 	height: 100%;
 	/* border-right: 1px solid var(--border-soft); */