diff --git a/.gitignore b/.gitignore index 4d29575..8b91dda 100644 --- a/.gitignore +++ b/.gitignore @@ -17,7 +17,7 @@ .env.development.local .env.test.local .env.production.local - +.idea npm-debug.log* yarn-debug.log* yarn-error.log* diff --git a/package-lock.json b/package-lock.json index 00cdc7d..3da5221 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "ionicons": "^7.4.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router-dom": "^6.26.1", + "react-router-dom": "^6.26.2", "react-scripts": "^5.0.1", "react-typing-effect": "^2.0.5", "web-vitals": "^2.1.4" diff --git a/package.json b/package.json index 392acb7..4f40661 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "ionicons": "^7.4.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "react-router-dom": "^6.26.1", + "react-router-dom": "^6.26.2", "react-scripts": "^5.0.1", "react-typing-effect": "^2.0.5", "web-vitals": "^2.1.4" diff --git a/src/App.js b/src/App.js index 6e5d209..1fd42c1 100644 --- a/src/App.js +++ b/src/App.js @@ -5,7 +5,9 @@ import './style.css'; import './script.js'; import './preloader.js'; import './TopBar.js'; +import {BrowserRouter as Router, Route, Routes} from "react-router-dom"; import Modal from './Modal'; +import Services from "./Pages/Services/Services"; function App() { @@ -13,7 +15,12 @@ function App() {
- + + + } /> + } /> + +
); diff --git a/src/Navbar.js b/src/Navbar.js index db303fb..15a0a37 100644 --- a/src/Navbar.js +++ b/src/Navbar.js @@ -1,5 +1,6 @@ import React, { useState, useEffect } from 'react'; import Modal from './Modal'; // Import the modal component +import {useLocation} from "react-router-dom"; function Navbar() { const [prevScrollPos, setPrevScrollPos] = useState(window.scrollY); @@ -8,6 +9,8 @@ function Navbar() { const [isMenuOpen, setIsMenuOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false); // Modal state + const location = useLocation(); + useEffect(() => { const handleScroll = () => { const currentScrollPos = window.scrollY; @@ -26,6 +29,17 @@ function Navbar() { return () => window.removeEventListener('scroll', handleScroll); }, [prevScrollPos]); + // for scrolling smoothly to each relevant section in home page + useEffect(() =>{ + if(location.hash){ + const sectionId = location.hash.replace("#",""); + const section = document.getElementById(sectionId); + if(section){ + section.scrollIntoView({behavior: 'smooth'}); + } + } + },[location]); + const toggleMenu = () => { setIsMenuOpen(!isMenuOpen); }; @@ -35,6 +49,9 @@ function Navbar() { setIsModalOpen(!isModalOpen); }; + const isHomeOpen = location.pathname === '/'; + const isServicesOpen = location.pathname === '/services'; + return ( <>
+