Is there a way to enable a component only on mobile?

[hipp0]

I want to enable this New Topic Button on the bottom right on mobile so its similar to X.com New Topic Header Button

But not on desktop.

[RGJ (Richard - Communiteq)]

Discourse is moving away from the traditional desktop/mobile distinction. See Designing for Different Devices (Viewport Size, Touch/Hover, etc.) which also contains tips on how to accomplish what you want.

[hipp0]

I see thanks for the info.

But how would I get a component to render only for smaller devices?

I am not quite sure how to reference a component or enable it for one or the other.

[RGJ (Richard - Communiteq)]

The example is in that very topic

@system

import Component from "@glimmer/component";
import { service } from "@ember/service";

class MyComponent extends Component {
  @service capabilities;

  <template>
    {{#if this.capabilities.viewport.lg}}
      This text will be displayed for devices larger than the lg breakpoint
    {{/if}}

    {{#unless this.capabilities.viewport.sm}}
      This text will be displayed for devices smaller than the sm breakpoint
    {{/unless}}
  </template>
}