From 732678f642015b08ba22d0995dc74c13a086ac92 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Thu, 2 Dec 2021 09:45:33 -0500
Subject: [PATCH] UX: Fix alignment in group navigation bar (#15169)

Same as #15145.
---
 .../stylesheets/common/components/navs.scss   |  7 +++--
 app/assets/stylesheets/desktop/group.scss     | 30 -------------------
 .../javascripts/discourse/lib/dummy-data.js   |  2 ++
 .../styleguide/molecules/navigation-bar.hbs   | 12 ++++++++
 4 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/app/assets/stylesheets/common/components/navs.scss b/app/assets/stylesheets/common/components/navs.scss
index 6bef0c18f10..49a6a767fdc 100644
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@@ -21,9 +21,12 @@
   @extend %nav;
   @extend .clearfix;
 
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+
   > li {
     display: flex;
-    float: left;
     margin-right: 0.5em;
 
     > a {
@@ -36,7 +39,7 @@
       min-height: 30px;
       display: flex;
       align-items: center;
-      transition: background 0.15s;
+      transition: background-color 0.2s, color 0.2s;
 
       .d-icon {
         margin-right: 5px;
diff --git a/app/assets/stylesheets/desktop/group.scss b/app/assets/stylesheets/desktop/group.scss
index 606b402ff8e..0b095a67ab1 100644
--- a/app/assets/stylesheets/desktop/group.scss
+++ b/app/assets/stylesheets/desktop/group.scss
@@ -1,33 +1,3 @@
-.group-nav {
-  .group-dropdown {
-    margin-right: 10px;
-  }
-}
-
-.group-navigation {
-  width: 15%;
-  background-color: transparent;
-
-  li {
-    border: none;
-
-    a {
-      color: var(--primary-med-or-secondary-high);
-      padding: 8px 0;
-
-      &.active {
-        background-color: transparent;
-        font-weight: bold;
-        color: var(--primary);
-
-        &:after {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
 .group-activity-outlet,
 .group-messages-outlet,
 .group-manage-outlet {
diff --git a/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js b/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js
index df2f90450e9..29597f9e579 100644
--- a/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js
+++ b/plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js
@@ -262,6 +262,8 @@ export function createData(store) {
       { name: "admin", id: 3, automatic: false },
     ],
 
+    groupNames: ["staff", "lounge", "admin"],
+
     selectedGroups: [1, 2],
 
     settings: "bold|italic|strike|underline",
diff --git a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
index 53a46ed9279..d62354700ef 100644
--- a/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/templates/styleguide/molecules/navigation-bar.hbs
@@ -9,3 +9,15 @@
     {{/each}}
   {{/mobile-nav}}
 {{/styleguide-example}}
+
+{{#styleguide-example title="group page navigation-bar"}}
+  {{#mobile-nav class="group-nav" desktopClass="nav nav-pills"}}
+    <li class="group-dropdown">
+      {{group-dropdown groups=dummy.groupNames value="staff"}}
+    </li>
+
+    {{#each dummy.navItems as |ni|}}
+      <li><a href={{ni.href}} class={{if ni.styleGuideActive "active"}}>{{ni.displayName}}</a></li>
+    {{/each}}
+  {{/mobile-nav}}
+{{/styleguide-example}}