diff --git a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js index b64fb33fcdd..4ef30f9c4a6 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/section-link.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/section-link.js @@ -28,7 +28,13 @@ export default class SectionLink extends Component { let classNames = ["sidebar-section-link", "sidebar-row"]; if (this.args.linkName) { - classNames.push(`sidebar-section-link-${this.args.linkName}`); + classNames.push( + `sidebar-section-link-${this.args.linkName + .split(" ") + .filter((s) => s) + .join("-") + .toLowerCase()}` + ); } if (this.args.class) { diff --git a/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js b/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js index d50446288e1..822438680de 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/sidebar/section-link-test.js @@ -18,7 +18,7 @@ module("Integration | Component | sidebar | section-link", function (hooks) { setupRenderingTest(hooks); test("default class attribute for link", async function (assert) { - const template = hbs`<Sidebar::SectionLink @linkName="test" @route="discovery.latest" />`; + const template = hbs`<Sidebar::SectionLink @linkName="Test Meta" @route="discovery.latest" />`; await render(template); @@ -29,14 +29,14 @@ module("Integration | Component | sidebar | section-link", function (hooks) { "ember-view", "sidebar-row", "sidebar-section-link", - "sidebar-section-link-test", + "sidebar-section-link-test-meta", ], "has the right class attribute for the link" ); }); test("custom class attribute for link", async function (assert) { - const template = hbs`<Sidebar::SectionLink @linkName="test" @route="discovery.latest" @class="123 abc" />`; + const template = hbs`<Sidebar::SectionLink @linkName="Test Meta" @route="discovery.latest" @class="123 abc" />`; await render(template); @@ -49,7 +49,7 @@ module("Integration | Component | sidebar | section-link", function (hooks) { "ember-view", "sidebar-row", "sidebar-section-link", - "sidebar-section-link-test", + "sidebar-section-link-test-meta", ], "has the right class attribute for the link" );