bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-01-27 23:03:45 +00:00
Code Issues Releases Wiki Activity

Add input for forcing active state on group & disable toggle (#18043)

Browse Source
This commit is contained in:
Oscar Hinton
2026-01-05 11:07:37 +01:00
committed by GitHub
parent 3558db0e0c
commit 738df45f38
3 changed files with 28 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
libs/components/src/navigation/nav-group.component.html
View File

@@ -14,6 +14,7 @@
[ariaLabel]="ariaLabel()"
[hideActiveStyles]="parentHideActiveStyles()"
[ariaCurrentWhenActive]="ariaCurrent()"
[forceActiveStyles]="forceActiveStyles()"
>
<ng-template #button>
<button

8
libs/components/src/navigation/nav-group.component.ts
View File

@@ -92,6 +92,12 @@ export class NavGroupComponent extends NavBaseComponent {
*/
readonly hideIfEmpty = input(false, { transform: booleanAttribute });
/** Forces active styles to be shown, regardless of the `routerLinkActiveOptions` */
readonly forceActiveStyles = input(false, { transform: booleanAttribute });
/** Does not toggle the expanded state on click */
readonly disableToggleOnClick = input(false, { transform: booleanAttribute });
// FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
// eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
@Output()
@@ -129,7 +135,7 @@ export class NavGroupComponent extends NavBaseComponent {
this.sideNavService.setOpen();
}
this.open.set(true);
} else {
} else if (!this.disableToggleOnClick()) {
this.toggle();
}
this.mainContentClicked.emit();

20
libs/components/src/navigation/nav-group.stories.ts
View File

@@ -168,3 +168,23 @@ export const Tree: StoryObj<NavGroupComponent> = {
`,
}),
};
export const ForcedActive: StoryObj<NavGroupComponent> = {
render: (args) => ({
props: args,
template: /*html*/ `
<bit-side-nav>
<bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter" [hideIfEmpty]="hideIfEmpty">
<bit-nav-item text="Child A" route="a" icon="bwi-filter" *ngIf="renderChildren"></bit-nav-item>
<bit-nav-item text="Child B" route="b" *ngIf="renderChildren"></bit-nav-item>
<bit-nav-item text="Child C" route="c" icon="bwi-filter" *ngIf="renderChildren"></bit-nav-item>
</bit-nav-group>
<bit-nav-group text="Lorem Ipsum (Button)" icon="bwi-filter" forceActiveStyles disableToggleOnClick>
<bit-nav-item text="Child A" icon="bwi-filter"></bit-nav-item>
<bit-nav-item text="Child B"></bit-nav-item>
<bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
</bit-nav-group>
</bit-side-nav>
`,
}),
};