Skip to content

Commit

Permalink
Mobile navbar working
Browse files Browse the repository at this point in the history
  • Loading branch information
@akshay-rajan
akshay-rajan committed Aug 11, 2024
1 parent 6fd9c51 commit 1f0def9
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 81 deletions.
9 changes: 2 additions & 7 deletions src/components/Hamburger.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,10 @@ import React, { useState } from 'react';

import "../styles/Hamburger.css";

export default function Hamburger() {
const [open, setOpen] = useState(false);

const toggleOpen = () => {
setOpen(!open);
};
export default function Hamburger({ isOpen, toggle }) {

return (
<div id="nav-icon2" className={open ? 'open' : ''} onClick={toggleOpen}>
<div id="nav-icon2" className={isOpen ? 'open' : ''} onClick={toggle}>
<span></span>
<span></span>
<span></span>
Expand Down
141 changes: 79 additions & 62 deletions src/components/Header.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,11 @@ import Hamburger from './Hamburger';

export default function Header() {

const [isOpen, setIsOpen] = useState(true);
const [isOpen, setIsOpen] = useState(false);

// Handle hamburger menu toggle
const toggleNavbar = () => {
document.body.style.overflow = isOpen ? 'auto' : 'hidden';
setIsOpen(!isOpen);
};

Expand All @@ -28,13 +30,16 @@ export default function Header() {
};
}, []);

const iconStyle = {
verticalAlign: 'sub',
};

return (
<div className="myheader" id="nav">

<div className="head-container">
<nav className="mynavbar" style={window.innerWidth < 798 ? {display: 'none'} : {}}>
<ul className="navigation-links">
{}
<li>
<Link
to=""
Expand All @@ -44,7 +49,7 @@ export default function Header() {
id="home-button"
onClick={() => scroll.scrollToTop()}
>
<Home style={{verticalAlign: 'sub'}} />
<Home style={iconStyle} />
<div className="help">Home</div>
</Link>
</li>
Expand All @@ -56,7 +61,7 @@ export default function Header() {
offset={aboutOffset}
id="about-button"
>
<Info style={{verticalAlign: 'sub'}} />
<Info style={iconStyle} />
<div className="help">About Me</div>
</Link>
</li>
Expand All @@ -68,7 +73,7 @@ export default function Header() {
offset={20}
id="projects-button"
>
<Engineering style={{verticalAlign: 'sub'}} />
<Engineering style={iconStyle} />
<div className="help">Projects</div>
</Link>
</li>
Expand All @@ -80,7 +85,7 @@ export default function Header() {
offset={20}
id="experience-button"
>
<Work style={{verticalAlign: 'sub'}} />
<Work style={iconStyle} />
<div className="help">Experience</div>
</Link>
</li>
Expand All @@ -92,70 +97,82 @@ export default function Header() {
offset={20}
id="contact-button"
>
<Contacts style={{verticalAlign: 'sub'}} />
<Contacts style={iconStyle} />
<div className="help">Contact Me</div>
</Link>
</li>
</ul>
</nav>

<span className="hamburger-icon" onClick={toggleNavbar}>
<Hamburger />
<span className="hamburger-icon">
<Hamburger isOpen={isOpen} toggle={toggleNavbar} />
</span>

{/* <div className={`mobile-navbar ${isOpen ? 'open' : ''}`} style={window.innerWidth < 798 && {display: 'block'}}>
<span className="closebtn" onClick={toggleNavbar}>&times;</span>
<Link
to=""
smooth={true}
duration={800}
offset={-70}
id="home-button"
onClick={() => { scroll.scrollToTop(); toggleNavbar(); }}
>
<Home />
</Link>
<Link
to="about"
smooth={true}
duration={800}
offset={10}
id="about-button"
onClick={toggleNavbar}
>
<Info />
</Link>
<Link
to="projects"
smooth={true}
duration={800}
offset={20}
id="projects-button"
onClick={toggleNavbar}
>
<Engineering />
</Link>
<Link
to="experience"
smooth={true}
duration={800}
offset={20}
id="experience-button"
onClick={toggleNavbar}
>
<Work />
</Link>
<Link
to="contact"
smooth={true}
duration={800}
offset={20}
id="contact-button"
onClick={toggleNavbar}
>
<Message />
</Link>
</div> */}
<div className={`mobile-navbar ${isOpen ? 'open' : ''}`}>
<ul>
<li>
<Link
to=""
smooth={true}
duration={800}
offset={-70}
id="home-button"
onClick={() => { scroll.scrollToTop(); toggleNavbar(); }}
>
<Home style={iconStyle} /> <div className="help">Home</div>
</Link>
</li>
<li>
<Link
to="about"
smooth={true}
duration={800}
offset={10}
id="about-button"
onClick={toggleNavbar}
>
<Info style={iconStyle} /> <div className="help">About Me</div>
</Link>
</li>
<li>
<Link
to="projects"
smooth={true}
duration={800}
offset={20}
id="projects-button"
onClick={toggleNavbar}
>
<Engineering style={iconStyle} /> <div className="help">Projects</div>
</Link>
</li>
<li>
<Link
to="experience"
smooth={true}
duration={800}
offset={20}
id="experience-button"
onClick={toggleNavbar}
>
<Work style={iconStyle} /> <div className="help">Experience</div>
</Link>
</li>
<li>
<Link
to="contact"
smooth={true}
duration={800}
offset={20}
id="contact-button"
onClick={toggleNavbar}
>
<Contacts style={iconStyle} /> <div className="help">Contact Me</div>
</Link>
</li>
</ul>
</div>

</div>
</div>
);
Expand Down
46 changes: 34 additions & 12 deletions src/styles/Header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,10 @@
text-decoration: none;
}

.mobile-navbar {
display: none;
}

@media screen and (max-width: 798px) {
.mynavbar {
display: none;
Expand All @@ -202,18 +206,36 @@
margin-top: 5px;
padding: 0;
}
/*
.navigation-links {
z-index: 100;
position: fixed;
display: none;
flex-direction: column;
width: 100%;
text-align: center;
.mobile-navbar.open {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
top: 0; /* Ensure it starts from the top */
left: 0; /* Ensure it starts from the left */
right: 0; /* Ensure it stretches to the right */
bottom: 0; /* Ensure it stretches to the bottom */
width: 100%; /* Ensure full width */
height: 100%; /* Ensure full height */
z-index: 2;
background-color: rgba(0, 0, 0, 0.9);
}
.navigation-links.active {
text-decoration: underline;
.mobile-navbar.open ul li {
display: flex;
} */
justify-content: center;
align-items: center;
margin: 20px;
width: 200px;
height: 50px;
border-radius: 15px;
background-color: wheat;
color: black;
}
.mobile-navbar.open div {
display: inline-flex;
}
.mobile-navbar.open ul li a {
color: black;
font-size: 17px;
}
}

0 comments on commit 1f0def9

Please sign in to comment.