Enhancing Mobile Responsiveness

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
website	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 9, 2023 at 3:53PM (UTC)

[CollActionOfficial]

1. pasting the same piece of code on 5 different places is code duplication, which should be prevented where possible. @Xazin Do you perhaps have a suggestion on how Margaret could fix this?
2. Decreasing screen width now yields the image below instead of the burger in the top right corner

[dastrong]

Regarding the duplication mentioned above, just refactor to something like this:

// extract the close behavior into a separate function
const closeNavbar = () => setNavbar(false);

// remove the legacyBehavior prop & add the event handlers to the Next link
<NextLink
  href="..."
  className="..."
  onClick={closeNavbar}
  onKeyPress={closeNavbar}
>
  {t('app:navbar.projects')}
</NextLink>

Other tasks:

• add a transparent border on the open/close button to stop the layout shift it gets when focused
• the (a & button) elements in the mobile menu need to be styled for mobile as well

[CollActionOfficial]

@margaretmwaura How's it going?

[margaretmwaura]

@margaretmwaura How's it going?

Will give an update to this by EOD

[margaretmwaura]

Regarding the duplication mentioned above, just refactor to something like this:

// extract the close behavior into a separate function
const closeNavbar = () => setNavbar(false);

// remove the legacyBehavior prop & add the event handlers to the Next link
<NextLink
  href="..."
  className="..."
  onClick={closeNavbar}
  onKeyPress={closeNavbar}
>
  {t('app:navbar.projects')}
</NextLink>

Other tasks:

• add a transparent border on the open/close button to stop the layout shift it gets when focused
• the (a & button) elements in the mobile menu need to be styled for mobile as well

Hi @dastrong , this has helped, thank you, you can review again

[margaretmwaura]

1. pasting the same piece of code on 5 different places is code duplication, which should be prevented where possible. @Xazin Do you perhaps have a suggestion on how Margaret could fix this?
2. Decreasing screen width now yields the image below instead of the burger in the top right corner

This has been resolved, kindly review again

[tomsiebring]

Looks good to me! what do you think @dastrong ?

[CollActionOfficial]

@dastrong

[dastrong]

@dastrong

Yup, LGTM.