Use window size to determine sidebar display, and unify behaviour for margin and dimmer

[tusooa]

PR Checklist

• The commit message follows guidelines for NexT.
• Tests for the changes was made (for bug fixes / features).
  • Muse | Mist have been tested.
  • Pisces | Gemini have been tested.
• N/A Docs in NexT website have been added / updated (for features).

PR Type

• Bugfix.
• Feature.
• Code style update (formatting, local variables).
• Refactoring (no functional changes, no api changes).
• Documentation.
• Translation.
• Other... Please describe:

What is the current behavior?

1. Screen size is used to determine whether sidebar is shown on page load, instead of window size.
   This means those who have a narrow window on a wide screen will still have the sidebar shown.
   This covers page content.

2. On "tablet" view (between "desktop" and "mobile"), the page content will be covered by the sidebar (-margin), but it is not dimmed (-dimmer).
   

   Compare:

   • "desktop" view (+margin -dimmer):

   • "mobile" view (-margin +dimmer):

Issue resolved: N/A

What is the new behavior?

1. Window size is used to determine whether to show sidebar on page load.
2. -margin will always go with +dimmer. On "tablet" view, it will display as -margin +dimmer (same as "mobile" view).

• Link to demo site with this changes: N/A
• Screenshots with this changes: See above

How to use?

N/A

[welcome]

Thanks so much for opening your first PR here!

[CLAassistant]

All committers have signed the CLA.

[tusooa]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

What is the relationship between NexT and SAP SE? In the agreement it asked me to give my rights to SAP SE, but I did not see anything mentioning relationship between NexT and SAP SE on NexT websites (So I definitely will not sign it for now.). I looked up https://cla-assistant.io/ and it seems to indicate projects should provide their own agreements. Was the one for NexT set up properly according to their guidelines?

[stevenjoezhang]

Perhaps unifying the behavior of the tablet and desktop is a better choice?

[tusooa]

I don't think "Tablet" has enough space for both the article and sidebar.

[stevenjoezhang]

This problem is a bit tricky, because both 7.9-inch iPad mini and 12.9-inch iPad Pro are "Tablet"s.

I will merge this pull request and make adjustments based on subsequent user feedback. Thanks for your contribution.

[welcome]

Congrats on merging your first pull request here! 🎉 How awesome!