Masterbar: Add menu structure

modules/masterbar.php

@@ -20,3 +20,18 @@
 
 new Masterbar();
 new Admin_Color_Schemes();
+
+/**
+ * Whether to load the admin menu functionality.
+ *
+ * @use add_filter( 'jetpack_load_admin_menu_class', '__return_true' );
+ * @module masterbar
+ *
+ * @since 9.2.0
+ *
+ * @param bool $load_admin_menu_class Load Jetpack's custom admin menu functionality. Default to false.
+ */
+if ( apply_filters( 'jetpack_load_admin_menu_class', false ) ) {
+	require_once __DIR__ . '/masterbar/admin-menu/class-admin-menu.php';
+	Admin_Menu::get_instance();
+}

modules/masterbar/admin-menu/admin-menu.css

@@ -0,0 +1,325 @@
+#adminmenu {
+	margin: 0;
+}
+
+/**
+ * Menu width
+ */
+#wpcontent,
+#wpfooter {
+	margin-left: 272px;
+}
+
+#adminmenuback,
+#adminmenuwrap,
+#adminmenu,
+#adminmenu .wp-submenu {
+	width: 272px;
+}
+
+#adminmenu .wp-submenu {
+	left: 272px;
+}
+
+#adminmenu .wp-not-current-submenu .wp-submenu,
+.folded #adminmenu .wp-has-current-submenu .wp-submenu {
+	min-width: 272px;
+}
+
+/**
+ * Jetpack logo
+ */
+#adminmenu [class*='activity-log'] .wp-menu-image img {
+	padding-top: 7px;
+}
+
+/**
+ * Site Switcher
+ */
+#adminmenu a.site-switcher {
+	color: #a2aab2;
+}
+
+#adminmenu a.site-switcher:hover {
+	color: #00b9eb;
+}
+
+/**
+ * Site Card
+ */
+#adminmenu .toplevel_page_site-card .wp-menu-name {
+	margin-left: 40px; /* icon width (32) + padding (8). */
+	padding: 0;
+}
+
+#adminmenu li.toplevel_page_site-card {
+	border-bottom: 1px solid #333333;
+	border-top: 1px solid #333333;
+}
+
+#adminmenu li.toplevel_page_site-card a {
+	padding: 10px 0 10px 8px;
+}
+
+#adminmenu .toplevel_page_site-card .wp-menu-image {
+	background-image: none;
+	background-position: center;
+	background-repeat: no-repeat;
+	background-size: 18px 18px;
+	height: 32px;
+	transform: translateZ( 0 );
+	transition-property: background-image, background-color;
+	transition-duration: 0.2s;
+	width: 32px;
+}
+#adminmenu .toplevel_page_site-card:not( .has-site-icon ) .wp-menu-image {
+	background-color: #c3c4c7;
+}
+
+#adminmenu .toplevel_page_site-card.has-site-icon img {
+	opacity: initial;
+	padding: 0;
+}
+
+#adminmenu .toplevel_page_site-card:hover div.wp-menu-image,
+#adminmenu .toplevel_page_site-card a:focus div.wp-menu-image {
+	background-color: #006fad;
+	background-image: url( "data:image/svg+xml,%3Csvg class='gridicon gridicons-house' height='24' width='24' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpath fill='%230a4b78' d='M22 9L12 1 2 9v2h2v10h5v-4c0-1.657 1.343-3 3-3s3 1.343 3 3v4h5V11h2V9z'/%3E%3C/g%3E%3C/svg%3E%0A" );
+	width: 34px;
+}
+
+#adminmenu
+	.toplevel_page_site-card:not( .has-site-icon )
+	.wp-menu-image
+	img[src^='data:image/svg'] {
+	height: auto;
+	padding-top: 7px;
+	width: 18px;
+}
+
+#adminmenu .toplevel_page_site-card:hover div.wp-menu-image img,
+#adminmenu .toplevel_page_site-card a:focus div.wp-menu-image img {
+	display: none;
+}
+
+.site__info .site__title {
+	color: white;
+	display: block;
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 1.3;
+}
+
+.site__info .site__domain {
+	color: #a2aab2;
+	display: block;
+	max-width: 95%;
+	font-size: 12px;
+	line-height: 1.4;
+	margin-top: 2px;
+}
+
+.site__info .site__title,
+.site__info .site__domain {
+	overflow: hidden;
+	white-space: nowrap;
+}
+.site__info .site__title::after,
+.site__info .site__domain::after {
+	content: '';
+	display: block;
+	position: absolute;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	background: linear-gradient( 90deg, rgba( 35, 40, 45, 0 ), rgba( 35, 40, 45, 1 ) 90% );
+	top: 0;
+	bottom: 0;
+	right: 0;
+	left: auto;
+	width: 20%;
+	height: auto;
+}
+
+.site__info > .site__badge {
+	background: #dcdcde;
+	color: #1d2327;
+	font-size: 12px;
+	border-radius: 12px;
+	clear: both;
+	display: inline-block;
+	margin-top: 6px;
+	margin-right: 3px;
+	padding: 1px 10px;
+}
+
+/**
+ * Stats
+ */
+[class*="toplevel_page_https://wordpress.com/stats/day"] .sidebar-unified__sparkline
+{
+	float: right;
+	margin-right: 8px;
+}
+
+/**
+ * Folded State
+ */
+.folded #adminmenu a.menu-top {
+	height: 31px;
+}
+
+.folded #adminmenu li.toplevel_page_site-card a {
+	padding-left: 0;
+}
+
+#wpadminbar {
+	background: #101517 !important;
+}
+
+#wpadminbar #wp-admin-bar-notes #wpnt-notes-unread-count.wpn-unread {
+	top: 50%;
+	left: 50%;
+	transform: translate( -10px, -13px );
+	background-color: #f283aa !important;
+	border-color: #101517;
+}
+
+#wpadminbar .ab-top-menu > li.my-sites > .ab-item {
+	background: #23282d;
+}
+
+#wpadminbar:not( .mobile ) .ab-top-menu > li:hover > .ab-item {
+	background: #333333;
+}
+
+#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar {
+	transform: translateX( 1px );
+}
+
+#wpadminbar .ab-top-menu > li.wpnt-show > .ab-item,
+#wpadminbar .ab-top-menu > li.ab-hover.wpnt-show > .ab-item {
+	background: #23282d !important;
+	color: #ffffff !important;
+}
+
+#wpadminbar > #wp-toolbar .wpnt-show span.noticon,
+#wpadminbar #wp-admin-bar-notes.wpnt-show .noticon {
+	color: #ffffff;
+}
+
+#wpadminbar #wp-admin-bar-notes.active .noticon-bell:before {
+	background-image: url( 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cmVjdCB4PSIwIiBmaWxsPSJub25lIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiLz48Zz48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNi4xNCAxNC45N2wyLjgyOCAyLjgyN2MtLjM2Mi4zNjItLjg2Mi41ODYtMS40MTQuNTg2LTEuMTA1IDAtMi0uODk1LTItMiAwLS41NTIuMjI0LTEuMDUyLjU4Ni0xLjQxNHptOC44NjcgNS4zMjRMMTQuMyAyMSAzIDkuN2wuNzA2LS43MDcgMS4xMDIuMTU3Yy43NTQuMTA4IDEuNjktLjEyMiAyLjA3Ny0uNTFsMy44ODUtMy44ODRjMi4zNC0yLjM0IDYuMTM1LTIuMzQgOC40NzUgMHMyLjM0IDYuMTM1IDAgOC40NzVsLTMuODg1IDMuODg2Yy0uMzg4LjM4OC0uNjE4IDEuMzIzLS41MSAyLjA3N2wuMTU3IDEuMXoiLz48L2c+PC9zdmc+' ) !important;
+}
+
+#wpadminbar .quicklinks ul#wp-admin-bar-root-default {
+	padding-left: 0 !important;
+}
+
+#wpadminbar #wp-admin-bar-menu-toggle {
+	display: none;
+}
+
+/* Auto-folding of the admin menu */
+@media only screen and ( max-width: 960px ) {
+	#adminmenu,
+	#adminmenuwrap,
+	#adminmenuback {
+		width: 272px;
+	}
+
+	.auto-fold #adminmenu a[class*='toplevel_page_http'].wp-first-item {
+		height: auto;
+	}
+
+	.wp-responsive-open #adminmenu a.menu-top {
+		height: auto;
+	}
+
+	.auto-fold #adminmenu div.wp-menu-image {
+		width: 36px;
+	}
+}
+
+@media screen and ( min-width: 782px ) and ( max-width: 960px ) {
+	.auto-fold #adminmenu a.menu-top {
+		height: 34px;
+	}
+
+	.auto-fold #adminmenu li.toplevel_page_site-card a {
+		height: 36px;
+		padding-left: 1px;
+	}
+}
+
+@media screen and ( max-width: 782px ) {
+	#adminmenu li.menu-top .wp-submenu > li > a,
+	.auto-fold #adminmenu li.menu-top .wp-submenu > li > a {
+		padding-left: 42px;
+	}
+
+	.auto-fold #adminmenu,
+	.auto-fold #adminmenuback,
+	.auto-fold #adminmenuwrap {
+		width: 272px;
+	}
+
+	.auto-fold #adminmenu a.site-switcher,
+	#adminmenu a.site-switcher {
+		font-size: 14px;
+	}
+
+	#wp-toolbar > ul > li {
+		display: block;
+	}
+
+	#wpadminbar li#wp-admin-bar-menu-toggle {
+		display: none;
+	}
+
+	#wpadminbar .quicklinks > ul > li > a,
+	#wpadminbar .quicklinks .ab-empty-item {
+		height: 32px;
+		line-height: 32px;
+	}
+
+	#wpadminbar #wp-admin-bar-my-account > .ab-item {
+		width: auto;
+	}
+
+	#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
+		position: static;
+	}
+
+	#wpadminbar #wp-admin-bar-my-sites > .ab-item,
+	#wpadminbar #wp-admin-bar-site-name > .ab-item,
+	#wpadminbar #wp-admin-bar-customize > .ab-item,
+	#wpadminbar #wp-admin-bar-edit > .ab-item,
+	#wpadminbar #wp-admin-bar-my-account > .ab-item {
+		text-indent: 0;
+	}
+}
+
+@media only screen and ( max-width: 660px ) {
+	#adminmenuback,
+	#adminmenuwrap,
+	#adminmenu,
+	#adminmenu .wp-submenu,
+	.auto-fold #adminmenu,
+	.auto-fold #adminmenuback,
+	.auto-fold #adminmenuwrap {
+		width: 100%;
+	}
+
+	ul#adminmenu a.wp-has-current-submenu:after,
+	ul#adminmenu > li.current > a.current:after,
+	ul#adminmenu li:hover a.wp-has-current-submenu:after,
+	.auto-fold ul#adminmenu li:hover a.wp-has-current-submenu:after {
+		display: none;
+	}
+
+	.auto-fold #adminmenu li.toplevel_page_site-card a {
+		padding: 18px 0 18px 12px;
+	}
+}

modules/masterbar/admin-menu/admin-menu.js

@@ -0,0 +1,46 @@
+( function () {
+	function init() {
+		var adminbar = document.querySelector( '#wpadminbar' );
+		var wpwrap = document.querySelector( '#wpwrap' );
+
+		function setAriaExpanded( value ) {
+			var anchors = adminbar.querySelectorAll( '#wp-admin-bar-blog a' );
+			for ( var i = 0; i < anchors.length; i++ ) {
+				anchors[ i ].setAttribute( 'aria-expanded', value );
+			}
+		}
+
+		setAriaExpanded( 'false' );
+
+		var adminbarBlog = adminbar.querySelector( '#wp-admin-bar-blog' );
+		// Toggle sidebar when toggle is clicked.
+		if ( adminbarBlog ) {
+			adminbarBlog.addEventListener( 'click', function ( event ) {
+				event.preventDefault();
+
+				// Close any open toolbar submenus.
+				var hovers = adminbar.querySelectorAll( '.hover' );
+				for ( var i = 0; i < hovers.length; i++ ) {
+					hovers[ i ].classList.remove( 'hover' );
+				}
+
+				wpwrap.classList.toggle( 'wp-responsive-open' );
+				if ( wpwrap.classList.contains( 'wp-responsive-open' ) ) {
+					setAriaExpanded( 'true' );
+					var first = document.querySelector( '#adminmenu a:first' );
+					if ( first ) {
+						first.focus();
+					}
+				} else {
+					setAriaExpanded( 'false' );
+				}
+			} );
+		}
+	}
+
+	if ( document.readyState === 'loading' ) {
+		document.addEventListener( 'DOMContentLoaded', init );
+	} else {
+		init();
+	}
+} )();