add sidebar toggle

[FidalMathew]

Description

This PR fixes sidebar view problem by using a menu icon to open it in smaller devices and close button to close the sidebar as well. On larger screens, both main content as well as sidebar is visible. .

Issue addressed

This PR addresses issue #107

Addresses #PR# HERE

Before/after screenshots

For Smaller Screens:

For larger screens:

Changelog

• Description: Improves docs mobile responsiveness by adding a menu hamburguer to open docs sidenav on mobile devices.

• Products impact: bugfix

• Addresses: N/A

• Components: KDS Docs: SideNav, Header

• Breaking: no

• Impacts a11y: no

• Guidance:

  • The new toggle functionality allows users to show and hide the side navigation bar, with a close button to close it manually.
  • The overlay provides a better user experience by dimming the content when the sidebar is open in mobile view.
  • No breaking changes were introduced, so this update can be safely merged into existing applications.

Steps to test

1. Go to home page
2. Reduce window screen size
3. Try to toggle using menu bar and close icon

(optional) Implementation notes

At a high level, how did you implement this?

Does this introduce any tech-debt items?

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

Comments

[FidalMathew]

I'm planning to fix the icon visibility as well as adding overlay in smaller screen on the main content when the sidebar is visible. Any other suggestions ? @AlexVelezLl @MisRob

[MisRob]

Hi @FidalMathew, thank you! Couple of high-level thoughts:

• Yes, I think it makes sense to hide the sidebar by default only on smaller devices. We use the sidebar a lot so I like being it visible on larger devices, with the optional way to hide it. So overall all good!
• Could we show the close icon above the logo in the very upper left corner of the sidebar?
• On larger screens:
  • When the sidebar is visible, could you hide the hamburger icon next to the page title
  • Could you make the close button work in the sidebar?

I'd imagine the experience to be the very same on all screen sizes, the only difference being that on smaller ones, the sidebar would be hidden by default, and on larger ones it'd be visible by default.

[FidalMathew]

@MisRob Could you check it now. I have made the required changes

[AlexVelezLl]

Hey @FidalMathew. Code changes looks good! Just gonna ask one little thing: Lets replicate the backdrop behaviour that we have in Kolibri when the menu is open:

I dont think we have a backdrop in KDS yet, so you can see Kolibri's Backdrop implementation for reference.

And also, lets gonna add a dropshadow %dropshadow-6dp to the sidenav when we are in mobile view. If you dont know how to use the %dropshadow-Xp please refer to [this](https://design-system.learningequality.org/styling/#definitions

[AlexVelezLl]

Also! Two checks are failing in your PR. Please run yarn lint-fix to fix the linting issues. And please, fill out the Changelog section of the PR description 👐. Thanks!

[FidalMathew]

@AlexVelezLl I have made the required changes. Let me know if any further changes are required.

[AlexVelezLl]

Thanks @FidalMathew!! This looks good. Just one little thing: Could you please fix the alignmennt between the hamburguer and the page title, so they are centered?

Apart from that everything else looks good!

[FidalMathew]

@AlexVelezLl I have made the required changes. Could you check it out.

[AlexVelezLl]

Thank you @FidalMathew! This looks good to me! Will left the final approval and merge to @MisRob 👐.