Feature Request: ZEN mode for TOP

[Vincent0103]

Checks

• I have thoroughly read and understand The Odin Project Contributing Guide
• The title of this issue follows the Feature Request: brief description of feature request format, e.g. Feature Request: Add a dark mode to the website
• Would you like to work on this issue?

Description of the Feature Request

For peoples who are really inpatient while reading lessons, like I am. We usually tend to look at the lessons content to see what subsection we are currently, and it can be stressful, I found a way to sort of see only the content I want to see by zooming in by 175%. But it could be nice to have this feature to make it better for users to read lessons.

The pictures are a way of the ZEN mode implementation on TOP.

Acceptance criteria

• button to toggle between on/off for the ZEN mode.
• optionally, a shortcut to toggle ZEN mode.
• Ability to change the size of the text for readability.

Additional Comments

I love your work, without your free course I wouldn't know where I would have been. Thank you again for updating the course frequently, and have an amazing day!

[KevinMulhern]

Thanks for taking the time to leave this suggestion @Vincent0103. I like this idea and think it would be a good thing to have as a setting.

But it may not be as easy to do as it looks. Because of the width constraints of our layout (the main body can never be wider than the navbar). The main content column on lesson pages is pulled to the left to leave space for the lesson navigation column.

Without the side navigation column to give balance, the page looks a bit lopsided aha:

It's especially noticeable at the bottom of lessons:

We'd need to centre the main column if the sidebar isn't there. But knowing that part of the codebase, that might require a fairly big revision.

However, we do had plans for redoing the layout to open up the full width of the page. That feature is a priority for us this year and would make this feature request trivial to do.

In the meantime, I know its not ideal, but you can achieve something very similar to this by reducing the window size:

[Vincent0103]

Alright thank you for reviewing my request anyways! 😁

[Kezy-d4]

Hello there. Sorry to comment on an older issue, I have something to add and I don't think it warrants opening a separate issue.

In addition to the lesson contents being toggleable, I think special care should be given to ensure that the lesson contents are always available on any screen/window size, even if they are hidden by default on smaller screens. Currently, the lesson contents are entirely unavailable when working on devices with smaller screens or with a shrunken window. I personally rely on the lesson contents to help orient me during a lesson and having them completely unavailable when reading on my laptop or phone is a bit jarring. I've attached a short video demonstrating how MDN makes its article contents available on smaller screens, perhaps something similar could be implemented for TOP?
mdn-sidebar.webm