Skip to content

Commit bd0dde8

Browse files
JoelLeuppJoelLeupp
authored
Merge pull request #357 from six-group/feature/six-sidebar-improvement
feat: improve six-sidebar component
2 parents 77a508a + cd55b13 commit bd0dde8

30 files changed

+363
-26
lines changed

‎docs/changelog.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,20 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
1414
`six-datepicker`.
1515

1616
- [Documentation](guide/angular.md) for using web components with Angular's standalone bootstrapping
17+
- `ActiveSidebarItemGroupDirective` and `ActiveSidebarItemDirective`: Added optional angular sidebar
18+
helper directives. See the [Angular guide](guide/angular.md) for more information.
19+
- Added nested sidbar menu to the angular demo application to showcase the helper directives
1720
- `six-header-dropdown`: Added `filter` and `filterPlaceholder` properties.
1821
- `six-header-menu-button`: Added `caret`, `disabled`, `loading`, `submit` and `reset` properties.
1922
- `six-header-menu-button`: Added `suffix` and `prefix` slots.
23+
- `six-sidebar-item` : added icon property analog to `six-sidebar-item-group`
2024

2125
### Fixed
2226

2327
- `six-logo`: removed inline style tag
2428
- `six-timepicker`: removed unnecessary bottom padding
2529
- `six-button` : simplify use of prefix and suffix icons
30+
- `six-sidebar-item-group`: fixed spacing for sub items
2631

2732
### Removed
2833

‎docs/components/six-icon.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -283,6 +283,7 @@ Enter an icon label and press enter to display an icon:
283283
- [six-menu-item](six-menu-item.html)
284284
- [six-search-field](six-search-field.html)
285285
- [six-select](six-select.html)
286+
- [six-sidebar-item](six-sidebar-item.html)
286287
- [six-sidebar-item-group](six-sidebar-item-group.html)
287288
- [six-stage-indicator](six-stage-indicator.html)
288289
- [six-tile](six-tile.html)
@@ -304,6 +305,7 @@ graph TD;
304305
six-menu-item --> six-icon
305306
six-search-field --> six-icon
306307
six-select --> six-icon
308+
six-sidebar-item --> six-icon
307309
six-sidebar-item-group --> six-icon
308310
six-stage-indicator --> six-icon
309311
six-tile --> six-icon

‎docs/components/six-sidebar-item-group.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
```html
99
<div style="max-width: 20rem; padding: 1rem">
1010
<six-sidebar-item-group icon="description" name="Upload" value="upload">
11-
<six-sidebar-item value="data">Data</six-sidebar-item>
12-
<six-sidebar-item value="history">History</six-sidebar-item>
11+
<six-sidebar-item value="data" icon="analytics">Data</six-sidebar-item>
12+
<six-sidebar-item value="history" icon="history">History</six-sidebar-item>
1313
<six-sidebar-item-group icon="settings" name="Settings">
1414
<six-sidebar-item value="data">Data</six-sidebar-item>
1515
<six-sidebar-item value="history">History</six-sidebar-item>

‎docs/components/six-sidebar-item.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,21 @@
1616
```
1717

1818

19+
## six sidebar item with icons
20+
21+
<docs-demo-six-sidebar-item-1></docs-demo-six-sidebar-item-1>
22+
23+
```html
24+
<div style="width: 10em" id="six-sidebar-items-icon">
25+
<six-sidebar-item icon="description">Data</six-sidebar-item>
26+
<six-sidebar-item icon="history">History</six-sidebar-item>
27+
<six-sidebar-item icon="account_balance">Transactions</six-sidebar-item>
28+
<six-sidebar-item icon="upload">Upload</six-sidebar-item>
29+
<six-sidebar-item icon="link" href="http://www.google.ch">Link</six-sidebar-item>
30+
</div>
31+
```
32+
33+
1934

2035
<!-- Auto Generated Below -->
2136

@@ -26,6 +41,7 @@
2641
| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
2742
| `disabled` | `disabled` | Set to true to draw the sidebar item in a disabled state. | `boolean` | `false` |
2843
| `href` | `href` | Provide if the item should be rendered as anchor tag. Note, that the href is added automatically when using routerLink in Angular. | `string \| undefined` | `undefined` |
44+
| `icon` | `icon` | Icon of the item | `string` | `''` |
2945
| `selected` | `selected` | Set to true to draw the item in a selected state. | `boolean` | `false` |
3046
| `value` | `value` | A unique value to store in the sidebar item. This can be used as a way to identify sidebar items when selected. | `string` | `''` |
3147

@@ -37,6 +53,19 @@
3753
| | Used to define the nested displayed text of the item. |
3854

3955

56+
## Dependencies
57+
58+
### Depends on
59+
60+
- [six-icon](six-icon.html)
61+
62+
### Graph
63+
```mermaid
64+
graph TD;
65+
six-sidebar-item --> six-icon
66+
style six-sidebar-item fill:#f9f,stroke:#333,stroke-width:4px
67+
```
68+
4069
----------------------------------------------
4170

4271
Copyright © 2021-present SIX-Group

‎docs/components/six-sidebar.md

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,15 @@ six-sidebar allows to add a static sidebar to the left or right of the `six-root
1414
```html
1515
<six-sidebar position="left" width="20rem" open>
1616
<six-sidebar-item-group icon="description" name="Upload" value="upload">
17-
<six-sidebar-item value="data" disabled="true">Data</six-sidebar-item>
18-
<six-sidebar-item value="history">History</six-sidebar-item>
17+
<six-sidebar-item value="data" icon="analytics" disabled="true">Data</six-sidebar-item>
18+
<six-sidebar-item value="history" icon="history">History</six-sidebar-item>
1919
<six-sidebar-item-group icon="settings" name="Settings">
20-
<six-sidebar-item value="data" selected>Data</six-sidebar-item>
21-
<six-sidebar-item value="history">History</six-sidebar-item>
20+
<six-sidebar-item value="settingA" selected>Setting A</six-sidebar-item>
21+
<six-sidebar-item value="settingB">Setting B</six-sidebar-item>
22+
<six-sidebar-item-group icon="settings" name="Nested Settings">
23+
<six-sidebar-item value="sectionA" selected>Section A</six-sidebar-item>
24+
<six-sidebar-item value="sectionB">Section B</six-sidebar-item>
25+
</six-sidebar-item-group>
2226
</six-sidebar-item-group>
2327
</six-sidebar-item-group>
2428
<six-sidebar-item-group icon="task"

‎docs/examples/docs-demo-six-sidebar-0.vue

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@
33

44
<six-sidebar position="left" width="20rem" open>
55
<six-sidebar-item-group icon="description" name="Upload" value="upload">
6-
<six-sidebar-item value="data" disabled="true">Data</six-sidebar-item>
7-
<six-sidebar-item value="history">History</six-sidebar-item>
6+
<six-sidebar-item value="data" icon="analytics" disabled="true">Data</six-sidebar-item>
7+
<six-sidebar-item value="history" icon="history">History</six-sidebar-item>
88
<six-sidebar-item-group icon="settings" name="Settings">
9-
<six-sidebar-item value="data" selected>Data</six-sidebar-item>
10-
<six-sidebar-item value="history">History</six-sidebar-item>
9+
<six-sidebar-item value="settingA" selected>Setting A</six-sidebar-item>
10+
<six-sidebar-item value="settingB">Setting B</six-sidebar-item>
11+
<six-sidebar-item-group icon="settings" name="Nested Settings">
12+
<six-sidebar-item value="sectionA" selected>Section A</six-sidebar-item>
13+
<six-sidebar-item value="sectionB">Section B</six-sidebar-item>
14+
</six-sidebar-item-group>
1115
</six-sidebar-item-group>
1216
</six-sidebar-item-group>
1317
<six-sidebar-item-group icon="task"

‎docs/examples/docs-demo-six-sidebar-item-1.vue

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div>
3+
4+
<div style="width: 10em" id="six-sidebar-items-icon">
5+
<six-sidebar-item icon="description">Data</six-sidebar-item>
6+
<six-sidebar-item icon="history">History</six-sidebar-item>
7+
<six-sidebar-item icon="account_balance">Transactions</six-sidebar-item>
8+
<six-sidebar-item icon="upload">Upload</six-sidebar-item>
9+
<six-sidebar-item icon="link" href="http://www.google.ch">Link</six-sidebar-item>
10+
</div>
11+
12+
</div>
13+
</template>
14+
<style>
15+
16+
</style>
17+
<script>
18+
export default {
19+
name: 'docs-demo-six-sidebar-item-1',
20+
mounted() { }
21+
}
22+
</script>

‎docs/examples/docs-demo-six-sidebar-item-group-0.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33

44
<div style="max-width: 20rem; padding: 1rem">
55
<six-sidebar-item-group icon="description" name="Upload" value="upload">
6-
<six-sidebar-item value="data">Data</six-sidebar-item>
7-
<six-sidebar-item value="history">History</six-sidebar-item>
6+
<six-sidebar-item value="data" icon="analytics">Data</six-sidebar-item>
7+
<six-sidebar-item value="history" icon="history">History</six-sidebar-item>
88
<six-sidebar-item-group icon="settings" name="Settings">
99
<six-sidebar-item value="data">Data</six-sidebar-item>
1010
<six-sidebar-item value="history">History</six-sidebar-item>

‎docs/guide/angular.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,3 +127,40 @@ Consult the
127127
[Angular example](https://github.com/six-group/six-webcomponents/tree/main/examples/angular) and the
128128
[source code documentation](https://github.com/six-group/six-webcomponents/blob/main/libraries/ui-library-angular/src/lib/form/six-form.directive.ts)
129129
of the `SixFormDirective` and for a more flexible alternative, the `SixFormUtilDirective`.
130+
131+
## Sidebar
132+
133+
The library provides Angular Router integration for the sidebar component through a set of
134+
directives that automatically manage the selection and expansion states based on the current route.
135+
136+
To enable router integration, add the `sixRouterLinkActive` attribute to the `six-sidebar`
137+
component. This activates three directives that work together:
138+
139+
- `ActiveSidebarDirective`: Enables route-based navigation in the sidebar
140+
- `ActiveSidebarItemDirective`: Automatically manages item selection based on the current route
141+
- `ActiveSidebarItemGroupDirective`: Automatically expands groups when they contain active routes
142+
143+
Example usage:
144+
145+
```html
146+
<!-- add sixRouterLinkActive to six-sidebar to include the sidebar helper directives -->
147+
<six-sidebar position="left" [open]="open" sixRouterLinkActive>
148+
<six-sidebar-item-group routerLink="/home" name="Home" icon="home"></six-sidebar-item-group>
149+
<six-sidebar-item-group routerLink="/form" name="Form" icon="assignment"></six-sidebar-item-group>
150+
<six-sidebar-item-group icon="settings" name="Settings">
151+
<six-sidebar-item routerLink="/settings/data" icon="analytics">Data</six-sidebar-item>
152+
<six-sidebar-item routerLink="/settings/history" icon="history">History</six-sidebar-item>
153+
</six-sidebar-item-group>
154+
</six-sidebar>
155+
```
156+
157+
When the router integration is enabled:
158+
159+
- Sidebar items are automatically selected when their route is active
160+
- Sidebar groups automatically expand when containing active routes
161+
- Manual selection state is preserved when no routes are active
162+
163+
Consult the
164+
[Angular example](https://github.com/six-group/six-webcomponents/tree/main/examples/angular) and the
165+
[source code documentation](https://github.com/six-group/six-webcomponents/blob/main/libraries/ui-library-angular/src/lib/sidebar/active-sidebar.directive.ts)
166+
of the `ActiveSidebarDirective`, `ActiveSidebarItemDirective` and `ActiveSidebarItemGroupDirective`.

‎docs/guide/upgrade-v5.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,16 @@ in the Angular example application, which covers most features.
9898
</six-button>
9999
```
100100

101+
## Angular specific upgrade (None Breaking Change)
102+
103+
- Angular Router integration for the `six-sidebar` component through a set of directives that
104+
automatically manage the selection and expansion states based on the current route.
105+
106+
To enable router integration, add the `sixRouterLinkActive` attribute to the `six-sidebar`
107+
component.
108+
109+
For more information and a usage example consult the [angular guide](angular.md#sidebar).
110+
101111
## Removed deprecated features (Breaking Change)
102112

103113
Refer to the _Removed_ section in the [changelog](../changelog.md).

0 commit comments

Comments
 (0)