From f1f2c1acd48293b481fd327b20cda066762d4ae0 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 19 Oct 2022 21:05:51 -0400
Subject: [PATCH] UX: extend horizontal user nav to all user pages (#18674)

---
 ...nces-nav.js => horizontal-overflow-nav.js} |  17 +-
 .../app/components/user-nav/activity-nav.hbs  |  47 +++++
 .../app/components/user-nav/messages-nav.hbs  |   4 +-
 .../components/user-nav/notifications-nav.hbs |  38 ++++
 .../components/user-nav/preferences-nav.hbs   | 180 +++++++-----------
 .../components/horizontal-overflow-nav.hbs    |  33 ++++
 .../discourse/app/templates/preferences.hbs   |  16 +-
 .../discourse/app/templates/user-invited.hbs  |   4 +-
 .../discourse/app/templates/user/activity.hbs |  59 +-----
 .../app/templates/user/notifications.hbs      |  58 ++----
 .../stylesheets/common/base/new-user.scss     |  18 +-
 11 files changed, 249 insertions(+), 225 deletions(-)
 rename app/assets/javascripts/discourse/app/components/{user-nav/preferences-nav.js => horizontal-overflow-nav.js} (85%)
 create mode 100644 app/assets/javascripts/discourse/app/components/user-nav/activity-nav.hbs
 create mode 100644 app/assets/javascripts/discourse/app/components/user-nav/notifications-nav.hbs
 create mode 100644 app/assets/javascripts/discourse/app/templates/components/horizontal-overflow-nav.hbs

diff --git a/app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.js b/app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js
similarity index 85%
rename from app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.js
rename to app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js
index 1c013766bd1..79d0a065190 100644
--- a/app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.js
+++ b/app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js
@@ -4,7 +4,7 @@ import { bind } from "discourse-common/utils/decorators";
 import { inject as service } from "@ember/service";
 import { tracked } from "@glimmer/tracking";
 
-export default class UserNavPreferencesNav extends Component {
+export default class HorizontalOverflowNav extends Component {
   @service site;
   @tracked hasScroll;
   @tracked hideRightScroll = false;
@@ -13,9 +13,14 @@ export default class UserNavPreferencesNav extends Component {
 
   @bind
   scrollToActive() {
-    document
-      .querySelector(".user-navigation-secondary a.active")
-      .scrollIntoView({ inline: "center" });
+    const activeElement = document.querySelector(
+      ".user-navigation-secondary a.active"
+    );
+
+    activeElement?.scrollIntoView({
+      block: "nearest",
+      inline: "center",
+    });
   }
 
   @bind
@@ -60,7 +65,7 @@ export default class UserNavPreferencesNav extends Component {
 
   @action
   horizScroll(element) {
-    let scrollSpeed = 50;
+    let scrollSpeed = 100;
     let siblingTarget = element.target.previousElementSibling;
 
     if (element.target.dataset.direction === "left") {
@@ -72,8 +77,6 @@ export default class UserNavPreferencesNav extends Component {
       siblingTarget.scrollLeft += scrollSpeed;
     }, 50);
 
-    this.scrollTimer;
-
     element.target.addEventListener("mouseup", this.stopScroll);
     element.target.addEventListener("mouseleave", this.stopScroll);
   }
diff --git a/app/assets/javascripts/discourse/app/components/user-nav/activity-nav.hbs b/app/assets/javascripts/discourse/app/components/user-nav/activity-nav.hbs
new file mode 100644
index 00000000000..0e641e33c40
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/user-nav/activity-nav.hbs
@@ -0,0 +1,47 @@
+<DNavigationItem @route="userActivity.index">
+  {{d-icon "stream"}}
+  <span>{{i18n "user.filters.all"}}</span>
+</DNavigationItem>
+<DNavigationItem @route="userActivity.topics">
+  {{d-icon "list-ul"}}
+  <span>{{i18n "user_action_groups.4"}}</span>
+</DNavigationItem>
+<DNavigationItem @route="userActivity.replies">
+  {{d-icon "reply"}}
+  <span>{{i18n "user_action_groups.5"}}</span>
+</DNavigationItem>
+
+{{#if @user.showRead}}
+  <DNavigationItem @route="userActivity.read" @title={{i18n "user.read_help"}}>
+    {{d-icon "history"}}
+    <span>{{i18n "user.read"}}</span>
+  </DNavigationItem>
+{{/if}}
+
+{{#if @user.showDrafts}}
+  <DNavigationItem @route="userActivity.drafts">
+    {{d-icon "pencil-alt"}}
+    <span>{{@draftLabel}}</span>
+  </DNavigationItem>
+{{/if}}
+
+{{#if (gt @model.pending_posts_count 0)}}
+  <DNavigationItem @route="userActivity.pending">
+    {{d-icon "clock"}}
+    <span>{{@pendingLabel}}</span>
+  </DNavigationItem>
+{{/if}}
+
+<DNavigationItem @route="userActivity.likesGiven">
+  {{d-icon "heart"}}
+  <span>{{i18n "user_action_groups.1"}}</span>
+</DNavigationItem>
+
+{{#if @user.showBookmarks}}
+  <DNavigationItem @route="userActivity.bookmarks">
+    {{d-icon "bookmark"}}
+    <span>{{i18n "user_action_groups.3"}}</span>
+  </DNavigationItem>
+{{/if}}
+
+<PluginOutlet @name="user-activity-bottom" @connectorTagName="li" @args={{hash model=@model}} />
diff --git a/app/assets/javascripts/discourse/app/components/user-nav/messages-nav.hbs b/app/assets/javascripts/discourse/app/components/user-nav/messages-nav.hbs
index d88d8089b23..565e6c336c9 100644
--- a/app/assets/javascripts/discourse/app/components/user-nav/messages-nav.hbs
+++ b/app/assets/javascripts/discourse/app/components/user-nav/messages-nav.hbs
@@ -7,7 +7,7 @@
     </ol>
   {{/if}}
 
-  <ul class="messages-nav nav-pills action-list">
+  <HorizontalOverflowNav>
     {{#if @isPersonal}}
       <li class="messages-latest">
         <LinkTo @route="userPrivateMessages.index" @model={{@user}}>
@@ -99,7 +99,7 @@
     {{/if}}
 
     <PluginOutlet @name="user-messages-nav" @connectorTagName="li" @args={{hash model=@user}} />
-  </ul>
+  </HorizontalOverflowNav>
 
   {{#if this.site.desktopView}}
     <div class="navigation-controls">
diff --git a/app/assets/javascripts/discourse/app/components/user-nav/notifications-nav.hbs b/app/assets/javascripts/discourse/app/components/user-nav/notifications-nav.hbs
new file mode 100644
index 00000000000..167f727cf75
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/user-nav/notifications-nav.hbs
@@ -0,0 +1,38 @@
+<li>
+  <LinkTo @route="userNotifications.index">
+    {{d-icon "bell"}}
+    <span>{{i18n "user.filters.all"}}</span>
+  </LinkTo>
+</li>
+
+<li>
+  <LinkTo @route="userNotifications.responses">
+    {{d-icon "reply"}}
+    <span>{{i18n "user_action_groups.6"}}</span>
+  </LinkTo>
+</li>
+
+<li>
+  <LinkTo @route="userNotifications.likesReceived">
+    {{d-icon "heart"}}
+    <span>{{i18n "user_action_groups.2"}}</span>
+  </LinkTo>
+</li>
+
+{{#if this.siteSettings.enable_mentions}}
+  <li>
+    <LinkTo @route="userNotifications.mentions">
+      {{d-icon "at"}}
+      <span>{{i18n "user_action_groups.7"}}</span>
+    </LinkTo>
+  </li>
+{{/if}}
+
+<li>
+  <LinkTo @route="userNotifications.edits">
+    {{d-icon "pencil-alt"}}
+    <span>{{i18n "user_action_groups.11"}}</span>
+  </LinkTo>
+</li>
+
+<PluginOutlet @name="user-notifications-bottom" @connectorTagName="li" @args={{hash model=@model}} />
diff --git a/app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.hbs b/app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.hbs
index a7fdca93e40..29e1c35c5d1 100644
--- a/app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.hbs
+++ b/app/assets/javascripts/discourse/app/components/user-nav/preferences-nav.hbs
@@ -1,106 +1,74 @@
-{{!-- template-lint-disable no-down-event-binding --}}
-
-<div class="user-navigation user-navigation-secondary {{if this.hasScroll "has-scroll"}}">
-  {{#if this.hasScroll}}
-    <a
-      role="button"
-      {{on "mousedown" this.horizScroll}}
-      data-direction="left"
-      class="nav-overflow__scroll-left btn-flat {{if this.hideLeftScroll "transparent"}}"
-    >
-      {{d-icon "chevron-left"}}
-    </a>
-  {{/if}}
-
-  <ul
-    {{did-insert this.scrollToActive}}
-    {{on-resize this.checkScroll}}
-    {{on "scroll" this.watchScroll}}
-    class="nav-pills action-list"
-  >
-    <li class="nav-account">
-      <LinkTo @route="preferences.account">
-        {{d-icon "user"}}
-        <span>{{i18n "user.preferences_nav.account"}}</span>
-      </LinkTo>
-    </li>
-    <li class="nav-security">
-      <LinkTo @route="preferences.security">
-        {{d-icon "lock"}}
-        <span>{{i18n "user.preferences_nav.security"}}</span>
-      </LinkTo>
-    </li>
-    <li class="nav-profile">
-      <LinkTo @route="preferences.profile">
-        {{d-icon "user"}}
-        <span>{{i18n "user.preferences_nav.profile"}}</span>
-      </LinkTo>
-    </li>
-    <li class="nav-emails">
-      <LinkTo @route="preferences.emails">
-        {{d-icon "envelope"}}
-        <span>{{i18n "user.preferences_nav.emails"}}</span>
-      </LinkTo>
-    </li>
-    <li class="nav-notifications">
-      <LinkTo @route="preferences.notifications">
-        {{d-icon "bell"}}
-        <span>{{i18n "user.preferences_nav.notifications"}}</span>
-      </LinkTo>
-    </li>
-    {{#if @model.can_change_tracking_preferences}}
-      <li class="indent nav-categories">
-        <LinkTo @route="preferences.categories">
-          {{d-icon "folder"}}
-          <span>{{i18n "user.preferences_nav.categories"}}</span>
-        </LinkTo>
-      </li>
-    {{/if}}
-    <li class="indent nav-users">
-      <LinkTo @route="preferences.users">
-        {{d-icon "users"}}
-        <span>{{i18n "user.preferences_nav.users"}}</span>
-      </LinkTo>
-    </li>
-    {{#if (and @model.can_change_tracking_preferences @siteSettings.tagging_enabled)}}
-      <li class="indent nav-tags">
-        <LinkTo @route="preferences.tags">
-          {{d-icon "tag"}}
-          <span>{{i18n "user.preferences_nav.tags"}}</span>
-        </LinkTo>
-      </li>
-    {{/if}}
-    <li class="nav-interface">
-      <LinkTo @route="preferences.interface">
-        {{d-icon "desktop"}}
-        <span>{{i18n "user.preferences_nav.interface"}}</span>
-      </LinkTo>
-    </li>
-    {{#if @siteSettings.enable_experimental_sidebar_hamburger}}
-      <li class="indent nav-sidebar">
-        <LinkTo @route="preferences.sidebar">
-          {{d-icon "bars"}}
-          <span>{{i18n "user.preferences_nav.sidebar"}}</span>
-        </LinkTo>
-      </li>
-    {{/if}}
-    <PluginOutlet @name="user-preferences-nav-under-interface" @connectorTagName="div" @args={{hash model=@model}} />
-    <li class="nav-apps">
-      <LinkTo @route="preferences.apps">
-        {{d-icon "mobile-alt"}}
-        <span>{{i18n "user.preferences_nav.apps"}}</span>
-      </LinkTo>
-    </li>
-    <PluginOutlet @name="user-preferences-nav" @connectorTagName="li" @args={{hash model=@model}} />
-  </ul>
-
-  {{#if this.hasScroll}}
-    <a
-      role="button"
-      {{on "mousedown" this.horizScroll}}
-      class="nav-overflow__scroll-right btn-flat {{if this.hideRightScroll "transparent"}}"
-    >
-      {{d-icon "chevron-right"}}
-    </a>
-  {{/if}}
-</div>
+<li class="nav-account">
+  <LinkTo @route="preferences.account">
+    {{d-icon "user"}}
+    <span>{{i18n "user.preferences_nav.account"}}</span>
+  </LinkTo>
+</li>
+<li class="nav-security">
+  <LinkTo @route="preferences.security">
+    {{d-icon "lock"}}
+    <span>{{i18n "user.preferences_nav.security"}}</span>
+  </LinkTo>
+</li>
+<li class="nav-profile">
+  <LinkTo @route="preferences.profile">
+    {{d-icon "user"}}
+    <span>{{i18n "user.preferences_nav.profile"}}</span>
+  </LinkTo>
+</li>
+<li class="nav-emails">
+  <LinkTo @route="preferences.emails">
+    {{d-icon "envelope"}}
+    <span>{{i18n "user.preferences_nav.emails"}}</span>
+  </LinkTo>
+</li>
+<li class="nav-notifications">
+  <LinkTo @route="preferences.notifications">
+    {{d-icon "bell"}}
+    <span>{{i18n "user.preferences_nav.notifications"}}</span>
+  </LinkTo>
+</li>
+{{#if @model.can_change_tracking_preferences}}
+  <li class="indent nav-categories">
+    <LinkTo @route="preferences.categories">
+      {{d-icon "folder"}}
+      <span>{{i18n "user.preferences_nav.categories"}}</span>
+    </LinkTo>
+  </li>
+{{/if}}
+<li class="indent nav-users">
+  <LinkTo @route="preferences.users">
+    {{d-icon "users"}}
+    <span>{{i18n "user.preferences_nav.users"}}</span>
+  </LinkTo>
+</li>
+{{#if (and @model.can_change_tracking_preferences @siteSettings.tagging_enabled)}}
+  <li class="indent nav-tags">
+    <LinkTo @route="preferences.tags">
+      {{d-icon "tag"}}
+      <span>{{i18n "user.preferences_nav.tags"}}</span>
+    </LinkTo>
+  </li>
+{{/if}}
+<li class="nav-interface">
+  <LinkTo @route="preferences.interface">
+    {{d-icon "desktop"}}
+    <span>{{i18n "user.preferences_nav.interface"}}</span>
+  </LinkTo>
+</li>
+{{#if @siteSettings.enable_experimental_sidebar_hamburger}}
+  <li class="indent nav-sidebar">
+    <LinkTo @route="preferences.sidebar">
+      {{d-icon "bars"}}
+      <span>{{i18n "user.preferences_nav.sidebar"}}</span>
+    </LinkTo>
+  </li>
+{{/if}}
+<PluginOutlet @name="user-preferences-nav-under-interface" @connectorTagName="div" @args={{hash model=@model}} />
+<li class="nav-apps">
+  <LinkTo @route="preferences.apps">
+    {{d-icon "mobile-alt"}}
+    <span>{{i18n "user.preferences_nav.apps"}}</span>
+  </LinkTo>
+</li>
+<PluginOutlet @name="user-preferences-nav" @connectorTagName="li" @args={{hash model=@model}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/horizontal-overflow-nav.hbs b/app/assets/javascripts/discourse/app/templates/components/horizontal-overflow-nav.hbs
new file mode 100644
index 00000000000..d726eb8eefc
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/templates/components/horizontal-overflow-nav.hbs
@@ -0,0 +1,33 @@
+{{!-- template-lint-disable no-down-event-binding --}}
+
+<div class="horizontal-overflow-nav {{if this.hasScroll "has-scroll"}}">
+  {{#if this.hasScroll}}
+    <a
+      role="button"
+      {{on "mousedown" this.horizScroll}}
+      data-direction="left"
+      class="nav-overflow__scroll-left btn-flat {{if this.hideLeftScroll "transparent"}}"
+    >
+      {{d-icon "chevron-left"}}
+    </a>
+  {{/if}}
+
+  <ul
+    {{on-resize this.checkScroll}}
+    {{on "scroll" this.watchScroll}}
+    {{did-insert this.scrollToActive}}
+    class="nav-pills action-list"
+  >
+    {{yield}}
+  </ul>
+
+  {{#if this.hasScroll}}
+    <a
+      role="button"
+      {{on "mousedown" this.horizScroll}}
+      class="nav-overflow__scroll-right btn-flat {{if this.hideRightScroll "transparent"}}"
+    >
+      {{d-icon "chevron-right"}}
+    </a>
+  {{/if}}
+</div>
diff --git a/app/assets/javascripts/discourse/app/templates/preferences.hbs b/app/assets/javascripts/discourse/app/templates/preferences.hbs
index acd0dd7e4b4..b2aa84d5020 100644
--- a/app/assets/javascripts/discourse/app/templates/preferences.hbs
+++ b/app/assets/javascripts/discourse/app/templates/preferences.hbs
@@ -1,12 +1,14 @@
 {{#if this.currentUser.redesigned_user_page_nav_enabled}}
   <DSection @pageClass="user-preferences" />
-
-  <UserNav::PreferencesNav
-    @user={{this.model}}
-    @viewingSelf={{this.viewingSelf}}
-    @model={{this.model}}
-    @siteSettings={{this.siteSettings}}
-  />
+  <div class="user-navigation user-navigation-secondary">
+    <HorizontalOverflowNav>
+      <UserNav::PreferencesNav
+          @user={{this.model}}
+          @viewingSelf={{this.viewingSelf}}
+          @model={{this.model}}
+          @siteSettings={{this.siteSettings}}/>
+    </HorizontalOverflowNav>
+  </div>
 {{else}}
   <DSection @pageClass="user-preferences" @class="user-secondary-navigation">
     <MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">
diff --git a/app/assets/javascripts/discourse/app/templates/user-invited.hbs b/app/assets/javascripts/discourse/app/templates/user-invited.hbs
index d634e12bf92..6824427a306 100644
--- a/app/assets/javascripts/discourse/app/templates/user-invited.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user-invited.hbs
@@ -3,11 +3,11 @@
     <DSection @pageClass="user-invites" />
 
     <div class="user-navigation user-navigation-secondary">
-      <ul id="navigation-bar" class="nav-pills action-list">
+      <HorizontalOverflowNav>
         <NavItem @route="userInvited.show" @routeParam="pending" @i18nLabel={{this.pendingLabel}} />
         <NavItem @route="userInvited.show" @routeParam="expired" @i18nLabel={{this.expiredLabel}} />
         <NavItem @route="userInvited.show" @routeParam="redeemed" @i18nLabel={{this.redeemedLabel}} />
-      </ul>
+      </HorizontalOverflowNav>
     </div>
   {{else}}
     <DSection @class="user-secondary-navigation" @pageClass="user-invites">
diff --git a/app/assets/javascripts/discourse/app/templates/user/activity.hbs b/app/assets/javascripts/discourse/app/templates/user/activity.hbs
index 51975ad67bc..f75cd0c2d04 100644
--- a/app/assets/javascripts/discourse/app/templates/user/activity.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/activity.hbs
@@ -2,56 +2,17 @@
   <DSection @pageClass="user-activity" />
 
   <div class="user-navigation user-navigation-secondary">
-    <ul class="nav-pills action-list">
-      <DNavigationItem @route="userActivity.index">
-        {{d-icon "stream"}}
-        <span>{{i18n "user.filters.all"}}</span>
-      </DNavigationItem>
-      <DNavigationItem @route="userActivity.topics">
-        {{d-icon "list-ul"}}
-        <span>{{i18n "user_action_groups.4"}}</span>
-      </DNavigationItem>
-      <DNavigationItem @route="userActivity.replies">
-        {{d-icon "reply"}}
-        <span>{{i18n "user_action_groups.5"}}</span>
-      </DNavigationItem>
-
-      {{#if this.user.showRead}}
-        <DNavigationItem @route="userActivity.read" @title={{i18n "user.read_help"}}>
-          {{d-icon "history"}}
-          <span>{{i18n "user.read"}}</span>
-        </DNavigationItem>
-      {{/if}}
-
-      {{#if this.user.showDrafts}}
-        <DNavigationItem @route="userActivity.drafts">
-          {{d-icon "pencil-alt"}}
-          <span>{{this.draftLabel}}</span>
-        </DNavigationItem>
-      {{/if}}
-
-      {{#if (gt this.model.pending_posts_count 0)}}
-        <DNavigationItem @route="userActivity.pending">
-          {{d-icon "clock"}}
-          <span>{{this.pendingLabel}}</span>
-        </DNavigationItem>
-      {{/if}}
-
-      <DNavigationItem @route="userActivity.likesGiven">
-        {{d-icon "heart"}}
-        <span>{{i18n "user_action_groups.1"}}</span>
-      </DNavigationItem>
-
-      {{#if this.user.showBookmarks}}
-        <DNavigationItem @route="userActivity.bookmarks">
-          {{d-icon "bookmark"}}
-          <span>{{i18n "user_action_groups.3"}}</span>
-        </DNavigationItem>
-      {{/if}}
-
-      <PluginOutlet @name="user-activity-bottom" @connectorTagName="li" @args={{hash model=this.model}} />
-    </ul>
+    <HorizontalOverflowNav>
+      <UserNav::ActivityNav
+        @user={{this.user}}
+        @viewingSelf={{this.viewingSelf}}
+        @model={{this.model}}
+        @siteSettings={{this.siteSettings}}
+        @draftLabel={{this.draftLabel}}
+        @pendingLabel={{this.pendingLabel}}/>
+    </HorizontalOverflowNav>
   </div>
+
 {{else}}
   <DSection @pageClass="user-activity" @class="user-secondary-navigation" @scrollTop={{false}}>
     <nav role="navigation">
diff --git a/app/assets/javascripts/discourse/app/templates/user/notifications.hbs b/app/assets/javascripts/discourse/app/templates/user/notifications.hbs
index 32654afb22d..afd04ce81b4 100644
--- a/app/assets/javascripts/discourse/app/templates/user/notifications.hbs
+++ b/app/assets/javascripts/discourse/app/templates/user/notifications.hbs
@@ -1,54 +1,18 @@
 {{#if this.currentUser.redesigned_user_page_nav_enabled}}
   <DSection @pageClass="user-notifications" />
-
   <div class="user-navigation user-navigation-secondary">
-    <ul id="navigation-bar" class="notifications-nav nav-pills action-list">
-      <li>
-        <LinkTo @route="userNotifications.index">
-          {{d-icon "bell"}}
-          <span>{{i18n "user.filters.all"}}</span>
-        </LinkTo>
-      </li>
-
-      <li>
-        <LinkTo @route="userNotifications.responses">
-          {{d-icon "reply"}}
-          <span>{{i18n "user_action_groups.6"}}</span>
-        </LinkTo>
-      </li>
-
-      <li>
-        <LinkTo @route="userNotifications.likesReceived">
-          {{d-icon "heart"}}
-          <span>{{i18n "user_action_groups.2"}}</span>
-        </LinkTo>
-      </li>
-
-      {{#if this.siteSettings.enable_mentions}}
-        <li>
-          <LinkTo @route="userNotifications.mentions">
-            {{d-icon "at"}}
-            <span>{{i18n "user_action_groups.7"}}</span>
-          </LinkTo>
-        </li>
-      {{/if}}
-
-      <li>
-        <LinkTo @route="userNotifications.edits">
-          {{d-icon "pencil-alt"}}
-          <span>{{i18n "user_action_groups.11"}}</span>
-        </LinkTo>
-      </li>
-
-      <PluginOutlet @name="user-notifications-bottom" @connectorTagName="li" @args={{hash model=this.model}} />
-    </ul>
-
-    {{#if this.model}}
-      <div class="navigation-controls">
-        <DButton @title="user.dismiss_notifications_tooltip" @class="btn btn-default dismiss-notifications" @action={{action "resetNew"}} @label="user.dismiss_notifications" @icon="check" @disabled={{this.allNotificationsRead}} />
-      </div>
-    {{/if}}
+    <HorizontalOverflowNav>
+      <UserNav::NotificationsNav
+          @model={{this.model}}
+          @siteSettings={{this.siteSettings}}/>
+    </HorizontalOverflowNav>
   </div>
+  {{#if this.model}}
+    <div class="navigation-controls">
+      <DButton @title="user.dismiss_notifications_tooltip" @class="btn btn-default dismiss-notifications" @action={{action "resetNew"}} @label="user.dismiss_notifications" @icon="check" @disabled={{this.allNotificationsRead}} />
+    </div>
+  {{/if}}
+
 {{else}}
   <DSection @pageClass="user-notifications" @class="user-secondary-navigation">
     <MobileNav @class="notifications-nav" @desktopClass="notification-list action-list nav-stacked">
diff --git a/app/assets/stylesheets/common/base/new-user.scss b/app/assets/stylesheets/common/base/new-user.scss
index 7c4823718c6..c666ce84612 100644
--- a/app/assets/stylesheets/common/base/new-user.scss
+++ b/app/assets/stylesheets/common/base/new-user.scss
@@ -89,16 +89,24 @@
     gap: 0 0.5em;
     border-bottom: 1px solid var(--primary-low);
 
+    .horizontal-overflow-nav {
+      position: relative;
+      min-width: 0;
+      width: 100%;
+    }
+
     .select-kit .select-kit-header {
       height: 100%;
       padding: 0.5em 1em;
+    }
+
+    .category-breadcrumb {
       @include breakpoint(large) {
         font-size: var(--font-down-1);
       }
-    }
-
-    .category-breadcrumb > li {
-      margin: 0;
+      > li {
+        margin: 0;
+      }
     }
 
     .navigation-controls {
@@ -123,7 +131,7 @@
       .d-icon {
         pointer-events: none;
         margin-bottom: 0.2em;
-        color: var(--tertiary);
+        color: var(--quaternary);
       }
       &.transparent {
         // hiding with opacity so we can transition visibility