UX: Revamp styling of sidebar

The following changes are made in this commit:

1. Move caret icon in sidebar section header to the right.
1. Each row in sidebar takes the full width which enables us to do a
full width highlight on hover and when sidebar link is active.
1. Ensure each row in Sidebar is of the same height.

Internal refs: /t/70546, /t/72196, /t/71820

app/assets/javascripts/discourse/app/components/sidebar/categories-section.hbs

@@ -1,8 +1,6 @@
 <Sidebar::Section
   @sectionName="categories"
-  @headerRoute="discovery.categories"
   @headerLinkText={{i18n "sidebar.sections.categories.header_link_text"}}
-  @headerLinkTitle={{i18n "sidebar.sections.categories.header_link_title"}}
   @headerActions={{array (hash action=this.editTracked title=(i18n "sidebar.sections.categories.header_action_title"))}}
   @headerActionsIcon="pencil-alt"
   @collapsable={{@collapsable}} >

app/assets/javascripts/discourse/app/components/sidebar/community-section.hbs

@@ -1,9 +1,6 @@
 <Sidebar::Section
   @sectionName="community"
-  @headerRoute="discovery.latest"
-  @headerQuery={{hash f=undefined}}
   @headerLinkText={{i18n "sidebar.sections.community.header_link_text"}}
-  @headerLinkTitle={{i18n "sidebar.sections.community.header_link_title"}}
   @headerActionsIcon="plus"
   @headerActions={{array (hash action=this.composeTopic title=(i18n "sidebar.sections.community.header_action_title"))}}
   @collapsable={{@collapsable}} >

app/assets/javascripts/discourse/app/components/sidebar/messages-section.hbs

@@ -1,12 +1,9 @@
 <Sidebar::Section
   @sectionName="messages"
-  @headerRoute="userPrivateMessages.index"
-  @headerModel={{this.currentUser}}
   @headerActionIcon="plus"
   @headerActions={{array (hash action=(fn (route-action "composePrivateMessage") null null))}}
   @headerActionsIcon="plus"
   @headerLinkText={{i18n "sidebar.sections.messages.header_link_text"}}
-  @headerLinkTitle={{i18n "sidebar.sections.messages.header_link_title"}}
   @collapsable={{@collapsable}}>
 
   {{#each this.personalMessagesSectionLinks as |personalMessageSectionLink|}}

app/assets/javascripts/discourse/app/components/sidebar/more-section-links.hbs

@@ -3,28 +3,30 @@
 {{/if}}
 
 <details class="sidebar-more-section-links-details" {{on "toggle" this.toggleSectionLinks}}>
-  <summary class="sidebar-more-section-links-details-summary" >
+  <summary class="sidebar-more-section-links-details-summary sidebar-row" >
     {{i18n "sidebar.more"}}
   </summary>
 
   {{#if this.shouldDisplaySectionLinks}}
-    <div class="sidebar-more-section-links-details-content"
+    <div class="sidebar-more-section-links-details-content-wrapper"
       {{did-insert this.registerClickListener}}
       {{will-destroy this.unregisterClickListener}} >
 
-      <div class="sidebar-more-section-links-details-content-main">
+      <div class="sidebar-more-section-link-details-content">
-        {{#each this.sectionLinks as |sectionLink|}}
+        <div class="sidebar-more-section-links-details-content-main">
-          <Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
+          {{#each this.sectionLinks as |sectionLink|}}
-        {{/each}}
-      </div>
-
-      {{#if (gt this.secondarySectionLinks.length 0)}}
-        <div class="sidebar-more-section-links-details-content-secondary">
-          {{#each this.secondarySectionLinks as |sectionLink|}}
             <Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
           {{/each}}
         </div>
-      {{/if}}
+
+        {{#if (gt this.secondarySectionLinks.length 0)}}
+          <div class="sidebar-more-section-links-details-content-secondary">
+            {{#each this.secondarySectionLinks as |sectionLink|}}
+              <Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
+            {{/each}}
+          </div>
+        {{/if}}
+      </div>
     </div>
   {{/if}}
 </details>

app/assets/javascripts/discourse/app/components/sidebar/section-header.hbs

@@ -0,0 +1,14 @@
+{{#if @collapsable}}
+  <span
+    role="button"
+    title={{i18n "sidebar.toggle_section"}}
+    class="sidebar-section-header sidebar-section-header-collapsable"
+    {{on "click" @toggleSectionDisplay}}
+  >
+    {{yield}}
+  </span>
+{{else}}
+  <span class="sidebar-section-header" title={{i18n "sidebar.toggle_section"}}>
+    {{yield}}
+  </span>
+{{/if}}

app/assets/javascripts/discourse/app/components/sidebar/section-header.js

@@ -0,0 +1,3 @@
+import templateOnly from "@ember/component/template-only";
+
+export default templateOnly();

app/assets/javascripts/discourse/app/components/sidebar/section-link.hbs

@@ -51,21 +51,21 @@
           {{/if}}
         </span>
       {{/if}}
-    </Sidebar::SectionLinkTo>
 
-    {{#if @hoverValue}}
+      {{#if @hoverValue}}
-      <span class="sidebar-section-link-hover">
+        <span class="sidebar-section-link-hover">
-        <button
+          <button
-          type="button"
+            type="button"
-          title={{@hoverTitle}}
+            title={{@hoverTitle}}
-          class="sidebar-section-hover-button"
+            class="sidebar-section-hover-button"
-          {{on "click" @hoverAction}}
+            {{on "click" @hoverAction}}
-          >
+            >
-          {{#if (eq @hoverType "icon")}}
+            {{#if (eq @hoverType "icon")}}
-            {{d-icon @hoverValue class="hover-icon"}}
+              {{d-icon @hoverValue class="hover-icon"}}
-          {{/if}}
+            {{/if}}
-        </button>
+          </button>
-      </span>
+        </span>
-    {{/if}}
+      {{/if}}
+    </Sidebar::SectionLinkTo>
   {{/if}}
 </div>

app/assets/javascripts/discourse/app/components/sidebar/section-link.js

@@ -12,6 +12,7 @@ export default class SectionLink extends Component {
     let classNames = [
       "sidebar-section-link",
       `sidebar-section-link-${this.args.linkName}`,
+      "sidebar-row",
     ];
 
     if (this.args.class) {

app/assets/javascripts/discourse/app/components/sidebar/section-message.hbs

@@ -1,4 +1,4 @@
-<div class="sidebar-section-message-wrapper">
+<div class="sidebar-section-message-wrapper sidebar-row">
   <div class="sidebar-section-message">
     {{yield}}
   </div>

app/assets/javascripts/discourse/app/components/sidebar/section.hbs

@@ -1,39 +1,16 @@
 <div class={{concat "sidebar-section-wrapper sidebar-section-" @sectionName}}>
-  <div class="sidebar-section-header">
+  <div class="sidebar-section-header-wrapper sidebar-row">
-    {{#if @collapsable}}
+    <Sidebar::SectionHeader @collapsable={{@collapsable}} @toggleSectionDisplay={{this.toggleSectionDisplay}}>
-      <button
+      <span class="sidebar-section-header-text">
-        type="button"
-        class="sidebar-section-header-caret"
-        title="toggle section"
-        {{on "click" this.toggleSectionDisplay}}
-      >
-        {{d-icon this.headerCaretIcon}}
-      </button>
-    {{/if}}
-
-    {{#if @headerRoute}}
-      <LinkTo
-        @route={{@headerRoute}}
-        @query={{@headerQuery}}
-        @models={{if
-          @headerModel
-          (array @headerModel)
-          (if @headerModels @headerModels (array))
-        }}
-        class="sidebar-section-header-link"
-        title={{@headerLinkTitle}}
-      >
-
-        {{@headerLinkText}}
-      </LinkTo>
-    {{else}}
-      <span
-        title={{@headerLinkTitle}}
-        class="sidebar-section-header-text"
-      >
         {{@headerLinkText}}
       </span>
-    {{/if}}
+
+      {{#if @collapsable}}
+        <span class="sidebar-section-header-caret">
+          {{d-icon this.headerCaretIcon}}
+        </span>
+      {{/if}}
+    </Sidebar::SectionHeader>
 
     {{#if this.isSingleHeaderAction}}
       {{#each @headerActions as |headerAction|}}

app/assets/javascripts/discourse/app/components/sidebar/sections.hbs

@@ -13,7 +13,6 @@
   {{#each this.customSections as |customSection|}}
     <Sidebar::Section
       @sectionName={{customSection.name}}
-      @headerRoute={{customSection.route}}
       @headerLinkText={{customSection.text}}
       @headerLinkTitle={{customSection.title}}
       @headerActionsIcon={{customSection.actionsIcon}}

app/assets/javascripts/discourse/app/components/sidebar/tags-section.hbs

@@ -1,8 +1,6 @@
 <Sidebar::Section
   @sectionName="tags"
-  @headerRoute="tags"
   @headerLinkText={{i18n "sidebar.sections.tags.header_link_text"}}
-  @headerLinkTitle={{i18n "sidebar.sections.tags.header_link_title"}}
   @headerActions={{array (hash action=this.editTracked title=(i18n "sidebar.sections.tags.header_action_title"))}}
   @headerActionsIcon="pencil-alt"
   @collapsable={{@collapsable}}>

app/assets/javascripts/discourse/app/lib/sidebar/base-custom-sidebar-section.js

@@ -13,18 +13,6 @@ export default class BaseCustomSidebarSection {
     this._notImplemented();
   }
 
-  /**
-   * @returns {string} The Ember route which the section header link should link to.
-   */
-  get route() {}
-
-  /**
-   * @returns {string} Title for the header
-   */
-  get title() {
-    this._notImplemented();
-  }
-
   /**
    * @returns {string} Text for the header
    */

app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js

@@ -96,12 +96,11 @@ acceptance("Sidebar - Categories Section", function (needs) {
 
   test("clicking on section header link", async function (assert) {
     await visit("/t/280");
-    await click(".sidebar-section-categories .sidebar-section-header-link");
+    await click(".sidebar-section-categories .sidebar-section-header");
 
-    assert.strictEqual(
+    assert.notOk(
-      currentURL(),
+      exists(".sidebar-section-categories .sidebar-section-content"),
-      "/categories",
+      "hides the content of the section"
-      "it should transition to the categories page"
     );
   });
 

app/assets/javascripts/discourse/tests/acceptance/sidebar-community-section-test.js

@@ -67,8 +67,8 @@ acceptance("Sidebar - Community Section", function (needs) {
     );
   });
 
-  test("clicking on section caret button", async function (assert) {
+  test("clicking on section header link", async function (assert) {
-    await visit("/");
+    await visit("/t/280");
 
     assert.ok(
       exists(".sidebar-section-community .sidebar-section-content"),
@@ -76,19 +76,19 @@ acceptance("Sidebar - Community Section", function (needs) {
     );
 
     assert.strictEqual(
-      query(".sidebar-section-community .sidebar-section-header-caret").title,
+      query(".sidebar-section-community .sidebar-section-header").title,
       I18n.t("sidebar.toggle_section"),
       "caret has the right title"
     );
 
-    await click(".sidebar-section-community .sidebar-section-header-caret");
+    await click(".sidebar-section-community .sidebar-section-header");
 
-    assert.ok(
+    assert.notOk(
-      !exists(".sidebar-section-community .sidebar-section-content"),
+      exists(".sidebar-section-community .sidebar-section-content"),
-      "hides content section"
+      "hides the content of the section"
     );
 
-    await click(".sidebar-section-community .sidebar-section-header-caret");
+    await click(".sidebar-section-community .sidebar-section-header");
 
     assert.ok(
       exists(".sidebar-section-community .sidebar-section-content"),
@@ -96,30 +96,6 @@ acceptance("Sidebar - Community Section", function (needs) {
     );
   });
 
-  test("clicking on section header link", async function (assert) {
-    await visit("/t/280");
-    await click(".sidebar-section-community .sidebar-section-header-link");
-
-    assert.strictEqual(
-      currentURL(),
-      "/latest",
-      "it should transition to the homepage"
-    );
-
-    assert.strictEqual(
-      count(".sidebar-section-community .sidebar-section-link.active"),
-      1,
-      "only one link is marked as active"
-    );
-
-    assert.ok(
-      exists(
-        ".sidebar-section-community .sidebar-section-link-everything.active"
-      ),
-      "the everything link is marked as active"
-    );
-  });
-
   // TODO(tgxworld): Flaky probably due to assertions running before event listener callbacks have completed.
   skip("clicking on more... link", async function (assert) {
     await visit("/");

app/assets/javascripts/discourse/tests/acceptance/sidebar-messages-section-test.js

@@ -82,12 +82,11 @@ acceptance(
 
     test("clicking on section header link", async function (assert) {
       await visit("/");
-      await click(".sidebar-section-messages .sidebar-section-header-link");
+      await click(".sidebar-section-messages .sidebar-section-header");
 
-      assert.strictEqual(
+      assert.notOk(
-        currentURL(),
+        exists(".sidebar-section-messages .sidebar-section-content"),
-        `/u/eviltrout/messages`,
+        "hides the content of the section"
-        "it should transition to the user's messages"
       );
     });
 

app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js

@@ -48,7 +48,7 @@ acceptance("Sidebar - Mobile - User with sidebar enabled", function (needs) {
     );
 
     await click(".hamburger-dropdown");
-    await click(".sidebar-section-header-link");
+    await click(".sidebar-section-community .sidebar-section-link-everything");
 
     assert.ok(
       !exists(".sidebar-hamburger-dropdown"),

app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js

@@ -37,14 +37,6 @@ acceptance("Sidebar - Plugin API", function (needs) {
               return "test-chat-channels";
             }
 
-            get route() {
-              return "discovery.latest";
-            }
-
-            get title() {
-              return "chat channels title";
-            }
-
             get text() {
               return "chat channels text";
             }
@@ -208,16 +200,9 @@ acceptance("Sidebar - Plugin API", function (needs) {
 
     await visit("/");
 
-    assert.strictEqual(
-      query(".sidebar-section-test-chat-channels .sidebar-section-header-link")
-        .title,
-      "chat channels title",
-      "displays header with correct title attribute"
-    );
-
     assert.strictEqual(
       query(
-        ".sidebar-section-test-chat-channels .sidebar-section-header-link"
+        ".sidebar-section-test-chat-channels .sidebar-section-header"
       ).textContent.trim(),
       "chat channels text",
       "displays header with correct text"
@@ -367,14 +352,6 @@ acceptance("Sidebar - Plugin API", function (needs) {
             return "test-chat-channels";
           }
 
-          get route() {
-            return "discovery.latest";
-          }
-
-          get title() {
-            return "chat channels title";
-          }
-
           get text() {
             return "chat channels text";
           }
@@ -404,7 +381,7 @@ acceptance("Sidebar - Plugin API", function (needs) {
 
     assert.strictEqual(
       query(
-        ".sidebar-section-test-chat-channels .sidebar-section-header-link"
+        ".sidebar-section-test-chat-channels .sidebar-section-header"
       ).textContent.trim(),
       "chat channels text",
       "displays header with correct text"

app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js

@@ -87,17 +87,6 @@ acceptance("Sidebar - Tags section", function (needs) {
     });
   });
 
-  test("clicking on section header link", async function (assert) {
-    await visit("/");
-    await click(".sidebar-section-tags .sidebar-section-header-link");
-
-    assert.strictEqual(
-      currentURL(),
-      "/tags",
-      "it should transition to the tags page"
-    );
-  });
-
   test("clicking on section header button", async function (assert) {
     await visit("/");
     await click(".sidebar-section-tags .sidebar-section-header-button");

app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js

@@ -16,7 +16,7 @@ module("Integration | Component | sidebar | section-link", function (hooks) {
 
     assert.strictEqual(
       query("a").className,
-      "sidebar-section-link sidebar-section-link-test ember-view",
+      "sidebar-section-link sidebar-section-link-test sidebar-row ember-view",
       "has the right class attribute for the link"
     );
   });
@@ -28,7 +28,7 @@ module("Integration | Component | sidebar | section-link", function (hooks) {
 
     assert.strictEqual(
       query("a").className,
-      "sidebar-section-link sidebar-section-link-test 123 abc ember-view",
+      "sidebar-section-link sidebar-section-link-test sidebar-row 123 abc ember-view",
       "has the right class attribute for the link"
     );
   });

app/assets/stylesheets/common/base/sidebar-more-section-links.scss

@@ -1,37 +1,42 @@
 .sidebar-more-section-links-details {
+  &:focus,
+  &:hover {
+    background: var(--d-sidebar-highlight-color);
+  }
+
   .sidebar-more-section-links-details-summary {
-    padding: 0.35em 0.5em;
     color: var(--primary-high);
-    font-size: var(--font-down-1);
     transition: background-color 0.25s;
     display: flex;
     align-items: center;
     list-style: none;
+    box-sizing: border-box;
 
     .d-icon {
       margin-left: auto;
       color: var(--primary-medium);
     }
 
-    &:focus,
-    &:hover {
-      background: var(--d-sidebar-highlight-color);
-    }
-
     &::before {
       display: none;
     }
   }
 
-  .sidebar-more-section-links-details-content {
+  .sidebar-more-section-links-details-content-wrapper {
     position: absolute;
-    background-color: var(--secondary);
     width: 100%;
-    box-shadow: shadow("dropdown");
+    z-index: z("modal", "content") + 1;
-    z-index: z("base") + 1;
+    background: transparent;
+  }
 
-    .sidebar-section-link-wrapper {
+  .sidebar-more-section-link-details-content {
-      margin-left: none;
+    background-color: var(--secondary);
+    box-shadow: shadow("dropdown");
+    border-radius: 5px;
+    margin: 0 calc(var(--d-sidebar-row-horizontal-padding) * 2 / 3);
+
+    .sidebar-row {
+      padding: calc(var(--d-sidebar-row-horizontal-padding) / 3);
     }
   }
 
@@ -39,9 +44,3 @@
     border-top: 1.5px solid var(--primary-low);
   }
 }
-
-#main-outlet-wrapper {
-  .sidebar-more-section-links-details {
-    margin-left: 1.5em;
-  }
-}

app/assets/stylesheets/common/base/sidebar-section-link.scss

@@ -7,22 +7,18 @@
     display: inline-flex;
     width: 100%;
     align-items: center;
-    padding: 0.35em 0.5em;
     color: var(--primary-high);
-    font-size: var(--font-down-1);
     transition: background-color 0.25s;
 
     &:focus,
     &:hover {
       background: var(--d-sidebar-highlight-color);
-      .sidebar-section-link-prefix.icon svg.prefix-badge {
-        background: var(--d-sidebar-highlight-color);
-      }
     }
 
     &.active {
       color: var(--primary);
       font-weight: bold;
+      background: var(--d-sidebar-highlight-color);
     }
 
     .sidebar-section-link-content-badge {
@@ -36,7 +32,8 @@
     }
 
     .sidebar-section-link-suffix {
-      font-size: var(--font-down-1);
+      margin-left: 0.25rem;
+      font-size: var(--font-down-4);
     }
 
     .sidebar-section-link-content-text {
@@ -67,7 +64,9 @@
   .sidebar-section-link-group-messages-new,
   .sidebar-section-link-group-messages-unread,
   .sidebar-section-link-group-messages-archive {
-    margin-left: 0.5em;
+    .sidebar-section-link-content-text {
+      margin-left: 0.5em;
+    }
   }
 
   .sidebar-section-link-prefix {
@@ -113,13 +112,9 @@
     }
   }
 
-  .sidebar-section-link-suffix.icon {
-    align-items: center;
-    display: flex;
-    margin-left: 0.5em;
-  }
-
   .sidebar-section-link-hover {
+    margin-left: auto;
+
     .sidebar-section-hover-button {
       display: none;
       color: var(--primary-medium);
@@ -146,9 +141,3 @@
     }
   }
 }
-
-#main-outlet-wrapper
-  .sidebar-section-link-wrapper:not(.sidebar-more-section-links-details-content
-    .sidebar-section-link-wrapper) {
-  margin-left: 1.5em;
-}

app/assets/stylesheets/common/base/sidebar-section.scss

@@ -1,12 +1,12 @@
 .sidebar-section-wrapper {
   margin-bottom: 1em;
 
-  .sidebar-section-header {
+  .sidebar-section-header-wrapper {
     display: flex;
     text-transform: uppercase;
-    font-size: 1em;
     font-weight: bold;
     align-items: stretch;
+    box-sizing: border-box;
 
     .select-kit {
       .btn {
@@ -21,29 +21,32 @@
         color: var(--primary-medium);
         margin-right: 0;
       }
+
       summary {
         padding: 0.25em 0.5em;
       }
     }
   }
 
-  .sidebar-section-header-link,
+  .sidebar-section-header {
-  .sidebar-section-header-text {
     @include ellipsis;
     flex: 1 1 auto;
+    font-size: var(--font-1);
     color: var(--primary);
-    font-size: var(--font-down-1);
+    align-items: center;
-    padding: 0.25em 0.5em;
+
+    &.sidebar-section-header-collapsable {
+      cursor: pointer;
+    }
   }
 
-  .sidebar-section-header-link {
+  .sidebar-section-header-text {
-    &:visited {
+    font-weight: bold;
-      color: var(--primary);
+    margin-right: 0.25em;
-    }
+  }
-    &:focus,
+
-    &:hover {
+  .sidebar-section-header-caret {
-      background: var(--d-sidebar-highlight-color);
+    font-size: var(--font-down-2);
-    }
   }
 
   .sidebar-section-header-button {
@@ -77,54 +80,12 @@
   }
 
   .sidebar-section-message {
-    padding: 0.25em 0.5em;
-    font-size: var(--font-down-1);
     color: var(--primary-high);
   }
 
-  .sidebar-section-header-caret {
-    flex: 0 0 auto;
-    width: 1.5em;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    border: none;
-    background: transparent;
-    padding: 0;
-
-    .d-icon {
-      top: -0.1em; // visual alignment
-    }
-
-    .discourse-no-touch & {
-      &:hover {
-        svg {
-          color: var(--primary-high);
-        }
-      }
-    }
-
-    svg {
-      display: block;
-      flex: 0 0 auto;
-      transition: color 0.25s;
-    }
-
-    .d-icon {
-      font-size: $font-down-1;
-      color: var(--primary-medium);
-    }
-  }
-
   .sidebar-section-content {
     hr {
       margin: 0em 1.5em;
     }
   }
 }
-
-#main-outlet-wrapper .sidebar-section-wrapper {
-  .sidebar-section-message-wrapper {
-    margin-left: 1.5em;
-  }
-}

app/assets/stylesheets/common/base/sidebar.scss

@@ -4,20 +4,26 @@
   --d-sidebar-animation-ease: ease-in-out;
 }
 
-#main-outlet-wrapper {
+.sidebar-wrapper {
-  .sidebar-wrapper {
+  --d-sidebar-highlight-color: var(--primary-low);
-    --d-sidebar-highlight-color: var(--primary-low);
+  --d-sidebar-row-horizontal-padding: 1.5rem;
 
-    grid-area: sidebar;
+  grid-area: sidebar;
-    position: sticky;
+  position: sticky;
-    top: var(--header-offset);
+  top: var(--header-offset);
-    .footer-nav-ipad & {
+  .footer-nav-ipad & {
-      top: calc(var(--header-offset) + var(--footer-nav-height));
+    top: calc(var(--header-offset) + var(--footer-nav-height));
-    }
+  }
-    height: calc(100vh - var(--header-offset));
+  height: calc(100vh - var(--header-offset));
-    align-self: start;
+  align-self: start;
-    overflow-y: auto;
+  overflow-y: auto;
-    background-color: var(--primary-very-low);
+  background-color: var(--primary-very-low);
+
+  .sidebar-row {
+    padding: 0.25rem var(--d-sidebar-row-horizontal-padding);
+    height: 27px;
+    align-items: center;
+    font-size: var(--font-down-1);
   }
 
   .sidebar-container {
@@ -44,6 +50,7 @@
       border-radius: calc(var(--scrollbarWidth) / 2);
       border: calc(var(--scrollbarWidth) / 4) solid var(--primary-very-low);
     }
+
     &:hover {
       scrollbar-color: var(--scrollbarThumbBg) var(--scrollbarBg);
       &::-webkit-scrollbar-thumb {
@@ -51,6 +58,7 @@
       }
       transition-delay: 0s;
     }
+
     &::-webkit-scrollbar {
       width: var(--scrollbarWidth);
     }
@@ -58,7 +66,7 @@
 
   .sidebar-scroll-wrap {
     // limit the wrapper width, so when the scrollbar is added the content doesn't shift
-    max-width: calc(var(--d-sidebar-width) - var(--scrollbarWidth));
+    max-width: calc(var(--d-sidebar-width));
     box-sizing: border-box;
     flex: 1;
     display: flex;

app/assets/stylesheets/desktop/menu-panel.scss

@@ -12,8 +12,16 @@
 
 .hamburger-panel .revamped {
   --d-sidebar-highlight-color: var(--highlight-medium);
+  --d-sidebar-row-horizontal-padding: 0.5rem;
   width: var(--d-sidebar-width);
 
+  .sidebar-row {
+    padding: 0.25rem var(--d-sidebar-row-horizontal-padding);
+    height: 27px;
+    align-items: center;
+    font-size: var(--font-down-1);
+  }
+
   .panel-body-content {
     width: 100%;
     min-width: 0; // prevent content blowing out width

app/assets/stylesheets/mobile/menu-panel.scss

@@ -67,3 +67,15 @@
     height: 100%;
   }
 }
+
+.hamburger-panel .revamped {
+  --d-sidebar-row-horizontal-padding: 0.5rem;
+  --d-sidebar-highlight-color: var(--primary-low);
+
+  .sidebar-row {
+    padding: 0.25rem var(--d-sidebar-row-horizontal-padding);
+    height: 27px;
+    align-items: center;
+    font-size: var(--font-down-1);
+  }
+}

app/assets/stylesheets/mobile/sidebar.scss

@@ -1,7 +1,8 @@
 #main-outlet-wrapper {
-  .sidebar-section-header {
+  .sidebar-section-header-wrapper {
     margin-bottom: 0.25em;
   }
+
   .sidebar-section-header-link {
     font-size: var(--font-0);
   }

config/locales/client.en.yml

@@ -4096,7 +4096,6 @@ en:
       more: "More..."
       sections:
         messages:
-          header_link_title: "personal messages"
           header_link_text: "Messages"
           header_action_title: "create a personal message"
           links:
@@ -4110,17 +4109,14 @@ en:
         tags:
           none: "You have not added any tags."
           click_to_get_started: "Click here to get started."
-          header_link_title: "all tags"
           header_link_text: "Tags"
           header_action_title: "edit your sidebar tags"
         categories:
           none: "You have not added any categories."
           click_to_get_started: "Click here to get started."
-          header_link_title: "all categories"
           header_link_text: "Categories"
           header_action_title: "edit your sidebar categories"
         community:
-          header_link_title: "home"
           header_link_text: "Community"
           header_action_title: "create a new topic"
           links: