discourse/app/assets/javascripts/admin/addon/components/admin-plugin-config-top-nav.gjs
Martin Brennan 2ed8f96e67
UX: Implement new top-level nav on admin plugin pages (#27126)
This uses a new nav style with the heirarchy:

```
Breadcrumbs
  |- Title
    |- Description
      |- Third-Level Navigation
```

The navigation bar uses the transparent red-underlined
buttons similar to the user activity page.

Over time all admin pages will use this, but this starts
with the new plugin show page.

---------

Co-authored-by: Ella <ella.estigoy@gmail.com>
2024-05-29 12:20:55 +10:00

37 lines
1.1 KiB
Plaintext

import Component from "@glimmer/component";
import { inject as service } from "@ember/service";
import HorizontalOverflowNav from "discourse/components/horizontal-overflow-nav";
import NavItem from "discourse/components/nav-item";
import i18n from "discourse-common/helpers/i18n";
export default class AdminPluginConfigTopNav extends Component {
@service adminPluginNavManager;
linkText(navLink) {
if (navLink.label) {
return i18n(navLink.label);
} else {
return navLink.text;
}
}
<template>
<div class="admin-nav-submenu">
<HorizontalOverflowNav
class="plugin-nav admin-plugin-config-page__top-nav"
>
{{#each this.adminPluginNavManager.currentConfigNav.links as |navLink|}}
<NavItem
@route={{navLink.route}}
@i18nLabel={{this.linkText navLink}}
title={{this.linkText navLink}}
class="admin-plugin-config-page__top-nav-item"
>
{{this.linkText navLink}}
</NavItem>
{{/each}}
</HorizontalOverflowNav>
</div>
</template>
}