From b86ed4d990635dbffdce97c57529aea12af44a1e Mon Sep 17 00:00:00 2001 From: Crevil Date: Sun, 17 Jul 2022 16:18:27 +0200 Subject: [PATCH] Add navigation item highlight to active item This change adds high lighting to navigation items in tech docs. It highlights the whole nav tree with the same color and an underline. Signed-off-by: Crevil --- .changeset/itchy-mice-kiss.md | 5 +++++ .../techdocs/src/reader/transformers/styles/rules/layout.ts | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/itchy-mice-kiss.md diff --git a/.changeset/itchy-mice-kiss.md b/.changeset/itchy-mice-kiss.md new file mode 100644 index 0000000000..18390866d9 --- /dev/null +++ b/.changeset/itchy-mice-kiss.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +Add highlight to active navigation item and navigation parents. diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts b/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts index 2488504dd9..2983bb3a75 100644 --- a/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts +++ b/plugins/techdocs/src/reader/transformers/styles/rules/layout.ts @@ -47,6 +47,11 @@ export default ({ theme, sidebar }: RuleOptions) => ` height: 20px !important; } +.md-nav__item--active > .md-nav__link, a.md-nav__link--active { + text-decoration: underline; + color: var(--md-typeset-a-color); +} + .md-main__inner { margin-top: 0; }