mediawiki-skins-Vector/includes/templates/Menu.mustache
bwang 006ea3517b Add collapsed TOC to sticky header by moving the TOC
Visual changes:
- TOC icon in sticky header
- Small update to the narrow screens collapsed TOC spacing when open

Bug: T311103
Depends-on: Ic94fda79bd14856ccda14985d5860aa54d3118d0
Change-Id: I977092f951ba2843816609e706bce4b99583f623
2022-08-11 11:25:21 +00:00

48 lines
1.4 KiB
Plaintext

{{!
See @typedef MenuDefinition
}}
<div id="{{id}}" class="vector-menu{{#class}} {{.}}{{/class}}" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
{{!
Dropdown menus use the checkbox hack and require `input` and `label` elements.
`aria-label` is applied to the `input` which is semantically a button.
The `label` element is used as a visual button.
}}
{{#is-dropdown}}
<input type="checkbox"
id="{{id}}-checkbox"
role="button"
aria-haspopup="true"
data-event-name="ui.dropdown-{{id}}"
class="vector-menu-checkbox{{#checkbox-class}} {{.}}{{/checkbox-class}}"
{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
{{{html-vector-menu-checkbox-attributes}}}
/>
<label
id="{{id}}-label"
for="{{id}}-checkbox"
class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
{{{html-vector-menu-heading-attributes}}}
>
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
</label>
{{/is-dropdown}}
{{!
Portal menus also require a label
}}
{{#is-portal}}
<p
id="{{id}}-label"
class="vector-menu-heading{{#heading-class}} {{.}}{{/heading-class}}"
{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
>
{{{html-vector-heading-icon}}}<span class="vector-menu-heading-label">{{label}}</span>
</p>
{{/is-portal}}
<div class="vector-menu-content">
{{{html-before-portal}}}
<ul class="vector-menu-content-list">{{{html-items}}}</ul>
{{{html-after-portal}}}
</div>
</div>