UX: updated styles for user nav with sidebar (#18550)

app/assets/javascripts/discourse/app/components/user-nav.hbs

@@ -4,14 +4,14 @@
       <li class="summary">
         <LinkTo @route="user.summary">
           {{d-icon "user"}}
-          {{i18n "user.summary.title"}}
+          <span>{{i18n "user.summary.title"}}</span>
         </LinkTo>
       </li>
 
       <li class="user-activity">
         <LinkTo @route="userActivity">
           {{d-icon "stream"}}
-          {{i18n "user.activity_stream"}}
+          <span>{{i18n "user.activity_stream"}}</span>
         </LinkTo>
       </li>
     {{/unless}}
@@ -19,7 +19,8 @@
     {{#if @showNotificationsTab}}
       <li class="user-notifications">
         <LinkTo @route="userNotifications">
-          {{d-icon "bell" class="glyph"}}{{i18n "user.notifications"}}
+          {{d-icon "bell" class="glyph"}}
+          <span>{{i18n "user.notifications"}}</span>
         </LinkTo>
       </li>
     {{/if}}
@@ -28,7 +29,7 @@
       <li class="private-messages">
         <LinkTo @route="userPrivateMessages">
           {{d-icon "far-envelope"}}
-          {{i18n "user.private_messages"}}
+          <span>{{i18n "user.private_messages"}}</span>
         </LinkTo>
       </li>
     {{/if}}
@@ -37,7 +38,7 @@
       <li class="invited">
         <LinkTo @route="userInvited">
           {{d-icon "user-plus"}}
-          {{i18n "user.invited.title"}}
+          <span>{{i18n "user.invited.title"}}</span>
         </LinkTo>
       </li>
     {{/if}}
@@ -46,7 +47,7 @@
       <li class="badges">
         <LinkTo @route="user.badges">
           {{d-icon "certificate"}}
-          {{i18n "badges.title"}}
+          <span>{{i18n "badges.title"}}</span>
         </LinkTo>
       </li>
     {{/if}}
@@ -60,7 +61,7 @@
       <li class="preferences">
         <LinkTo @route="preferences">
           {{d-icon "cog"}}
-          {{i18n "user.preferences"}}
+          <span>{{i18n "user.preferences"}}</span>
         </LinkTo>
       </li>
     {{/if}}
@@ -69,7 +70,7 @@
       <li class="admin">
         <a href={{@user.adminPath}} >
           {{d-icon "wrench"}}
-          {{i18n "admin.user.manage_user"}}
+          <span>{{i18n "admin.user.manage_user"}}</span>
         </a>
       </li>
     {{/if}}

app/assets/javascripts/discourse/app/components/user-nav/messages-nav.hbs

@@ -9,35 +9,40 @@
 
   <ul class="messages-nav nav-pills action-list">
     {{#if @isPersonal}}
-      <li>
+      <li class="messages-latest">
         <LinkTo @route="userPrivateMessages.index" @model={{@user}}>
-          {{i18n "categories.latest"}}
+          {{d-icon "envelope"}}
+          <span>{{i18n "categories.latest"}}</span>
         </LinkTo>
       </li>
 
-      <li class="archive">
+      <li class="messages-sent">
         <LinkTo @route="userPrivateMessages.sent" @model={{@user}}>
-          {{i18n "user.messages.sent"}}
+          {{d-icon "reply"}}
+          <span>{{i18n "user.messages.sent"}}</span>
         </LinkTo>
       </li>
 
       {{#if @viewingSelf}}
-        <li class="archive">
+        <li class="messages-new">
           <LinkTo @route="userPrivateMessages.new" @model={{@user}} class="new">
-            {{@newLinkText}}
+            {{d-icon "exclamation-circle"}}
+            <span>{{@newLinkText}}</span>
           </LinkTo>
         </li>
 
-        <li class="archive">
+        <li class="messages-unread">
           <LinkTo @route="userPrivateMessages.unread" @model={{@user}} class="unread">
-            {{@unreadLinkText}}
+            {{d-icon "plus-circle"}}
+            <span>{{@unreadLinkText}}</span>
           </LinkTo>
         </li>
       {{/if}}
 
-      <li class="archive">
+      <li class="messages-archive">
         <LinkTo @route="userPrivateMessages.archive" @model={{@user}}>
-          {{i18n "user.messages.archive"}}
+          {{d-icon "archive"}}
+          <span>{{i18n "user.messages.archive"}}</span>
         </LinkTo>
       </li>
     {{/if}}
@@ -45,28 +50,32 @@
     {{#each @user.groups as |group|}}
       {{#if (and @isGroup (eq @groupFilter group.name))}}
         {{#if @viewingSelf}}
-          <li class="archive">
+          <li class="messages-group-latest">
             <LinkTo @route="userPrivateMessages.group" @model={{group.name}}>
-              {{i18n "categories.latest"}}
+              {{d-icon "envelope"}}
+              <span>{{i18n "categories.latest"}}</span>
             </LinkTo>
           </li>
 
-          <li class="archive">
+          <li class="messages-group-new">
             <LinkTo @route="userPrivateMessages.groupNew" @model={{group.name}} class="new">
-              {{@newLinkText}}
+              {{d-icon "exclamation-circle"}}
+              <span>{{@newLinkText}}</span>
             </LinkTo>
           </li>
 
-          <li class="archive">
+          <li class="messages-group-unread">
             <LinkTo @route="userPrivateMessages.groupUnread" @model={{group.name}} class="unread">
-              {{@unreadLinkText}}
+              {{d-icon "plus-circle"}}
+              <span>{{@unreadLinkText}}</span>
             </LinkTo>
           </li>
         {{/if}}
 
-        <li class="archive">
+        <li class="messages-group-archive">
           <LinkTo @route="userPrivateMessages.groupArchive" @model={{group.name}}>
-            {{i18n "user.messages.archive"}}
+            {{d-icon "archive"}}
+            <span>{{i18n "user.messages.archive"}}</span>
           </LinkTo>
         </li>
       {{/if}}
@@ -75,7 +84,8 @@
     {{#if this.displayTags}}
       <li class="tags">
         <LinkTo @route="userPrivateMessages.tags" @model={{@user}}>
-          {{i18n "user.messages.all_tags"}}
+          {{d-icon "tag"}}
+          <span>{{i18n "user.messages.all_tags"}}</span>
         </LinkTo>
       </li>
 

app/assets/javascripts/discourse/app/templates/preferences.hbs

@@ -5,71 +5,80 @@
     <ul class="nav-pills action-list">
       <li class="nav-account">
         <LinkTo @route="preferences.account">
-          {{i18n "user.preferences_nav.account"}}
+          {{d-icon "user"}}
+          <span>{{i18n "user.preferences_nav.account"}}</span>
         </LinkTo>
       </li>
       <li class="nav-security">
         <LinkTo @route="preferences.security">
-          {{i18n "user.preferences_nav.security"}}
+          {{d-icon "lock"}}
+          <span>{{i18n "user.preferences_nav.security"}}</span>
         </LinkTo>
       </li>
       <li class="nav-profile">
         <LinkTo @route="preferences.profile">
-          {{i18n "user.preferences_nav.profile"}}
+          {{d-icon "user"}}
+          <span>{{i18n "user.preferences_nav.profile"}}</span>
         </LinkTo>
       </li>
       <li class="nav-emails">
         <LinkTo @route="preferences.emails">
-          {{i18n "user.preferences_nav.emails"}}
+          {{d-icon "envelope"}}
+          <span>{{i18n "user.preferences_nav.emails"}}</span>
         </LinkTo>
       </li>
       <li class="nav-notifications">
         <LinkTo @route="preferences.notifications">
-          {{i18n "user.preferences_nav.notifications"}}
+          {{d-icon "bell"}}
+          <span>{{i18n "user.preferences_nav.notifications"}}</span>
         </LinkTo>
       </li>
       {{#if this.model.can_change_tracking_preferences}}
         <li class="indent nav-categories">
           <LinkTo @route="preferences.categories">
-            {{i18n "user.preferences_nav.categories"}}
+            {{d-icon "folder"}}
+            <span>{{i18n "user.preferences_nav.categories"}}</span>
           </LinkTo>
         </li>
       {{/if}}
       <li class="indent nav-users">
         <LinkTo @route="preferences.users">
-          {{i18n "user.preferences_nav.users"}}
+          {{d-icon "users"}}
+          <span>{{i18n "user.preferences_nav.users"}}</span>
         </LinkTo>
       </li>
       {{#if (and this.model.can_change_tracking_preferences this.siteSettings.tagging_enabled)}}
         <li class="indent nav-tags">
           <LinkTo @route="preferences.tags">
-            {{i18n "user.preferences_nav.tags"}}
+            {{d-icon "tag"}}
+            <span>{{i18n "user.preferences_nav.tags"}}</span>
           </LinkTo>
         </li>
       {{/if}}
       <li class="nav-interface">
         <LinkTo @route="preferences.interface">
-          {{i18n "user.preferences_nav.interface"}}
+          {{d-icon "desktop"}}
+          <span>{{i18n "user.preferences_nav.interface"}}</span>
         </LinkTo>
       </li>
 
       {{#if this.siteSettings.enable_experimental_sidebar_hamburger}}
         <li class="indent nav-sidebar">
           <LinkTo @route="preferences.sidebar">
-            {{i18n "user.preferences_nav.sidebar"}}
+            {{d-icon "bars"}}
+            <span>{{i18n "user.preferences_nav.sidebar"}}</span>
           </LinkTo>
         </li>
       {{/if}}
 
-      <PluginOutlet @name="user-preferences-nav-under-interface" @tagName="span" @connectorTagName="div" @args={{hash model=this.model}} />
+      <PluginOutlet @name="user-preferences-nav-under-interface" @connectorTagName="div" @args={{hash model=this.model}} />
 
-      {{#if this.model.userApiKeys}}
-        <li class="nav-apps">
-          <LinkTo @route="preferences.apps">
-            {{i18n "user.preferences_nav.apps"}}
-          </LinkTo>
-        </li>
-      {{/if}}
+      <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=this.model}} />
     </ul>

app/assets/javascripts/discourse/app/templates/user/activity.hbs

@@ -3,32 +3,50 @@
 
   <div class="user-navigation user-navigation-secondary">
     <ul class="nav-pills action-list">
-      <DNavigationItem @route="userActivity.index">{{i18n "user.filters.all"}}</DNavigationItem>
-      <DNavigationItem @route="userActivity.topics">{{i18n "user_action_groups.4"}}</DNavigationItem>
-      <DNavigationItem @route="userActivity.replies">{{i18n "user_action_groups.5"}}</DNavigationItem>
+      <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"}}>
-          {{i18n "user.read"}}
+          {{d-icon "history"}}
+          <span>{{i18n "user.read"}}</span>
         </DNavigationItem>
       {{/if}}
 
       {{#if this.user.showDrafts}}
         <DNavigationItem @route="userActivity.drafts">
-          {{this.draftLabel}}
+          {{d-icon "pencil-alt"}}
+          <span>{{this.draftLabel}}</span>
         </DNavigationItem>
       {{/if}}
 
       {{#if (gt this.model.pending_posts_count 0)}}
         <DNavigationItem @route="userActivity.pending">
-          {{this.pendingLabel}}
+          {{d-icon "clock"}}
+          <span>{{this.pendingLabel}}</span>
         </DNavigationItem>
       {{/if}}
 
-      <DNavigationItem @route="userActivity.likesGiven">{{i18n "user_action_groups.1"}}</DNavigationItem>
+      <DNavigationItem @route="userActivity.likesGiven">
+        {{d-icon "heart"}}
+        <span>{{i18n "user_action_groups.1"}}</span>
+      </DNavigationItem>
 
       {{#if this.user.showBookmarks}}
-        <DNavigationItem @route="userActivity.bookmarks">{{i18n "user_action_groups.3"}}</DNavigationItem>
+        <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}} />

app/assets/javascripts/discourse/app/templates/user/notifications.hbs

@@ -2,36 +2,41 @@
   <DSection @pageClass="user-notifications" />
 
   <div class="user-navigation user-navigation-secondary">
-    <ul id="navigation-bar" class="messages-nav nav-pills action-list">
+    <ul id="navigation-bar" class="notifications-nav nav-pills action-list">
       <li>
         <LinkTo @route="userNotifications.index">
-          {{i18n "user.filters.all"}}
+          {{d-icon "bell"}}
+          <span>{{i18n "user.filters.all"}}</span>
         </LinkTo>
       </li>
 
       <li>
         <LinkTo @route="userNotifications.responses">
-          {{i18n "user_action_groups.6"}}
+          {{d-icon "reply"}}
+          <span>{{i18n "user_action_groups.6"}}</span>
         </LinkTo>
       </li>
 
       <li>
         <LinkTo @route="userNotifications.likesReceived">
-          {{i18n "user_action_groups.2"}}
+          {{d-icon "heart"}}
+          <span>{{i18n "user_action_groups.2"}}</span>
         </LinkTo>
       </li>
 
       {{#if this.siteSettings.enable_mentions}}
         <li>
           <LinkTo @route="userNotifications.mentions">
-            {{i18n "user_action_groups.7"}}
+            {{d-icon "at"}}
+            <span>{{i18n "user_action_groups.7"}}</span>
           </LinkTo>
         </li>
       {{/if}}
 
       <li>
         <LinkTo @route="userNotifications.edits">
-          {{i18n "user_action_groups.11"}}
+          {{d-icon "pencil-alt"}}
+          <span>{{i18n "user_action_groups.11"}}</span>
         </LinkTo>
       </li>
 

app/assets/stylesheets/common/base/new-user.scss

@@ -1,43 +1,120 @@
 .new-user-wrapper {
+  margin-top: -15px; // temp, can remove margin from sibling element after nav finalized
   .user-navigation {
-    &.user-navigation-secondary {
-      margin-top: 0.5em;
+    --user-navigation__border-width: 4px;
+    .nav-pills {
+      width: 100%;
+      margin: 0;
+      border-bottom: 1px solid var(--primary-low);
+      .d-icon {
+        font-size: var(--font-down-1);
+      }
 
-      .nav-pills {
-        border-bottom: 1px solid var(--primary-low);
+      &.main-nav {
+        @include breakpoint(medium) {
+          li {
+            .d-icon {
+              font-size: var(--font-up-1);
+              margin: 0;
+            }
+            span {
+              display: none;
+            }
+          }
+        }
+
+        .has-sidebar-page & {
+          @include breakpoint(large) {
+            span {
+              display: none;
+            }
+          }
+        }
+      }
+
+      li {
+        flex: 1 1 auto;
+        margin: 0;
+        overflow: hidden;
+        display: flex;
+
+        a {
+          box-sizing: border-box;
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          position: relative;
+          border-bottom: var(--user-navigation__border-width) solid transparent;
+          padding: calc(0.75em + var(--user-navigation__border-width)) 0.5em
+            0.75em;
+          transition: color 0.25s;
+
+          @include breakpoint(extra-large) {
+            font-size: var(--font-0);
+          }
+
+          span {
+            line-height: normal;
+            @include ellipsis;
+          }
+
+          &:hover,
+          &:focus {
+            background: transparent;
+            color: var(--quaternary);
+            border-bottom: var(--user-navigation__border-width) solid
+              var(--quaternary-low);
+          }
+
+          &.active {
+            color: var(--quaternary);
+            background: transparent;
+            border-bottom: var(--user-navigation__border-width) solid
+              var(--quaternary);
+          }
+        }
+      }
+    }
+  }
+
+  .user-navigation-secondary {
+    --user-navigation__border-width: 2px;
+    min-width: 0;
+    margin: 0.5em 0;
+    gap: 0 0.5em;
+
+    .select-kit .select-kit-header {
+      height: 100%;
+      padding: 0.5em 1em;
+      @include breakpoint(large) {
+        font-size: var(--font-down-1);
+      }
+    }
+
+    .category-breadcrumb > li {
+      margin: 0;
+    }
+
+    .navigation-controls {
+      flex-wrap: nowrap;
+      @include breakpoint(large) {
+        font-size: var(--font-down-1);
       }
     }
 
     .nav-pills {
-      width: 100%;
-      border-bottom: 2px solid var(--primary-low);
-      margin: 0;
+      flex: 1 1 auto;
+      font-size: var(--font-down-1);
+      flex-wrap: wrap;
+      justify-content: flex-start;
 
       li {
-        margin: 0;
+        flex: 1 1 auto;
 
         a {
-          display: inline-block;
-          text-align: center;
-          position: relative;
-          border-bottom: 2px solid transparent;
-          padding: 0.5em 1em;
-
-          &.active,
-          &:hover {
-            color: var(--quaternary);
-            background-color: var(--secondary);
-          }
-
-          &.active::after {
-            display: block;
-            content: "";
-            position: absolute;
-            width: 100%;
-            border-bottom: 2px solid var(--quaternary);
-            bottom: -4px;
-            left: 0px;
-          }
+          padding: 0.5em 0.5em
+            calc(0.5em + var(--user-navigation__border-width));
         }
       }
     }
@@ -76,4 +153,9 @@
       }
     }
   }
+
+  .empty-state {
+    padding: 0;
+    margin: 1em 0;
+  }
 }

app/assets/stylesheets/common/components/navs.scss

@@ -19,7 +19,6 @@
 
 .nav-pills {
   @extend %nav;
-  @extend .clearfix;
 
   display: flex;
   flex-direction: row;

app/assets/stylesheets/desktop/new-user.scss

@@ -3,9 +3,9 @@
     // Grid layout
     width: 100%;
     display: grid;
-    grid-template-columns: 1fr 5fr;
+    grid-template-columns: 1fr;
     grid-template-rows: auto 1fr;
-    grid-gap: 20px;
+    grid-gap: 0;
 
     .user-navigation-secondary {
       grid-column-start: 1;
@@ -25,7 +25,8 @@
     }
 
     .user-content {
-      margin-top: 1em;
+      padding: 0;
+      margin-top: 2em;
       grid-column-start: 1;
       grid-column-end: 3;
       grid-row-start: 1;

app/assets/stylesheets/mobile/new-user.scss

@@ -5,20 +5,21 @@
     .nav-pills {
       margin: 0.5em 0;
       overflow-x: auto;
-
       scrollbar-width: none;
 
       &::-webkit-scrollbar {
         display: none;
       }
+    }
+  }
 
+  .user-navigation-secondary {
+    font-size: var(--font-up-1);
+
+    .nav-pills {
+      flex-wrap: nowrap;
       li {
-        a {
-          display: flex;
-          flex-direction: row;
-          padding: 0.5em 0.5em;
-          white-space: nowrap;
-        }
+        flex: 1 0 auto;
       }
     }
   }
@@ -51,4 +52,18 @@
       @include ellipsis;
     }
   }
+
+  #navigation-bar {
+    flex-wrap: nowrap;
+  }
+
+  .navigation-controls {
+    margin-top: 1em;
+  }
+}
+
+.new-user-content-wrapper {
+  .user-content {
+    margin-top: 2em;
+  }
 }