vaultwarden
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

[CL-145] add secondary variant to bit-layout side nav (#7038)

This commit is contained in:
Will Martin 2023-11-30 11:44:42 -05:00 committed by GitHub
parent 1c43f77d51
commit ebc28244cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 172 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
libs/components/src/layout/layout.component.html
View File

@ -1,5 +1,13 @@
<div class="tw-flex tw-w-full">
<aside
[ngStyle]="
variant === 'secondary' && {
'--color-text-alt2': 'var(--color-text-main)',
'--color-background-alt3': 'var(--color-secondary-100)',
'--color-background-alt4': 'var(--color-secondary-300)',
'--color-secondary-300': 'var(--color-secondary-500)'
}
"
class="tw-fixed tw-inset-y-0 tw-left-0 tw-h-screen tw-w-60 tw-overflow-auto tw-bg-background-alt3"
>
<ng-content select="[slot=sidebar]"></ng-content>

11
libs/components/src/layout/layout.component.ts
View File

@ -1,9 +1,14 @@
import { Component } from "@angular/core";
import { CommonModule } from "@angular/common";
import { Component, Input } from "@angular/core";
export type LayoutVariant = "primary" | "secondary";
@Component({
selector: "bit-layout",
templateUrl: "layout.component.html",
standalone: true,
imports: [],
imports: [CommonModule],
})
export class LayoutComponent {}
export class LayoutComponent {
@Input() variant: LayoutVariant = "primary";
}

157
libs/components/src/layout/layout.stories.ts
View File

@ -29,7 +29,10 @@ export default {
{
provide: I18nService,
useFactory: () => {
return new I18nMockService({});
return new I18nMockService({
submenu: "submenu",
toggleCollapse: "toggle collapse",
});
},
},
],
@ -57,6 +60,158 @@ export const WithContent: Story = {
<bit-nav-divider></bit-nav-divider>
<bit-nav-item text="Item C" icon="bwi-collection"></bit-nav-item>
<bit-nav-item text="Item D" icon="bwi-collection"></bit-nav-item>
<bit-nav-group text="Tree example" icon="bwi-collection" [open]="true">
<bit-nav-group
text="Level 1 - with children (empty)"
route="#"
icon="bwi-collection"
variant="tree"
></bit-nav-group>
<bit-nav-item
text="Level 1 - no children"
route="#"
icon="bwi-collection"
variant="tree"
></bit-nav-item>
<bit-nav-group
text="Level 1 - with children"
route="#"
icon="bwi-collection"
variant="tree"
[open]="true"
>
<bit-nav-group
text="Level 2 - with children"
route="#"
icon="bwi-collection"
variant="tree"
[open]="true"
>
<bit-nav-item
text="Level 3 - no children, no icon"
route="#"
variant="tree"
></bit-nav-item>
<bit-nav-group
text="Level 3 - with children"
route="#"
icon="bwi-collection"
variant="tree"
[open]="true"
>
<bit-nav-item
text="Level 4 - no children, no icon"
route="#"
variant="tree"
></bit-nav-item>
</bit-nav-group>
</bit-nav-group>
<bit-nav-group
text="Level 2 - with children (empty)"
route="#"
icon="bwi-collection"
variant="tree"
[open]="true"
></bit-nav-group>
<bit-nav-item
text="Level 2 - no children"
route="#"
icon="bwi-collection"
variant="tree"
></bit-nav-item>
</bit-nav-group>
<bit-nav-item
text="Level 1 - no children"
route="#"
icon="bwi-collection"
variant="tree"
></bit-nav-item>
</bit-nav-group>
</nav>
<bit-callout title="Foobar"> Hello world! </bit-callout>
</bit-layout>
`,
}),
};
export const Secondary: Story = {
render: (args) => ({
props: args,
template: /* HTML */ `
<bit-layout variant="secondary">
<nav slot="sidebar">
<bit-nav-item text="Item A" icon="bwi-collection"></bit-nav-item>
<bit-nav-item text="Item B" icon="bwi-collection"></bit-nav-item>
<bit-nav-divider></bit-nav-divider>
<bit-nav-item text="Item C" icon="bwi-collection"></bit-nav-item>
<bit-nav-item text="Item D" icon="bwi-collection"></bit-nav-item>
<bit-nav-group text="Tree example" icon="bwi-collection" [open]="true">
<bit-nav-group
text="Level 1 - with children (empty)"
route="#"
icon="bwi-collection"
variant="tree"
></bit-nav-group>
<bit-nav-item
text="Level 1 - no children"
route="#"
icon="bwi-collection"
variant="tree"
></bit-nav-item>
<bit-nav-group
text="Level 1 - with children"
route="#"
icon="bwi-collection"
variant="tree"
[open]="true"
>
<bit-nav-group
text="Level 2 - with children"
route="#"
icon="bwi-collection"
variant="tree"
[open]="true"
>
<bit-nav-item
text="Level 3 - no children, no icon"
route="#"
variant="tree"
></bit-nav-item>
<bit-nav-group
text="Level 3 - with children"
route="#"
icon="bwi-collection"
variant="tree"
[open]="true"
>
<bit-nav-item
text="Level 4 - no children, no icon"
route="#"
variant="tree"
></bit-nav-item>
</bit-nav-group>
</bit-nav-group>
<bit-nav-group
text="Level 2 - with children (empty)"
route="#"
icon="bwi-collection"
variant="tree"
[open]="true"
></bit-nav-group>
<bit-nav-item
text="Level 2 - no children"
route="#"
icon="bwi-collection"
variant="tree"
></bit-nav-item>
</bit-nav-group>
<bit-nav-item
text="Level 1 - no children"
route="#"
icon="bwi-collection"
variant="tree"
></bit-nav-item>
</bit-nav-group>
</nav>
<bit-callout title="Foobar"> Hello world! </bit-callout>
</bit-layout>