From 11937b50ce0bff7bcf38ab44337e9959cee503bb Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Fri, 23 Aug 2024 20:54:16 -0400 Subject: [PATCH 1/4] chore: Change Navbar links --- src/Components/Data/navbarLinks.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Components/Data/navbarLinks.ts b/src/Components/Data/navbarLinks.ts index 5b1333b..cb166bf 100644 --- a/src/Components/Data/navbarLinks.ts +++ b/src/Components/Data/navbarLinks.ts @@ -1,6 +1,6 @@ export const links = [ - { path: '/', label: 'HOME' }, - { path: '/about', label: 'ABOUT' }, - { path: '/projects', label: 'PROJECTS' }, - { path: '/stats', label: 'STATS' }, + { id: 'hero', label: 'HOME' }, + { id: 'projects', label: 'PROJECTS' }, + { id: 'stats', label: 'STATS' }, + { id: 'about', label: 'ABOUT' }, ]; From 564d8c4741f831fe52daf86b7401a5e7278d8a16 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Fri, 23 Aug 2024 20:57:13 -0400 Subject: [PATCH 2/4] feat: Navbar links to content elements --- src/App.scss | 4 ++++ src/Components/Content/Content.tsx | 10 ++++++++-- src/Components/Navbar/Navbar.tsx | 9 ++++----- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/App.scss b/src/App.scss index a3f548a..4833d16 100644 --- a/src/App.scss +++ b/src/App.scss @@ -4,6 +4,10 @@ $scrollbar-thumb-color: #8cbc9158; $scrollbar-thumb-hover-color: #5f7167; $background-color: #27302b; +html { + scroll-behavior: smooth; +} + body { background-color: $background-color; } diff --git a/src/Components/Content/Content.tsx b/src/Components/Content/Content.tsx index f3afc7e..d4d4c71 100644 --- a/src/Components/Content/Content.tsx +++ b/src/Components/Content/Content.tsx @@ -8,10 +8,16 @@ import './Content.scss'; const Content: React.FC = () => { return (
- -
+
+ +
+
+
+
+
+
diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx index 1556634..1a7c8cb 100644 --- a/src/Components/Navbar/Navbar.tsx +++ b/src/Components/Navbar/Navbar.tsx @@ -1,5 +1,4 @@ import React, { useState } from 'react'; -import { NavLink } from 'react-router-dom'; import { FaBars, FaTimes } from 'react-icons/fa'; import { links } from '../Data/navbarLinks'; import './Navbar.scss'; @@ -19,14 +18,14 @@ const Navbar: React.FC = () => {
{links.map((link, index) => ( - setMenuOpen(false)} > {link.label} - + ))}
From c0fbd5cadb75fd4992328e7b90fe57e601ad9ef5 Mon Sep 17 00:00:00 2001 From: carsonSgit <92652800+carsonSgit@users.noreply.github.com> Date: Fri, 23 Aug 2024 21:09:27 -0400 Subject: [PATCH 3/4] feat: Navbar scrolls to content --- src/App.scss | 4 ---- src/Components/Navbar/Navbar.tsx | 11 ++++++++++- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/App.scss b/src/App.scss index 4833d16..a3f548a 100644 --- a/src/App.scss +++ b/src/App.scss @@ -4,10 +4,6 @@ $scrollbar-thumb-color: #8cbc9158; $scrollbar-thumb-hover-color: #5f7167; $background-color: #27302b; -html { - scroll-behavior: smooth; -} - body { background-color: $background-color; } diff --git a/src/Components/Navbar/Navbar.tsx b/src/Components/Navbar/Navbar.tsx index 1a7c8cb..5684d5c 100644 --- a/src/Components/Navbar/Navbar.tsx +++ b/src/Components/Navbar/Navbar.tsx @@ -10,6 +10,15 @@ const Navbar: React.FC = () => { setMenuOpen(!menuOpen); }; + const handleLinkClick = (event: React.MouseEvent, id: string) => { + event.preventDefault(); + const element = document.getElementById(id); + if (element) { + element.scrollIntoView({ behavior: 'smooth' }); + } + setMenuOpen(false); + }; + return (