Skip to content
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

Merged
merged 17 commits into from
Aug 28, 2023
Merged

Navbar #41

merged 17 commits into from
Aug 28, 2023

Conversation

Vivek-68
Copy link
Contributor

@Vivek-68 Vivek-68 commented Apr 5, 2023

No description provided.

@netlify
Copy link

netlify bot commented Apr 5, 2023

Deploy Preview for srijan-2023 ready!

Name Link
🔨 Latest commit df4dab9
🔍 Latest deploy log https://app.netlify.com/sites/srijan-2023/deploys/64eb8f06b7dd8900087ab64c
😎 Deploy Preview https://deploy-preview-41--srijan-2023.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Vivek-68 Vivek-68 requested a review from codadept June 18, 2023 12:55
Copy link
Collaborator

@JOSU9435 JOSU9435 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Style the close button properly as it is looking weird in this window size.

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",
Copy link
Collaborator

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.

Copy link
Collaborator

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.

Comment on lines +26 to +28
document.addEventListener("mousedown", handler);
return () => {
document.removeEventListener("mousedown", handler);
Copy link
Collaborator

@JOSU9435 JOSU9435 Aug 15, 2023

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.

const Navbar = () => {
return <nav className={style.navbar}>Navbar</nav>;
const [burger, setBurger] = useState(false);
Copy link
Collaborator

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.

Comment on lines 32 to 40
useEffect(() => {
if (burger === true) {
document.body.style.height = "100dvh";
document.body.style.overflow = "hidden";
} else {
document.body.style.height = "";
document.body.style.overflow = "";
}
});
Copy link
Collaborator

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 ?

Copy link
Contributor Author

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

Copy link
Collaborator

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.

Copy link
Collaborator

@JOSU9435 JOSU9435 Aug 15, 2023

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.

Comment on lines 32 to 40
useEffect(() => {
if (burger === true) {
document.body.style.height = "100dvh";
document.body.style.overflow = "hidden";
} else {
document.body.style.height = "";
document.body.style.overflow = "";
}
});
Copy link
Collaborator

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.

return () => {
document.removeEventListener("mousedown", handler);
};
});
Copy link
Collaborator

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.

@Vivek-68 Vivek-68 requested a review from JOSU9435 August 21, 2023 16:42
package.json Outdated
@@ -16,6 +16,8 @@
"dependencies": {
"@vitejs/plugin-react": "^2.2.0",
"aos": "3.0.0-beta.6",
"guidance-grid": "link:",
Copy link
Collaborator

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 ?

Comment on lines 79 to 84
// .ham {
// display: block;
// cursor: pointer;
// margin-right: 5rem;
// margin-top: 1.5rem;
// }
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove commented code.

@hereisadi hereisadi requested a review from JOSU9435 August 28, 2023 05:10
@hereisadi hereisadi merged commit f75479b into Ecell-NITS:dev Aug 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants