UX: Fix alignment in group navigation bar (#15145)

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;

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 {

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",

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}}