From 4c650aeead73dd2e05272abb2c8a863d10177593 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Sun, 29 Nov 2020 22:23:50 -0500
Subject: [PATCH] feat: #8989, convert widget nav to dropdown

---
 public/src/admin/extend/widgets.js | 11 +++++------
 src/views/admin/extend/widgets.tpl | 14 +++++++++++---
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/public/src/admin/extend/widgets.js b/public/src/admin/extend/widgets.js
index fdb5c565e2..5660cc8f05 100644
--- a/public/src/admin/extend/widgets.js
+++ b/public/src/admin/extend/widgets.js
@@ -10,14 +10,13 @@ define('admin/extend/widgets', [
 	var Widgets = {};
 
 	Widgets.init = function () {
-		$('#widgets .nav-pills a').on('click', function (ev) {
+		$('#widgets .nav-pills .dropdown-menu a').on('click', function (ev) {
 			var $this = $(this);
-			$('#widgets .nav-pills li').removeClass('active');
-			$this.parent().addClass('active');
-
 			$('#widgets .tab-pane').removeClass('active');
-			$('#widgets .tab-pane[data-template="' + $this.attr('data-template') + '"]').addClass('active');
-
+			var templateName = $this.attr('data-template');
+			$('#widgets .tab-pane[data-template="' + templateName + '"]').addClass('active');
+			$('#widgets .selected-template').text(templateName);
+			$('#widgets .nav-pills .dropdown').trigger('click');
 			ev.preventDefault();
 			return false;
 		});
diff --git a/src/views/admin/extend/widgets.tpl b/src/views/admin/extend/widgets.tpl
index 25d03f9829..35555e847d 100644
--- a/src/views/admin/extend/widgets.tpl
+++ b/src/views/admin/extend/widgets.tpl
@@ -1,9 +1,17 @@
 <div id="widgets" class="row">
 	<div class="col-md-8" id="active-widgets">
 		<ul class="nav nav-pills">
-		{{{ each templates }}}
-			<li class="<!-- IF @first -->active<!-- ENDIF @first -->"><a href="#" data-template="{../template}" data-toggle="pill">{../template}</a></li>
-		{{{ end }}}
+
+			<li role="presentation" class="dropdown">
+				<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
+				<span class="selected-template">{templates.0.template}</span> <span class="caret"></span>
+				</a>
+				<ul class="dropdown-menu">
+					{{{ each templates }}}
+					<li><a href="#" data-template="{../template}" data-toggle="pill">{../template}</a></li>
+					{{{ end }}}
+				</ul>
+			</li>
 		</ul>
 
 		<div class="row">