Skip to content

Fixed #53 #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adab786 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fixed #53 #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7565f16
Update NavBar.js
adab786 Aug 28, 2024
7168e28
Fixed #53
adab786 Aug 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 11 additions & 8 deletions personal-portfolio/src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { BrowserRouter as Router } from "react-router-dom"; // Import Router
import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
Expand All @@ -10,14 +11,16 @@ import { Footer } from "./components/Footer";

function App() {
return (
<div className="App">
<NavBar />
<Banner />
<Skills />
<Projects />
<Contact />
<Footer />
</div>
<Router> {/* Wrap with Router */}
<div className="App">
<NavBar />
<Banner />
<Skills />
<Projects />
<Contact />
<Footer />
</div>
</Router>
);
}

Expand Down
95 changes: 51 additions & 44 deletions personal-portfolio/src/components/NavBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,62 +5,69 @@ import navIcon1 from '../assets/img/nav-icon1.svg';
import navIcon2 from '../assets/img/nav-icon2.svg';
import navIcon3 from '../assets/img/nav-icon3.svg';
import { HashLink } from 'react-router-hash-link';
import {
BrowserRouter as Router
} from "react-router-dom";

export const NavBar = () => {

const [activeLink, setActiveLink] = useState('home');
const [scrolled, setScrolled] = useState(false);

useEffect(() => {
const onScroll = () => {
if (window.scrollY > 50) {
setScrolled(true);
} else {
setScrolled(false);
}
}
setScrolled(window.scrollY > 50);
};

window.addEventListener("scroll", onScroll);

return () => window.removeEventListener("scroll", onScroll);
}, [])
}, []);

const onUpdateActiveLink = (value) => {
setActiveLink(value);
}
};

return (
<Router>
<Navbar expand="md" className={scrolled ? "scrolled" : ""}>
<Container>
<Navbar.Brand href="/">
<img src={logo} alt="Logo" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav">
<span className="navbar-toggler-icon"></span>
</Navbar.Toggle>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ms-auto">
<Nav.Link href="#home" className={activeLink === 'home' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('home')}>Home</Nav.Link>
<Nav.Link href="#skills" className={activeLink === 'skills' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('skills')}>Skills</Nav.Link>
<Nav.Link href="#projects" className={activeLink === 'projects' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('projects')}>Projects</Nav.Link>
</Nav>
<span className="navbar-text">
<div className="social-icon">
<a href="#"><img src={navIcon1} alt="" /></a>
<a href="#"><img src={navIcon2} alt="" /></a>
<a href="#"><img src={navIcon3} alt="" /></a>
</div>
<HashLink to='#connect'>
<button className="vvd"><span>Let’s Connect</span></button>
</HashLink>
</span>
</Navbar.Collapse>
</Container>
</Navbar>
</Router>
)
}
<Navbar expand="md" className={scrolled ? "scrolled" : ""}>
<Container>
<Navbar.Brand href="/">
<img src={logo} alt="Logo" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav">
<span className="navbar-toggler-icon"></span>
</Navbar.Toggle>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ms-auto">
<Nav.Link
href="#home"
className={activeLink === 'home' ? 'active navbar-link' : 'navbar-link'}
onClick={() => onUpdateActiveLink('home')}
>
Home
</Nav.Link>
<Nav.Link
href="#skills"
className={activeLink === 'skills' ? 'active navbar-link' : 'navbar-link'}
onClick={() => onUpdateActiveLink('skills')}
>
Skills
</Nav.Link>
<Nav.Link
href="#projects"
className={activeLink === 'projects' ? 'active navbar-link' : 'navbar-link'}
onClick={() => onUpdateActiveLink('projects')}
>
Projects
</Nav.Link>
</Nav>
<span className="navbar-text">
<div className="social-icon">
<a href="#"><img src={navIcon1} alt="" /></a>
<a href="#"><img src={navIcon2} alt="" /></a>
<a href="#"><img src={navIcon3} alt="" /></a>
</div>
<HashLink to='#connect'>
<button className="vvd"><span>Let’s Connect</span></button>
</HashLink>
</span>
</Navbar.Collapse>
</Container>
</Navbar>
);
};