== Background
We would like to give users the ability to collapse the sidebar. This task will contain the building of the sidebar and sidebar buttons.
== Acceptance criteria
[] Build hamburger icon
[] Make sidebar collapsible
[] Selecting hamburger icon should open/close the sidebar
[] **The sidebar should allow for different default states for logged-in and anon users. The initial state for both will be uncollapsed by default. We will later change this to collapsed by default for anonymous users.**
NOTE: this task will involve building the button and collapsing the sidebar only. Expected behavior here would be for the width to expand to the full size of the screen. We will follow this task up with {T247038} where we will be building the fixed width. In addition, requirements for sidebar persistence for logged-in users are tracked in {T246427}
[] Ensure that persistent criteria is met prior to deploying to production {T246427}
== Note on default states
INITIAL STATE: sidebar is default on for all users
EVENTUAL STATE: sidebar is default off for anons, default on for all other users
== Designs & prototype
| sidebar closed | sidebar open
| -- | --
| {F31744472} | {F31744470}
===== Prototypes
https://people.wikimedia.org/~jdrewniak/dip/p3.html#/en/wiki/Main_Page
http://patchdemo.wmflabs.org/wikis/24b6fd1f6a50fc53846f92f943ce79a4/w/ (Code: [[ https://github.com/DemianX0/mediawiki-skins-Vector/commits/new-vector-header | GitHub - commits of layout ]] | [[ https://github.com/DemianX0/mediawiki-skins-Vector/commits/new-vector-usermenu | GitHub - usermenu ]] | [[ https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/578995 | Gerrit - squash ]])
===== Persistence of of open/closed sidebar state
- For all users sidebar state should persist across pageviews (i.e. if I go from one article/page to another, in the same browser tab)
- For logged-in users sidebar state should also persist across sessions (i.e. if I close the browser tab, and then open a new one)
- For logged-out users every session should start with the sidebar closed
===== Sticky/fixed sidebar
To begin with the sidebar **will not be fixed/sticky** alongside the content, because doing so creates a slightly more complicated two column interface and we don’t want to make access to language links more difficult. Once we’ve moved language links we can revisit this behavior.
===== Open/close trigger/icon
TBD based on closer review of feedback, however considering something like
| sidebar closed (hamburger icon) | sidebar open (<< icon)
| -- | --
| {F31744484} | {F31744487}
Icon svg: [coming soon!]
== Requirements
- Don't break Korean Wikipedia. Maybe we can expose the skin version preference and only run the collapsible gadget if `mw.config.get( 'vectorSkinVersion' ) !== '2'`. We should document how we approach this so we don't accidentally break any API exposed.
- We could use the logic in Popups for NavigationPopups existence and default to old Vector when the gadget is enabled.
== References
- MinervaNeue ([[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MinervaNeue/+/356338ba/resources/skins.minerva.mainMenu.styles/MainMenu.less | MainMenu ]], [[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/MinervaNeue/+/356338ba/components/ToggleList/ToggleList.less | ToggleList ]] (using the CSS-only checkbox trick with JavaScript enhancements)
- Core ([[ https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/8e3738cc2f0665d19c1ff758a1f16eebae0039dd/resources/src/mediawiki.toc.styles | table of contents ]], CSS-only checkbox trick)
- [[ https://ko.wikipedia.org/wiki/%EB%AF%B8%EB%94%94%EC%96%B4%EC%9C%84%ED%82%A4:Gadget-CollapsibleSidebar.js | Korean Wikipedia gadget ]] (enabled by default, JavaScript)
- [[ https://github.com | GitHub ]] (profile and create new dropdowns use [[ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details | <details> and <summary> elements ]] but unfortunately [[ https://caniuse.com/#search=details | our support matrix won't allow that ]])
= Developer notes
Use of CSS checkbox hack seems preferable here as it requires HTML + CSS only changes.
== POC implementation
Pure css with the checkbox trick: [[ https://github.com/DemianX0/mediawiki-skins-Vector/commit/ca699dc2e5103c5ede82e4f03e3dd6f1e5494fc6 | GitHub - latest ]] | [[ https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/578697 | Gerrit - old ]]
== Preliminary QA
Explore sidebar functionality on the beta cluster and confirm functions in the following circumstances:
- a variety of screen sizes
- a variety of browsers
- at least one rtl language
- the history page
- the recent changes page
- an article page