Add HashRouter to main.tsx and update dependencies

package.json

@@ -11,20 +11,22 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
+		"@types/react-router-dom": "^5.3.3",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"sass": "^1.68.0"
+		"react-router-dom": "^6.21.2",
+		"sass": "^1.69.7"
 	},
 	"devDependencies": {
-		"@types/react": "^18.2.15",
-		"@types/react-dom": "^18.2.7",
-		"@typescript-eslint/eslint-plugin": "^6.0.0",
-		"@typescript-eslint/parser": "^6.0.0",
-		"@vitejs/plugin-react-swc": "^3.3.2",
-		"eslint": "^8.45.0",
+		"@types/react": "^18.2.47",
+		"@types/react-dom": "^18.2.18",
+		"@typescript-eslint/eslint-plugin": "^6.18.1",
+		"@typescript-eslint/parser": "^6.18.1",
+		"@vitejs/plugin-react-swc": "^3.5.0",
+		"eslint": "^8.56.0",
 		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-react-refresh": "^0.4.3",
-		"typescript": "^5.0.2",
-		"vite": "^4.4.5"
+		"eslint-plugin-react-refresh": "^0.4.5",
+		"typescript": "^5.3.3",
+		"vite": "^5.0.11"
 	}
 }

src/App.tsx

@@ -1,24 +1,58 @@
+import { useEffect, useRef } from "react";
 import "@styles/App.scss";
 import Header from "@components/Header";
 import About from "@components/About";
 import ScrollToTop from "@components/ScrollToTop";
 
 export default function App() {
+	const aboutRef = useRef(null);
+	const skillsRef = useRef(null);
+	const projectsRef = useRef(null);
+
+	useEffect(() => {
+		const observer = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						window.location.hash = entry.target.id;
+					}
+				});
+			},
+			{ threshold: 0.7 }
+		);
+
+		if (aboutRef.current) {
+			observer.observe(aboutRef.current);
+		}
+
+		if (skillsRef.current) {
+			observer.observe(skillsRef.current);
+		}
+
+		if (projectsRef.current) {
+			observer.observe(projectsRef.current);
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	}, []);
+
 	return (
 		<div id="app">
 			<Header />
-			<About />
-			<div id="skills">
-				<h4>
-					<a href="#skills">Skills</a>
-				</h4>
-				<h4>
-					<a href="#projects">Projects</a>
-				</h4>
+			<div id="about" ref={aboutRef}>
+				<About />
 			</div>
-			<div style={{ textAlign: "center" }}>
-				<h4>Website under construction 🚧👷</h4>
+
+			<div id="skills" ref={skillsRef}>
+				<h4>Skills</h4>
 			</div>
+
+			<div id="projects" ref={projectsRef} style={{ textAlign: "center" }}>
+				<h4>Projects</h4>
+			</div>
+			<h4>Website under construction 🚧👷</h4>
 			<ScrollToTop />
 		</div>
 	);

src/components/Burger.tsx

@@ -1,18 +1,16 @@
-import { useState } from "react";
 import "@styles/Burger.scss";
 
-export default function Burger({ onClick }: { onClick: () => void }) {
-	const [isOpen, setIsOpen] = useState(false);
-
-	const toggleMenu = () => {
-		setIsOpen(!isOpen);
-	};
-
+export default function Burger({
+	isOpen,
+	onClick,
+}: {
+	isOpen: boolean;
+	onClick: () => void;
+}) {
 	return (
 		<div
 			className={`burger ${isOpen ? "open" : ""}`}
 			onClick={() => {
-				toggleMenu();
 				onClick();
 			}}
 		>

src/components/Header.tsx

@@ -2,10 +2,12 @@ import "@styles/Header.scss";
 import { useState, useEffect } from "react";
 import Burger from "@components/Burger";
 import Sidebar from "@components/Sidebar";
+import { useLocation } from "react-router-dom";
 
 export default function Header() {
 	const [isSmallScreen, setIsSmallScreen] = useState(window.innerWidth <= 768);
 	const [isOpen, setIsOpen] = useState(false);
+	const location = useLocation();
 
 	const toggleSidebar = () => setIsOpen(!isOpen);
 
@@ -27,16 +29,33 @@ export default function Header() {
 
 			{isSmallScreen ? (
 				<>
-					<Burger onClick={toggleSidebar} />
+					<Burger isOpen={isOpen} onClick={toggleSidebar} />
 					<Sidebar isOpen={isOpen} toggle={toggleSidebar} />
 				</>
 			) : (
 				<nav>
-					<a className="current" href="#">
+					<a
+						className={
+							location.pathname === "/about" || location.pathname === "/"
+								? "current"
+								: ""
+						}
+						href="#"
+					>
 						About
 					</a>
-					<a href="#skills">Skills</a>
-					<a href="#projects">Projects</a>
+					<a
+						className={location.pathname === "/skills" ? "current" : ""}
+						href="#skills"
+					>
+						Skills
+					</a>
+					<a
+						className={location.pathname === "/projects" ? "current" : ""}
+						href="#projects"
+					>
+						Projects
+					</a>
 				</nav>
 			)}
 		</div>

src/main.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
+import { HashRouter } from "react-router-dom";
 import "@styles/index.scss";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
-		<App />
+		<HashRouter>
+			<App />
+		</HashRouter>
 	</React.StrictMode>
 );