1
1
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js" ;
2
2
import { Template as Button } from "@spectrum-css/button/stories/template.js" ;
3
3
import { Template as Icon } from "@spectrum-css/icon/stories/template.js" ;
4
+ import { useArgs } from "@storybook/preview-api" ;
4
5
import { html } from "lit" ;
5
6
import { classMap } from "lit/directives/class-map.js" ;
6
7
import { ifDefined } from "lit/directives/if-defined.js" ;
7
8
import { styleMap } from "lit/directives/style-map.js" ;
8
- import { useArgs } from "@storybook/preview-api" ;
9
9
import { when } from "lit/directives/when.js" ;
10
10
11
11
import "@spectrum-css/appframesidenav/index.css" ;
@@ -18,6 +18,8 @@ export const Template = ({
18
18
items = [ ] ,
19
19
isMinimized = false ,
20
20
id,
21
+ showDividers = false ,
22
+ customContent = [ ] ,
21
23
customClasses = [ ] ,
22
24
customStyles = { } ,
23
25
} ) => {
@@ -42,13 +44,48 @@ export const Template = ({
42
44
style=${ ifDefined ( styleMap ( customStyles ) ) }
43
45
>
44
46
${ when ( showTopButton && topButtonText , ( ) => topButtonMarkup ) }
47
+ ${ when ( showDividers , ( ) => html `< div class ="spectrum-AppFrameSideNav-divider "> </ div > ` ) }
45
48
< ul class ="spectrum-AppFrameSideNav-list ">
46
49
${ ( items . length > 0 ? items : defaultSideNavItems ) . map ( navItem =>
47
- html `< li class =${ classMap ( {
48
- [ `${ rootClass } -list-item` ] : true ,
49
- [ `${ rootClass } -list-item--current` ] : navItem . isCurrent ,
50
- [ `${ rootClass } -list-item--endSectionStart` ] : navItem . isEndSectionStart ,
51
- } ) } >
50
+ html `< li
51
+ class =${ classMap ( {
52
+ [ `${ rootClass } -list-item` ] : true ,
53
+ [ `${ rootClass } -list-item--current` ] : navItem . isCurrent ,
54
+ [ `${ rootClass } -list-item--endSectionStart` ] : navItem . isEndSectionStart ,
55
+ [ "is-expanded" ] : navItem . isExpanded
56
+ } ) }
57
+ data-tier =${ ifDefined ( navItem . tier ) }
58
+ >
59
+ < a
60
+ class ="spectrum-AppFrameSideNav-list-item-link "
61
+ href ="# "
62
+ @click =${ demoCurrentItemOnClick }
63
+ >
64
+ < span class ="spectrum-AppFrameSideNav-list-item-icon ">
65
+ ${ Icon ( {
66
+ iconName : navItem . workflowIconName ,
67
+ setName : "workflow" ,
68
+ } ) }
69
+ </ span >
70
+ < span class ="spectrum-AppFrameSideNav-list-item-label "> ${ navItem . label } </ span >
71
+ </ a >
72
+ </ li > `
73
+ ) }
74
+ </ ul >
75
+
76
+ ${ when ( customContent . length > 0 , ( ) => html `
77
+ < div class ="spectrum-AppFrameSideNav-divider "> </ div >
78
+ < ul class ="spectrum-AppFrameSideNav-list ">
79
+ ${ customContent . map ( navItem =>
80
+ html `< li
81
+ class =${ classMap ( {
82
+ [ `${ rootClass } -list-item` ] : true ,
83
+ [ `${ rootClass } -list-item--current` ] : navItem . isCurrent ,
84
+ [ `${ rootClass } -list-item--endSectionStart` ] : navItem . isEndSectionStart ,
85
+ [ "is-expanded" ] : navItem . isExpanded ,
86
+ } ) }
87
+ data-tier =${ ifDefined ( navItem . tier ) }
88
+ >
52
89
< a
53
90
class ="spectrum-AppFrameSideNav-list-item-link "
54
91
href ="# "
@@ -65,6 +102,9 @@ export const Template = ({
65
102
</ li > `
66
103
) }
67
104
</ ul >
105
+ ` ) }
106
+
107
+ ${ when ( showDividers , ( ) => html `< div class ="spectrum-AppFrameSideNav-divider "> </ div > ` ) }
68
108
${ ActionButton ( {
69
109
iconName : isMinimized ? "ChevronDoubleRight" : "ChevronDoubleLeft" ,
70
110
isQuiet : true ,
0 commit comments