-
Notifications
You must be signed in to change notification settings - Fork 5
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.
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
Navbar #41
Navbar #41
Conversation
✅ Deploy Preview for srijan-2023 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
package.json
Outdated
@@ -16,6 +16,8 @@ | |||
"dependencies": { | |||
"@vitejs/plugin-react": "^2.2.0", | |||
"aos": "3.0.0-beta.6", | |||
"hamburger-react": "^2.5.0", | |||
"pnpm": "^8.6.3", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why pnpm is added as a project dependency? You were supposed to install it globally.
package-lock.json
Outdated
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why this file is created? package-lock.json
is used by npm, not by pnpm. We already have a pnpm-lock.yaml
file for pnpm.
document.addEventListener("mousedown", handler); | ||
return () => { | ||
document.removeEventListener("mousedown", handler); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I see you have added listeners to the document element here to detect clicks outside of the menu but try to figure out another way where you don't have to use the addEventListener
function as it is not recommended to handle events in this way in react.
src/Components/Navbar/Navbar.jsx
Outdated
const Navbar = () => { | ||
return <nav className={style.navbar}>Navbar</nav>; | ||
const [burger, setBurger] = useState(false); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ambiguous variable name i.e. name does not provide context regarding the purpose of the variable.
src/Components/Navbar/Navbar.jsx
Outdated
useEffect(() => { | ||
if (burger === true) { | ||
document.body.style.height = "100dvh"; | ||
document.body.style.overflow = "hidden"; | ||
} else { | ||
document.body.style.height = ""; | ||
document.body.style.overflow = ""; | ||
} | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
never use useEffect hook without a dependency array as it can lead to unintended execution of code.
Additionally, can you explain why are you updating body styles ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
To fix the body and disable scrolling when the navmenu is active
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK got it, but provide proper useEffect dependencies.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
found use of px units. Replace them with proper, equivalent relative units.
src/Components/Navbar/Navbar.jsx
Outdated
useEffect(() => { | ||
if (burger === true) { | ||
document.body.style.height = "100dvh"; | ||
document.body.style.overflow = "hidden"; | ||
} else { | ||
document.body.style.height = ""; | ||
document.body.style.overflow = ""; | ||
} | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
OK got it, but provide proper useEffect dependencies.
src/Components/Navbar/Navbar.jsx
Outdated
return () => { | ||
document.removeEventListener("mousedown", handler); | ||
}; | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here also provide useEffect dependencies.
package.json
Outdated
@@ -16,6 +16,8 @@ | |||
"dependencies": { | |||
"@vitejs/plugin-react": "^2.2.0", | |||
"aos": "3.0.0-beta.6", | |||
"guidance-grid": "link:", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
why guidance-grid is here ?
// .ham { | ||
// display: block; | ||
// cursor: pointer; | ||
// margin-right: 5rem; | ||
// margin-top: 1.5rem; | ||
// } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
remove commented code.
No description provided.