Fix the navigation bar updating hiding the FFZ menu button as well as the main menu not appearing on some pages.

src/modules/main_menu/index.js

@@ -10,8 +10,8 @@ import {has, deep_copy} from 'utilities/object';
 
 import {parse_path} from 'src/settings';
 
-const EXCLUSIVE_SELECTOR = '.twilight-main,.twilight-minimal-root>div',
+const EXCLUSIVE_SELECTOR = '.twilight-main,.twilight-minimal-root>div,.twilight-root>.tw-full-height',
-	MAXIMIZED_SELECTOR = '.twilight-main,.twilight-minimal-root',
+	MAXIMIZED_SELECTOR = '.twilight-main,.twilight-minimal-root,.twilight-root .dashboard-side-nav+.tw-full-height',
 	SELECTOR = '.twilight-root>.tw-full-height,.twilight-minimal-root>.tw-full-height';
 
 function format_term(term) {

src/sites/twitch-twilight/modules/menu_button.jsx

@@ -12,13 +12,15 @@ export default class MenuButton extends SiteModule {
 		super(...args);
 
 		this.inject('i18n');
+		this.inject('site.fine');
+
 		this.should_enable = true;
+		this._pill_content = null;
 
-		this._pill_content = '';
+		this.NavBar = this.fine.define(
-
+			'nav-bar',
-		this._pill = null;
+			n => n.renderOnsiteNotifications && n.renderTwitchPrimeCrown
-		this._tip = null;
+		);
-		this._el = null;
 	}
 
 
@@ -28,76 +30,86 @@ export default class MenuButton extends SiteModule {
 
 	set pill(val) {
 		this._pill_content = val;
-		this.updatePill();
+		this.update();
 	}
 
 	formatPill() {
 		const val = this._pill_content;
 		if ( typeof val === 'number' )
-			return val.toLocaleString(this.i18n.locale);
+			return this.i18n.formatNumber(val);
+
 		return val;
 	}
 
 
-	updatePill() {
+	update() {
-		if ( ! this._pill )
+		for(const inst of this.NavBar.instances)
-			return;
+			this.updateButton(inst);
-
-		const content = this.formatPill();
-		this._pill.innerHTML = '';
-		if ( content )
-			setChildren(this._pill, (<div class="tw-animation tw-animation--animate tw-animation--duration-medium tw-animation--timing-ease-in tw-animation--bounce-in">
-				<div class="tw-pill tw-pill--notification">
-					{content}
-				</div>
-			</div>));
 	}
 
 
-	async onEnable() {
+	onEnable() {
-		const site = this.site,
+		this.NavBar.ready(() => this.update());
-			container = await site.awaitElement('.top-nav__menu'),
-			user_menu = container.querySelector('.top-nav__nav-items-container:last-child');
 
+		this.NavBar.on('mount', this.updateButton, this);
+		this.NavBar.on('update', this.updateButton, this);
 
-		this._el = (<div class="ffz-top-nav tw-align-self-center tw-flex-grow-0 tw-flex-shrink-0 tw-flex-nowrap tw-pd-r-1 tw-pd-l-05">
+		this.once(':clicked', this.loadMenu);
-			{this._btn = (<button
+		this.on('i18n:update', this.update);
+	}
+
+	updateButton(inst) {
+		const root = this.fine.getChildNode(inst),
+			container = root && root.querySelector('.top-nav__menu');
+
+		if ( ! container )
+			return;
+
+		let btn, el = container.querySelector('.ffz-top-nav');
+		if ( el )
+			el.remove();
+
+		const pill = this.formatPill();
+
+		el = (<div class="ffz-top-nav tw-align-self-center tw-flex-grow-0 tw-flex-shrink-0 tw-flex-nowrap tw-pd-r-1 tw-pd-l-05">
+			{btn = (<button
 				class="tw-button-icon tw-button-icon--overlay tw-button-icon--large"
-				onClick={e => this.emit(':clicked', e)} //eslint-disable-line react/jsx-no-bind
+				onClick={e => this.emit(':clicked', e, btn)} //eslint-disable-line react/jsx-no-bind
 			>
 				<div class="tw-tooltip-wrapper">
 					<span class="tw-button-icon__icon">
 						<figure class="ffz-i-zreknarf" />
 					</span>
-					{this._pill = (<div class="ffz-menu__pill tw-absolute" />)}
+					{pill && (<div class="ffz-menu__pill tw-absolute">
-					{this._tip = (<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center" />)}
+						<div class="tw-animation tw-animation--animate tw-animation--duration-medium tw-animation--timing-ease-in tw-animation--bounce-in">
+							<div class="tw-pill tw-pill--notification">
+								{pill}
+							</div>
+						</div>
+					</div>)}
+					<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
+						{this.i18n.t('site.menu_button', 'FrankerFaceZ Control Center')}
+					</div>
 				</div>
 			</button>)}
 		</div>);
 
-		this.updatePill();
+		const user_menu = container.querySelector('.top-nav__nav-items-container:last-child');
-		this.onTranslate();
+		if ( user_menu )
-
+			container.insertBefore(el, user_menu);
-		container.insertBefore(this._el, user_menu);
+		else
-
+			container.insertBefore(el, container.firstElementChild);
-		this.once(':clicked', this.loadMenu);
-		this.on('i18n:update', this.onTranslate);
 	}
 
-	onTranslate() {
-		if ( this._tip )
-			this._tip.textContent = this.i18n.t('site.menu_button', 'FrankerFaceZ Control Center');
 
-		if ( this._pill )
+	loadMenu(event, btn) {
-			this._pill.innerHTML = this.formatPill();
+		const cl = btn && btn.classList;
-	}
+		if ( cl )
-
+			cl.add('loading');
-	loadMenu(event) {
-		const cl = this._btn.classList;
-		cl.add('loading');
 
 		this.resolve('main_menu').enable(event).then(() => {
-			cl.remove('loading');
+			if ( cl )
+				cl.remove('loading');
 
 		}).catch(err => {
 			this.log.capture(err);
@@ -106,17 +118,15 @@ export default class MenuButton extends SiteModule {
 			this.log.error('Error enabling main menu.', err);
 			alert('There was an error displaying the menu.'); // eslint-disable-line no-alert
 
-			cl.remove('loading');
+			if ( cl )
+				cl.remove('loading');
+
 			this.once(':clicked', this.loadMenu);
 		})
 	}
 
 	onDisable() {
-		this.off('i18n:update', this.onTranslate);
+		this.off('i18n:update', this.update);
-
+		this.off(':clicked', this.loadMenu);
-		if ( this._el )
-			this._el.remove();
-
-		this._pill = this._tip = this._el = null;
 	}
 }