Create Mobile Toggle Menu with JavaScript by Ol-create · Pull Request #9 · Ol-create/Mobile-Project2.0

Ol-create · 2022-03-08T17:28:13Z

Initialize toggle menu in dom.js
Create a show function for the toggle menu.
Create hide function for toggle menu.
Link menu option to a specific section on the portfolio page.
Add a close button icon.
Add eventListeners to close and openMenu buttons.

thecodechaser

STATUS: CHANGES REQUIRED ♻️

Hi @Ol-create 👋,

Good job so far!
There are some issues that you still need to work on to go to the next project but you are almost there!

To Highlight 🎉

No linter errors. ✔️
GitHub flow is followed. ✔️
Professional README file. ✔️
PR has a good title and summary. ✔️

Required Changes ♻️

Check the comments under the review.

Optional suggestions

Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.

You can also consider:
N/A

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

thecodechaser · 2022-03-10T14:21:29Z

            <nav id="navbar">
                <p id="profileName"><a href="#"> Paul, Oluyemi</a></p>
                <ul id="desktop-nav">


You did a good job on the project, but there is a little issue. You are supposed to the figma design as much as possible, Right now your header doesn't contain 100% of the width and there is white space to the right side, Please make sure your header contains 100% of the width and it matches the design on the template.

Your design

Figma design

thecodechaser · 2022-03-10T14:23:33Z

            <nav id="navbar">
                <p id="profileName"><a href="#"> Paul, Oluyemi</a></p>
                <ul id="desktop-nav">


Your mobile-menu pop-up have some margin from the bottom and from the right, Please make sure it contains 100% width and height of the window and matches the design on the template.

Your design

Figma design

thecodechaser · 2022-03-10T14:26:09Z

            <nav id="navbar">
                <p id="profileName"><a href="#"> Paul, Oluyemi</a></p>
                <ul id="desktop-nav">


Your close X button color is different from the design, Please make sure you apply the correct color and it matches the design.

Your mobile menu options should be bold as on the design, Please use bold font for your mobile menu options and make sure it matches the design on the template.

Your design

Figma design

thecodechaser · 2022-03-10T14:29:29Z

            <nav id="navbar">
                <p id="profileName"><a href="#"> Paul, Oluyemi</a></p>
                <ul id="desktop-nav">


When I open the mobile menu and switch to the desktop screen the mobile menu is still on the screen it should disappear. Please make sure when we switch the screen from mobile to desktop the mobile menu should disappear.

You can use media queries for that if the screen cross the min-width you can set your mobile menu display: none

See the image for reference

elmar8287

Hi, @Ol-create.

Great work on making the changes requested by a previous reviewer 👏
You've done well implementing some of the requested changes, but there are still some which aren't addressed yet.

Required Changes ♻️

Check the comments under the review.

Optional suggestions

N/A

Every comment with the [OPTIONAL] prefix won't stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better. Some of them were simply missed by the previous reviewer and addressing them will really improve your application.

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.

Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

elmar8287 · 2022-03-11T12:18:02Z

+#toggle-menu {
+  display: none;
+  position: fixed;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background-color: white;
+  border: 1px solid #6f6c6b;
+}
+


Please, consider that your mobile menu still does not cover Figma design requirements, as was mentioned by the previous reviewer, but you are one step away from the finish line 👍 Here you can see, that the menu is not cover the whole page and you can see how is the background page content is scrolling:

My first suggestion is to give 100% for the height and go-go with your own modifying to be closer to Figma design 👍

gemmen29

Hi @Ol-create,

Your project is complete! There is nothing else to say other than... it's time to merge it
Congratulations! 🎉

Optional suggestions

Cheers and Happy coding!👏👏👏

Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.

As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.

Ol-create and others added 17 commits March 2, 2022 09:14

Title page change to a unique name

4d0a426

Add link/focus to menu icon on the mobile page

7d06200

Add more color contrast to placeholder text

ba28f04

Add more color contrast to see-project, get my resume and submit button

968c7b7

Fix linters err

2b28f9a

Add show and hide functions to menu

4b26734

Add style to toggle-menu

fade1a9

Merge branch 'main' into Create-mobile-menu-with-javascript

c96fa3e

Fix linters err

fee93e0

Initializing the dom file with variable

1095937

Add function

eaa09d7

Add hide function for the mobile menu

b306832

Add margin to close button

0f061f5

Add node for error text message

2b655d3

Add eventlistener to close and menu buttons

b6af7d6

Fix linters error

0040eb5

Fix linters err

37723e4

thecodechaser suggested changes Mar 10, 2022

View reviewed changes

Ol-create added 3 commits March 10, 2022 16:53

Resolve reviewer comment

25c91a6

Revolve reviewer comments

21d4b0e

Fix linters err

33bedd5

elmar8287 suggested changes Mar 11, 2022

View reviewed changes

Change toggle menu height to 100%

d8a99bf

gemmen29 approved these changes Mar 11, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create Mobile Toggle Menu with JavaScript#9

Create Mobile Toggle Menu with JavaScript#9
Ol-create wants to merge 21 commits into
mainfrom
Create-mobile-menu-with-javascript

Ol-create commented Mar 8, 2022 •

edited

Loading

Uh oh!

thecodechaser left a comment

Uh oh!

thecodechaser Mar 10, 2022 •

edited by Ol-create

Loading

Uh oh!

thecodechaser Mar 10, 2022 •

edited by Ol-create

Loading

Uh oh!

thecodechaser Mar 10, 2022

Uh oh!

thecodechaser Mar 10, 2022

Uh oh!

elmar8287 left a comment

Uh oh!

elmar8287 Mar 11, 2022

Uh oh!

gemmen29 left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

Ol-create commented Mar 8, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thecodechaser left a comment

Choose a reason for hiding this comment

STATUS: CHANGES REQUIRED ♻️

Hi @Ol-create 👋,

To Highlight 🎉

Required Changes ♻️

Optional suggestions

Uh oh!

thecodechaser Mar 10, 2022 • edited by Ol-create Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thecodechaser Mar 10, 2022 • edited by Ol-create Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thecodechaser Mar 10, 2022

Choose a reason for hiding this comment

Uh oh!

thecodechaser Mar 10, 2022

Choose a reason for hiding this comment

Uh oh!

elmar8287 left a comment

Choose a reason for hiding this comment

Required Changes ♻️

Optional suggestions

Uh oh!

elmar8287 Mar 11, 2022

Choose a reason for hiding this comment

Uh oh!

gemmen29 left a comment

Choose a reason for hiding this comment

Optional suggestions

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Ol-create commented Mar 8, 2022 •

edited

Loading

thecodechaser Mar 10, 2022 •

edited by Ol-create

Loading

thecodechaser Mar 10, 2022 •

edited by Ol-create

Loading