ADD main menu hide btn, hidden on page navigate

Added a 'hide' button on the top right corner of the main menu that can
be clicked to hide the main menu. People were confused about how to hide
the main menu so this provides a more obvious alternative than clicking
the hamburger button again.

Also made it so that the main menu is hidden everytime someone navigates
to a new page. This is done by removing the persistent state that stores
whether the menu is opened from the checkbox that controlled the main
menu's open/close. This defaults the menu to closed everytime a page is
loaded.

Dockerfile

@@ -124,6 +124,12 @@ COPY skins/Vector/resources/skins.vector.styles/components/TableOfContents.less
      /var/www/html/skins/Vector/resources/skins.vector.styles/components/TableOfContents.less
 COPY skins/Vector/resources/skins.vector.styles/layouts/screen.less \
      /var/www/html/skins/Vector/resources/skins.vector.styles/layouts/screen.less
+COPY skins/Vector/includes/templates/Sidebar.mustache \
+     /var/www/html/skins/Vector/includes/templates/Sidebar.mustache
+COPY skins/Vector/includes/templates/skin.mustache \
+     /var/www/html/skins/Vector/includes/templates/skin.mustache
+COPY skins/Vector/resources/skins.vector.styles/components/MenuTabs.less \
+     /var/www/html/skins/Vector/resources/skins.vector.styles/components/MenuTabs.less
 
 # composer.local.json merges in composer.json from caliper extension, so we
 # need to run composer update after getting the extensions.

skins/Vector/includes/templates/Sidebar.mustache

@@ -0,0 +1,30 @@
+{{!
+	@typedef object emphasized-sidebar-action
+	@prop string href
+	@prop string text
+
+	string html-logo-attributes for site logo. Must be used inside tag e.g. `class="logo" lang="en-gb"`
+	MenuDefinition data-portlets-first
+	MenuDefinition[] array-portlets-rest
+	emphasized-sidebar-action data-emphasized-sidebar-action For displaying an emphasized action in the sidebar.
+}}
+
+<nav id="mw-panel" class="mw-sidebar" aria-label="{{msg-vector-site-nav-label}}" role="navigation">
+
+    {{! UBC Custom: Main menu hide button, can be removed after 1.40+ }}
+    <label for="mw-sidebar-checkbox" role="button"
+    class="mw-checkbox-hack-button vector-menu-toggle"
+    aria-controls="mw-panel"
+    data-event-name="ui.sidebar">
+    hide
+    </label>
+
+	{{#data-portlets-first}}{{>Menu}}{{/data-portlets-first}}
+	{{#data-emphasized-sidebar-action}}{{>SidebarAction}}{{/data-emphasized-sidebar-action}}
+	{{#array-portlets-rest}}{{>Menu}}{{/array-portlets-rest}}
+	{{^is-language-in-content}}
+	{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
+	{{/is-language-in-content}}
+	{{! T295555 Add language switch alert message temporarily (to be removed). }}
+	{{#data-vector-language-switch-alert}}{{>SidebarAction}}{{/data-vector-language-switch-alert}}
+</nav>

skins/Vector/includes/templates/skin.mustache

@@ -0,0 +1,86 @@
+{{!
+	string|null html-site-notice the contents of a banner defined in MediaWiki:Sitenotice.
+		Also used by CentralNotice to inject banners into Vector.
+	Indicator[] array-indicators wiki-defined badges such as "good article",
+		"featured article". An empty array if none are defined.
+	string html-title
+	bool is-article
+	string msg-tagline
+	string html-subtitle
+	string html-undelete-link
+	string html-newtalk
+	string msg-vector-jumptonavigation
+	string msg-vector-jumptosearch
+	string msg-vector-jumptocontent
+	string html-body-content
+	string html-categories
+	string html-after-content
+	LogoOptions data-logos
+	object data-portlets
+	MenuDefinition data-portlets.data-personal
+	MenuDefinition data-portlets.data-namespaces
+	MenuDefinition data-portlets.data-variants
+	MenuDefinition data-portlets.data-views
+	MenuDefinition data-portlets.data-actions
+	object data-search-box. See SearchBox.mustache for documentation.
+	boolean sidebar-visible For users that want to see the sidebar on initial render, this should be
+	  true.
+	string msg-vector-action-toggle-sidebar The label used by the sidebar button.
+	string msg-vector-main-menu-tooltip The title attribute for the main menu icon.
+	object data-portlets-sidebar. See Sidebar.mustache for documentation.
+	object data-footer for footer template partial. see Footer.mustache for documentation.
+}}
+<div class="mw-page-container">
+	<span id="top-page"></span>
+	<a class="mw-jump-link" href="#content">{{msg-vector-jumptocontent}}</a>
+	<div class="mw-page-container-inner">
+    {{!-- UBC custom, remove persistent main menu state so that we're hiding 
+          the menu on every page load by default. Original code:
+		<input
+			type="checkbox"
+			id="mw-sidebar-checkbox"
+			class="mw-checkbox-hack-checkbox"
+			{{#sidebar-visible}}checked{{/sidebar-visible}}>
+    --}}
+		<input
+			type="checkbox"
+			id="mw-sidebar-checkbox"
+			class="mw-checkbox-hack-checkbox">
+
+		{{>Header}}
+		<div class="vector-sidebar-container {{^data-toc}}vector-sidebar-container-no-toc{{/data-toc}}">
+			<div id="mw-navigation">
+				{{#data-portlets-sidebar}}{{>Sidebar}}{{/data-portlets-sidebar}}
+			</div>
+		</div>
+		<div class="vector-sitenotice-container">
+			<div id="siteNotice">{{{html-site-notice}}}</div>
+		</div>
+		<input type="checkbox" id="vector-toc-collapsed-checkbox" class="mw-checkbox-hack-checkbox">
+		{{>TableOfContentsContainer}}
+		<div class="mw-content-container">
+			{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
+			<main id="content" class="mw-body" role="main">
+				<a id="top"></a>
+				{{>ContentHeader}}
+				{{>ArticleToolbar}}
+				<div id="bodyContent" class="vector-body" data-mw-ve-target-container>
+					{{>ContentSubheader}}
+					{{#html-subtitle}}<div id="contentSub"{{{html-user-language-attributes}}}>{{{.}}}</div>{{/html-subtitle}}
+					{{#html-undelete-link}}<div id="contentSub2">{{{.}}}</div>{{/html-undelete-link}}
+					{{{html-user-message}}}
+					{{{html-body-content}}}
+					{{{html-categories}}}
+				</div>
+				{{#is-language-in-content-bottom}}
+				{{#data-portlets.data-languages}}{{>Menu}}{{/data-portlets.data-languages}}
+				{{/is-language-in-content-bottom}}
+			</main>
+			{{{html-after-content}}}
+		</div>
+		<div class="mw-footer-container">
+			{{#data-footer}}{{>Footer}}{{/data-footer}}
+		</div>
+	</div> {{! END mw-page-container-inner }}
+</div> {{! END mw-page-container }}
+{{#data-vector-sticky-header}}{{>StickyHeader}}{{/data-vector-sticky-header}}

skins/Vector/resources/skins.vector.styles/components/MenuTabs.less

@@ -0,0 +1,87 @@
+@import '../../common/variables.less';
+@import 'mediawiki.mixins.less';
+
+/**
+ * Styling for namespace tabs (page, discussion) and views (read, edit, view history, watch and other actions)
+ */
+
+/* Tab list items */
+.vector-menu-tabs {
+	float: left;
+
+	// T316574 Override visited link styles
+	.mw-list-item a {
+		color: @color-link;
+	}
+
+	/* focus and hover have outlines. Text underline interferes with bottom border */
+	.mw-list-item a:focus,
+	.mw-list-item a:hover {
+		text-decoration: none;
+		border-bottom: @border-width-base @border-style-base;
+	}
+
+	.mw-list-item.new a,
+	.mw-list-item.new a:visited {
+		color: @color-link-new;
+	}
+
+	.mw-list-item.selected a,
+	.mw-list-item.selected a:visited {
+		color: @color-link-selected;
+		border-bottom: @border-width-base @border-style-base;
+	}
+}
+
+/**
+ * Tab list item appearance. Applies to both <li>'s inside .vector-menu-tabs
+ * and dropdown menus inside the article toolbar
+ */
+.vector-menu-tabs .mw-list-item,
+.mw-article-toolbar-container .vector-menu-dropdown {
+	float: left;
+	white-space: nowrap;
+	margin: 0 @padding-horizontal-tabs;
+
+	// target links inside of .vector-tab-menu
+	// and dropdown menu headings inside the article toolbar.
+	// NOTE: Consider adding a single selector to define both items,
+	// since they both appear beside each other in the article toolbar.
+	& > a,
+	.vector-menu-heading {
+		display: inline-flex;
+		position: relative;
+		// Top & bottom padding to increase clickable area.
+		padding: 18px 0 7px 0;
+		// bottom margin to overlap border with toolbar border.
+		margin-bottom: -1px;
+		cursor: pointer;
+		border-bottom: @border-width-base @border-style-base transparent;
+		// max-height & box-sizing to make link, watchstar & dropdown height consistent.
+		// NOTE: Was 40px instead of 41, but changed to avoid visual regressions.
+		max-height: unit( 41 / @font-size-tabs / @font-size-browser, em );
+		box-sizing: border-box;
+		// For better compatibility with gadgets (like Twinkle) that append
+		// <H3> elements as dropdown headings (which was the convention in legacy Vector).
+		font-size: inherit;
+		font-weight: normal;
+	}
+}
+
+// UBC custom, styles for the "hide" button in the top right corner of the main
+// menu
+.vector-menu-toggle {
+    float: right;
+    margin: -6px -9px 0 0;
+    padding: 0.25em 1em;
+    font-size: 0.75em;
+    background-color: #e1e2e3;
+    transition-property: background-color,color,border-color,box-shadow;
+    transition-duration: 100ms;
+    opacity: 0.70;
+
+    &:hover {
+        background-color: #d4d5d6;
+        opacity: 1;
+    }
+}