From 21bef051af36359aa8549f6fd8ca981d61fb1f55 Mon Sep 17 00:00:00 2001
From: hanakin <midaym@gmail.com>
Date: Thu, 7 May 2020 11:38:52 -1000
Subject: [PATCH] [ticket/16237] rework navbar-footer css only no js

PHPBB3-16237
---
 phpBB/assets/javascript/core.js               |   5 +-
 .../prosilver/template/navbar_footer.html     | 171 +++++++++++-------
 phpBB/styles/prosilver/theme/responsive.css   |   5 +
 3 files changed, 115 insertions(+), 66 deletions(-)

diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js
index dd53f1c83e..63c2ed3173 100644
--- a/phpBB/assets/javascript/core.js
+++ b/phpBB/assets/javascript/core.js
@@ -1379,7 +1379,7 @@ phpbb.dropdownVisibleContainers = '.dropdown-container.dropdown-visible';
 * Dropdown toggle event handler
 * This handler is used by phpBB.registerDropdown() and other functions
 */
-phpbb.toggleDropdown = function() {
+phpbb.toggleDropdown = function(event_) {
 	var $this = $(this),
 		options = $this.data('dropdown-options'),
 		parent = options.parent,
@@ -1387,6 +1387,9 @@ phpbb.toggleDropdown = function() {
 		direction;
 
 	if (!visible) {
+		// Prevent link default action
+		event_.preventDefault();
+		event_.stopPropagation();
 		// Hide other dropdown menus
 		$(phpbb.dropdownHandles).each(phpbb.toggleDropdown);
 
diff --git a/phpBB/styles/prosilver/template/navbar_footer.html b/phpBB/styles/prosilver/template/navbar_footer.html
index 8df71cff21..be795e7bf2 100644
--- a/phpBB/styles/prosilver/template/navbar_footer.html
+++ b/phpBB/styles/prosilver/template/navbar_footer.html
@@ -1,76 +1,117 @@
 <div class="navbar" role="navigation">
 	<div class="inner">
 
-	<ul id="nav-footer" class="nav-footer linklist" role="menubar">
-		<li class="breadcrumbs">
-			<!-- IF U_SITE_HOME -->
-				{% apply spaceless %}
-				<span class="crumb">
-					<a href="{U_SITE_HOME}" data-navbar-reference="home">
-						{{ Icon('iconify', 'fa:home', lang('SITE_HOME'), false) }}
-					</a>
-				</span>
-				{% endapply %}
-			<!-- ENDIF -->
-			<!-- EVENT overall_footer_breadcrumb_prepend -->
-			{% apply spaceless %}
-			<span class="crumb">
-				<a href="{U_INDEX}" data-navbar-reference="index">
-					<!-- IF not U_SITE_HOME -->{{ Icon('iconify', 'fa:home', lang(L_INDEX), false) }}<!-- ENDIF -->
-				</a>
-			</span>
-			{% endapply %}
-			<!-- EVENT overall_footer_breadcrumb_append -->
-		</li>
-		<!-- IF U_WATCH_FORUM_LINK and not S_IS_BOT -->
-			<li data-last-responsive="true">
-				<a href="{U_WATCH_FORUM_LINK}" title="{S_WATCH_FORUM_TITLE}" data-ajax="toggle_link" data-toggle-text="{S_WATCH_FORUM_TOGGLE}" data-toggle-url="{U_WATCH_FORUM_TOGGLE}">
-					{% if S_WATCHING_FORUM %}
-						{{ Icon('iconify', 'mdi:checkbox-blank-outline', '', true, 'c-subscribe-icon') }}
-						{{ Icon('iconify', 'mdi:checkbox-marked', '', true, 'c-subscribe-icon is-active') }}
-					{% else %}
-						{{ Icon('iconify', 'mdi:checkbox-blank-outline', '', true, 'c-subscribe-icon is-active') }}
-						{{ Icon('iconify', 'mdi:checkbox-marked', '', true, 'c-subscribe-icon') }}
-					{% endif %}
-					<span>{S_WATCH_FORUM_TITLE}</span>
-				</a>
-			</li>
-		<!-- ENDIF -->
+		<ul id="nav-footer" class="nav-footer linklist" role="menubar">
+			<li class="breadcrumbs">
+				{% if U_SITE_HOME %}
+					{% apply spaceless %}
+						<span class="crumb">
+							<a href="{{ U_SITE_HOME }}" data-navbar-reference="home">
+								{{ Icon('iconify', 'fa:home', lang('SITE_HOME'), false) }}
+							</a>
+						</span>
+					{% endapply %}
+				{% endif %}
 
-		<!-- EVENT overall_footer_timezone_before -->
-		<li class="rightside">{S_TIMEZONE}</li>
-		<!-- EVENT overall_footer_timezone_after -->
-		<!-- IF not S_IS_BOT -->
+				{% EVENT overall_footer_breadcrumb_prepend %}
+
+				{% apply spaceless %}
+					<span class="crumb">
+						<a href="{{ U_INDEX }}" data-navbar-reference="index">
+							{% if U_SITE_HOME %}
+								<span>{{ lang('INDEX') }}</span>
+							{% else %}
+								{{ Icon('iconify', 'fa:home', lang('INDEX'), false) }}
+							{% endif %}
+						</a>
+					</span>
+				{% endapply %}
+
+				{% EVENT overall_footer_breadcrumb_append %}
+			</li>
+
+			{% block nav_footer_left_side %}
+				{% if U_WATCH_FORUM_LINK and not S_IS_BOT %}
+					<li class="in-menu">
+						<a href="{{ U_WATCH_FORUM_LINK }}" title="{{ S_WATCH_FORUM_TITLE }}" data-ajax="toggle_link" data-toggle-text="{{ S_WATCH_FORUM_TOGGLE }}" data-toggle-url="{{ U_WATCH_FORUM_TOGGLE }}">
+							{% if S_WATCHING_FORUM %}
+								{{ Icon('iconify', 'mdi:checkbox-blank-outline', '', true, 'c-subscribe-icon') }}
+								{{ Icon('iconify', 'mdi:checkbox-marked', '', true, 'c-subscribe-icon is-active') }}
+							{% else %}
+								{{ Icon('iconify', 'mdi:checkbox-blank-outline', '', true, 'c-subscribe-icon is-active') }}
+								{{ Icon('iconify', 'mdi:checkbox-marked', '', true, 'c-subscribe-icon') }}
+							{% endif %}
+							<span>{{ S_WATCH_FORUM_TITLE }}</span>
+						</a>
+					</li>
+				{% endif %}
+			{% endblock nav_footer_left_side %}
+
+			{# End of left side menu Start of right side menu #}
+
+			{% EVENT overall_footer_timezone_before %}
 			<li class="rightside">
-				<a href="{U_DELETE_COOKIES}" data-ajax="true" data-refresh="true" role="menuitem">
-					{{ Icon('iconify', 'fa:trash', lang('DELETE_COOKIES'), false) }}
-				</a>
+				{{ S_TIMEZONE }}
 			</li>
-			<!-- IF S_DISPLAY_MEMBERLIST -->
-				<li class="rightside" data-last-responsive="true">
-					<a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}" role="menuitem">
-						{{ Icon('iconify', 'fa:group', lang('MEMBERLIST'), false) }}
-					</a>
-				</li>
-			<!-- ENDIF -->
-		<!-- ENDIF -->
-		<!-- EVENT overall_footer_teamlink_before -->
-		<!-- IF U_TEAM -->
-			<li class="rightside" data-last-responsive="true">
-				<a href="{U_TEAM}" role="menuitem">
-					{{ Icon('iconify', 'fa:shield', lang('THE_TEAM'), false) }}
+			{% EVENT overall_footer_timezone_after %}
+
+			{% block nav_footer_right_side %}
+				{% if not S_IS_BOT %}
+					<li class="rightside in-menu">
+						<a href="{{ U_DELETE_COOKIES }}" data-ajax="true" data-refresh="true" role="menuitem">
+							{{ Icon('iconify', 'fa:trash', lang('DELETE_COOKIES'), false) }}
+						</a>
+					</li>
+
+					{% if S_DISPLAY_MEMBERLIST %}
+						<li class="rightside in-menu">
+							<a href="{{ U_MEMBERLIST }}" title="{{ lang('MEMBERLIST_EXPLAIN') }}" role="menuitem">
+								{{ Icon('iconify', 'fa:group', lang('MEMBERLIST'), false) }}
+							</a>
+						</li>
+					{% endif %}
+				{% endif %}
+
+				{% EVENT overall_footer_teamlink_before %}
+
+				{% if U_TEAM %}
+					<li class="rightside in-menu">
+						<a href="{{ U_TEAM }}" role="menuitem">
+							{{ Icon('iconify', 'fa:shield', lang('THE_TEAM'), false) }}
+						</a>
+					</li>
+				{% endif %}
+
+				{% EVENT overall_footer_teamlink_after %}
+
+				{% if U_CONTACT_US %}
+					<li class="rightside in-menu">
+						<a href="{{ U_CONTACT_US }}" role="menuitem">
+							{{ Icon('iconify', 'fa:envelope', lang('CONTACT_US'), false) }}
+						</a>
+					</li>
+				{% endif %}
+			{% endblock nav_footer_right_side %}
+
+			{# right side responsive menu #}
+
+			<li class="rightside dropdown-container post-buttons-responsive-menu">
+				<a class="dropdown-toggle post-button-responsive" href="">
+					{{ Icon('iconify', 'fa:bars', '', true) }}
 				</a>
+				<div class="dropdown">
+					<div class="pointer">
+						<div class="pointer-inner"></div>
+					</div>
+
+					<ul class="dropdown-contents">
+						{{ block('nav_footer_left_side', _self) }}
+						<li class="separator"></li>
+						{{ block('nav_footer_right_side', _self) }}
+					</ul>
+				</div>
 			</li>
-		<!-- ENDIF -->
-		<!-- EVENT overall_footer_teamlink_after -->
-		<!-- IF U_CONTACT_US -->
-			<li class="rightside" data-last-responsive="true">
-				<a href="{U_CONTACT_US}" role="menuitem">
-					{{ Icon('iconify', 'fa:envelope', lang('CONTACT_US'), false) }}
-				</a>
-			</li>
-		<!-- ENDIF -->
-	</ul>
+		</ul>
 
 	</div>
 </div>
diff --git a/phpBB/styles/prosilver/theme/responsive.css b/phpBB/styles/prosilver/theme/responsive.css
index b50d9ce038..65e096c10c 100644
--- a/phpBB/styles/prosilver/theme/responsive.css
+++ b/phpBB/styles/prosilver/theme/responsive.css
@@ -581,6 +581,10 @@
 		margin-left: 0 !important;
 	}
 
+	.nav-footer.linklist .in-menu {
+		display: none !important;
+	}
+
 	/* post-buttons */
 
 	.has-profile .post-buttons {
@@ -591,6 +595,7 @@
 		display: none;
 	}
 
+	.nav-footer.linklist .post-buttons-responsive-menu .in-menu,
 	.post-buttons-responsive-menu,
 	.post-button-responsive,
 	.post-buttons-responsive-menu .post-buttons-label {