Resolve "Add dropdown to Groups link in top bar"

3 files changed, 22 insertions, 12 deletions

diff --git a/app/views/layouts/nav/_dashboard.html.haml b/app/views/layouts/nav/_dashboard.html.haml
index 7647e25e804..4029287fc0e 100644
--- a/app/views/layouts/nav/_dashboard.html.haml
+++ b/app/views/layouts/nav/_dashboard.html.haml
@@ -1,16 +1,19 @@
 %ul.list-unstyled.navbar-sub-nav
   - if dashboard_nav_link?(:projects)
     = nav_link(path: ['root#index', 'projects#trending', 'projects#starred', 'dashboard/projects#index'], html_options: { id: 'nav-projects-dropdown', class: "home dropdown header-projects qa-projects-dropdown" }) do
-      %a{ href: "#", data: { toggle: "dropdown" } }
+      %button{ type: 'button', data: { toggle: "dropdown" } }
         Projects
         = sprite_icon('angle-down', css_class: 'caret-down')
-      .dropdown-menu.projects-dropdown-menu
+      .dropdown-menu.frequent-items-dropdown-menu
         = render "layouts/nav/projects_dropdown/show"
 
   - if dashboard_nav_link?(:groups)
-    = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "d-none d-sm-block" }) do
-      = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups qa-groups-link', title: 'Groups' do
+    = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { id: 'nav-groups-dropdown', class: "home dropdown header-groups qa-groups-dropdown" }) do
+      %button{ type: 'button', data: { toggle: "dropdown" } }
         Groups
+        = sprite_icon('angle-down', css_class: 'caret-down')
+      .dropdown-menu.frequent-items-dropdown-menu
+        = render "layouts/nav/groups_dropdown/show"
 
   - if dashboard_nav_link?(:activity)
     = nav_link(path: 'dashboard#activity', html_options: { class: "d-none d-lg-block d-xl-block" }) do
@@ -34,11 +37,6 @@
         = sprite_icon('angle-down', css_class: 'caret-down')
       .dropdown-menu
         %ul
-          - if dashboard_nav_link?(:groups)
-            = nav_link(controller: ['dashboard/groups', 'explore/groups'], html_options: { class: "d-block d-sm-none" }) do
-              = link_to dashboard_groups_path, class: 'dashboard-shortcuts-groups', title: 'Groups' do
-                Groups
-
           - if dashboard_nav_link?(:activity)
             = nav_link(path: 'dashboard#activity') do
               = link_to activity_dashboard_path, title: 'Activity' do
diff --git a/app/views/layouts/nav/groups_dropdown/_show.html.haml b/app/views/layouts/nav/groups_dropdown/_show.html.haml
new file mode 100644
index 00000000000..3ce1fa6bcca
--- /dev/null
+++ b/app/views/layouts/nav/groups_dropdown/_show.html.haml
@@ -0,0 +1,12 @@
+- group_meta = { id: @group.id, name: @group.name, namespace: @group.full_name, web_url: group_path(@group), avatar_url: @group.avatar_url } if @group&.persisted?
+.frequent-items-dropdown-container
+  .frequent-items-dropdown-sidebar.qa-groups-dropdown-sidebar
+    %ul
+      = nav_link(path: 'dashboard/groups#index') do
+        = link_to dashboard_groups_path, class: 'qa-your-groups-link' do
+          = _('Your groups')
+      = nav_link(path: 'groups#explore') do
+        = link_to explore_groups_path do
+          = _('Explore groups')
+  .frequent-items-dropdown-content
+    #js-groups-dropdown{ data: { user_name: current_user.username, group: group_meta } }
diff --git a/app/views/layouts/nav/projects_dropdown/_show.html.haml b/app/views/layouts/nav/projects_dropdown/_show.html.haml
index 5809d6f7fea..f2170f71532 100644
--- a/app/views/layouts/nav/projects_dropdown/_show.html.haml
+++ b/app/views/layouts/nav/projects_dropdown/_show.html.haml
@@ -1,6 +1,6 @@
 - project_meta = { id: @project.id, name: @project.name, namespace: @project.full_name, web_url: project_path(@project), avatar_url: @project.avatar_url } if @project&.persisted?
-.projects-dropdown-container
-  .project-dropdown-sidebar.qa-projects-dropdown-sidebar
+.frequent-items-dropdown-container
+  .frequent-items-dropdown-sidebar.qa-projects-dropdown-sidebar
     %ul
       = nav_link(path: 'dashboard/projects#index') do
         = link_to dashboard_projects_path, class: 'qa-your-projects-link' do
@@ -11,5 +11,5 @@
       = nav_link(path: 'projects#trending') do
         = link_to explore_root_path do
           = _('Explore projects')
-  .project-dropdown-content
+  .frequent-items-dropdown-content
     #js-projects-dropdown{ data: { user_name: current_user.username, project: project_meta } }