@skbkontur/side-menu 0.14.7 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +240 -230
  3. package/internal/themes/SideMenuTheme.d.ts +12 -5
  4. package/internal/themes/SideMenuTheme.js +36 -11
  5. package/package.json +1 -1
  6. package/src/SideMenuBody/SideMenuBody.js +4 -2
  7. package/src/SideMenuDivider/SideMenuDivider.js +5 -2
  8. package/src/SideMenuDivider/SideMenuDivider.md +1 -0
  9. package/src/SideMenuDivider/SideMenuDivider.styles.d.ts +2 -1
  10. package/src/SideMenuDivider/SideMenuDivider.styles.js +2 -2
  11. package/src/SideMenuFooter/SideMenuFooter.styles.js +1 -1
  12. package/src/SideMenuHeader/SideMenuHeader.styles.js +2 -2
  13. package/src/SideMenuItem/SideMenuItem.md +8 -1
  14. package/src/internal/InnerBody.js +0 -10
  15. package/src/internal/ItemContent/Caption.js +1 -1
  16. package/src/internal/ItemContent/Icon.js +0 -1
  17. package/src/internal/ItemContent/Icon.styles.d.ts +0 -1
  18. package/src/internal/ItemContent/Icon.styles.js +3 -6
  19. package/src/internal/ItemContent/ItemContent.js +4 -3
  20. package/src/internal/ItemContent/ItemContent.styles.d.ts +1 -0
  21. package/src/internal/ItemContent/ItemContent.styles.js +11 -8
  22. package/src/internal/ItemContent/Marker.d.ts +2 -2
  23. package/src/internal/ItemContent/Marker.js +2 -1
  24. package/src/internal/ItemContent/Marker.styles.d.ts +1 -0
  25. package/src/internal/ItemContent/Marker.styles.js +5 -2
  26. package/src/internal/SideMenuLogotype.js +24 -20
  27. package/src/internal/InnerBody.styles.d.ts +0 -4
  28. package/src/internal/InnerBody.styles.js +0 -10
package/CHANGELOG.md CHANGED
@@ -3,6 +3,25 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.0.0](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.14.8...@skbkontur/side-menu@1.0.0) (2023-08-02)
7
+
8
+
9
+ ### Features
10
+
11
+ * **SideMenu:** appearance ([e39d8a5](https://git.skbkontur.ru/ui/ui-parking/commits/e39d8a59c266e9f41468a51377bb34055956ab8d))
12
+
13
+
14
+
15
+
16
+
17
+ ## [0.14.8](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.14.7...@skbkontur/side-menu@0.14.8) (2023-07-25)
18
+
19
+ **Note:** Version bump only for package @skbkontur/side-menu
20
+
21
+
22
+
23
+
24
+
6
25
  ## [0.14.7](https://git.skbkontur.ru/ui/ui-parking/compare/@skbkontur/side-menu@0.14.6...@skbkontur/side-menu@0.14.7) (2023-07-24)
7
26
 
8
27
  **Note:** Version bump only for package @skbkontur/side-menu
package/README.md CHANGED
@@ -2,10 +2,12 @@
2
2
 
3
3
  SideMenu в фирменном стиле (макеты живут [здесь](https://www.figma.com/file/XA8Ytcx8bxemYAkF7eGVSv/%D0%9A%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82-%D0%BB%D0%B5%D0%B2%D0%BE%D0%B3%D0%BE-%D0%BC%D0%B5%D0%BD%D1%8E?node-id=0%3A1)).
4
4
 
5
+ [Пример в песочнице](https://codesandbox.io/s/competent-wiles-k85wlm)
6
+
5
7
  ```jsx harmony
6
8
  import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
7
9
  import { Kontur, Ofd } from '@skbkontur/logos';
8
- import { MenuItem } from '@skbkontur/react-ui';
10
+ import { ThemeContext, ThemeFactory, MenuItem, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
9
11
  import { SideMenu } from './index';
10
12
  import {
11
13
  DocTextIcon24Regular,
@@ -20,62 +22,64 @@ import {
20
22
  } from '@skbkontur/icons';
21
23
 
22
24
  <div style={{height: '600px', position: 'relative'}}>
25
+ <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
23
26
  <SideMenu disableSwipe={false}>
24
- <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
25
- <SideMenu.Body>
26
- <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'новое'}>
27
- <SideMenu.SubItem caption={'Входящие'}/>
28
- <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
29
- <SideMenu.SubItem caption={'Исходящие1'}/>
30
- <SideMenu.SubItem caption={'Исходящие2'}/>
31
- </SideMenu.SubItem>
32
- <SideMenu.SubItem caption={'Внутренние'}/>
33
- <SideMenu.SubItem caption={'Черновики'}/>
34
- <SideMenu.SubItem caption={'Удаленные'}/>
35
- <SideMenu.SubLink caption={'Cсылка в подменю'} href={'https://www.google.com/search?q=test'} target={'_blank'}/>
36
- <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
37
- <SideMenu.SubItem caption={'Требуют обработки'}/>
38
- <SideMenu.SubItem caption={'Обработанные'}/>
39
- </SideMenu.Item>
40
- <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
41
- <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
42
- <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
43
- <SideMenu.SubItem caption={'Исходящие'}/>
44
- <SideMenu.SubItem caption={'Внутренние'}/>
45
- <SideMenu.SubItem caption={'Черновики'}/>
46
- <SideMenu.SubItem caption={'Удаленные'}/>
47
- </SideMenu.Item>
48
- <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
27
+ <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>}/>
28
+ <SideMenu.Body>
29
+ <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'2'}>
30
+ <SideMenu.SubItem caption={'Входящие'}/>
31
+ <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
32
+ <SideMenu.SubItem caption={'Исходящие1'}/>
33
+ <SideMenu.SubItem caption={'Исходящие2'}/>
34
+ </SideMenu.SubItem>
35
+ <SideMenu.SubItem caption={'Внутренние'}/>
36
+ <SideMenu.SubItem caption={'Черновики'}/>
37
+ <SideMenu.SubItem caption={'Удаленные'}/>
38
+ <SideMenu.SubLink caption={'Cсылка в подменю'} href={'https://www.google.com/search?q=test'} target={'_blank'}/>
39
+ <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
40
+ <SideMenu.SubItem caption={'Требуют обработки'}/>
41
+ <SideMenu.SubItem caption={'Обработанные'}/>
42
+ </SideMenu.Item>
43
+ <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
44
+ <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
45
+ <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
46
+ <SideMenu.SubItem caption={'Исходящие'}/>
47
+ <SideMenu.SubItem caption={'Внутренние'}/>
48
+ <SideMenu.SubItem caption={'Черновики'}/>
49
+ <SideMenu.SubItem caption={'Удаленные'}/>
50
+ </SideMenu.Item>
51
+ <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
49
52
  <SideMenu.Divider/>
50
- <SideMenu.Link href={'https://google.com'} icon={<AttachLinkIcon />} caption={'Ссылка'} target={'_blank'}/>
51
- <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
52
- <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
53
- </SideMenu.Body>
54
- <SideMenu.Footer>
55
- <SideMenu.Organisations icon={<StackHDownIcon24Regular/>}>
56
- <MenuItem>СКБ Контур</MenuItem>
57
- <MenuItem>Сириус Базинес</MenuItem>
58
- <MenuItem>Контур НТТ</MenuItem>
59
- <MenuItem>Промэлектроника</MenuItem>
60
- <SideMenu.Divider/>
61
- <MenuItem>Список организаций</MenuItem>
62
- </SideMenu.Organisations>
63
- <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
64
- <SideMenu.Avatar
65
- userName={'Ишматова Елена'}
66
- avatarUrl={getKonturAvatarUrl({
67
- userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
68
- })}
69
- >
70
- <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
71
- Личный кабинет
72
- </MenuItem>
73
- <MenuItem >Безопасность</MenuItem>
74
- <SideMenu.Divider />
75
- <MenuItem >Выйти</MenuItem>
76
- </SideMenu.Avatar>
77
- </SideMenu.Footer>
78
- </SideMenu>
53
+ <SideMenu.Link href={'https://google.com'} icon={<AttachLinkIcon />} caption={'Ссылка'} target={'_blank'}/>
54
+ <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
55
+ <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
56
+ </SideMenu.Body>
57
+ <SideMenu.Footer>
58
+ <SideMenu.Organisations icon={<StackHDownIcon24Regular/>}>
59
+ <MenuItem>СКБ Контур</MenuItem>
60
+ <MenuItem>Сириус Базинес</MenuItem>
61
+ <MenuItem>Контур НТТ</MenuItem>
62
+ <MenuItem>Промэлектроника</MenuItem>
63
+ <MenuSeparator />
64
+ <MenuItem>Список организаций</MenuItem>
65
+ </SideMenu.Organisations>
66
+ <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
67
+ <SideMenu.Avatar
68
+ userName={'Ишматова Елена'}
69
+ avatarUrl={getKonturAvatarUrl({
70
+ userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
71
+ })}
72
+ >
73
+ <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
74
+ Личный кабинет
75
+ </MenuItem>
76
+ <MenuItem >Безопасность</MenuItem>
77
+ <MenuSeparator />
78
+ <MenuItem >Выйти</MenuItem>
79
+ </SideMenu.Avatar>
80
+ </SideMenu.Footer>
81
+ </SideMenu>
82
+ </ThemeContext.Provider>
79
83
  </div>
80
84
  ```
81
85
 
@@ -84,7 +88,7 @@ SideMenu с меню второго уровня в отдельной коло
84
88
  ```jsx harmony
85
89
  import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
86
90
  import { Buhgalteria, Kontur } from '@skbkontur/logos';
87
- import { MenuItem, Modal, Input } from '@skbkontur/react-ui';
91
+ import { ThemeContext, ThemeFactory, MenuItem, Modal, Input, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
88
92
  import { SideMenu } from './index';
89
93
  import {
90
94
  DocTextIcon24Regular,
@@ -129,73 +133,75 @@ const renderModal = () => {
129
133
  }
130
134
 
131
135
  <div style={{height: '600px', width: '100%', position: 'relative', display: 'flex'}}>
132
- <SideMenu isSeparatedMenu={true}>
133
- <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>} withWidget={false}/>
134
- <SideMenu.Body>
135
- <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы'} marker={'новое'}>
136
- <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
137
- <SideMenu.SubItem caption={'Входящие 1'}>
138
- <SideMenu.SubItem caption={'Входящие11'}>
139
- <SideMenu.SubItem caption={'Входящие111'}/>
140
- <SideMenu.SubItem caption={'Входящие112'}/>
141
- <SideMenu.SubItem caption={'Входящие113'}/>
136
+ <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#b750d1' }, THEME_2022)}>
137
+ <SideMenu isSeparatedMenu={true}>
138
+ <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Buhgalteria/>} withWidget={false}/>
139
+ <SideMenu.Body>
140
+ <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы'} marker={'2'}>
141
+ <SideMenu.SubItem caption={'Входящие'} marker={'5'}>
142
+ <SideMenu.SubItem caption={'Входящие 1'}>
143
+ <SideMenu.SubItem caption={'Входящие11'}>
144
+ <SideMenu.SubItem caption={'Входящие111'}/>
145
+ <SideMenu.SubItem caption={'Входящие112'}/>
146
+ <SideMenu.SubItem caption={'Входящие113'}/>
147
+ </SideMenu.SubItem>
148
+ <SideMenu.SubItem caption={'Входящие12'}/>
149
+ <SideMenu.SubItem caption={'Входящие13'}/>
142
150
  </SideMenu.SubItem>
143
- <SideMenu.SubItem caption={'Входящие12'}/>
144
- <SideMenu.SubItem caption={'Входящие13'}/>
145
- </SideMenu.SubItem>
146
- <SideMenu.SubItem caption={'Входящие2'}>
147
- <SideMenu.SubItem caption={'Входящие21'}>
148
- <SideMenu.SubItem caption={'Входящие211'}/>
149
- <SideMenu.SubItem caption={'Входящие212'}/>
150
- <SideMenu.SubItem caption={'Входящие213'}/>
151
+ <SideMenu.SubItem caption={'Входящие2'}>
152
+ <SideMenu.SubItem caption={'Входящие21'}>
153
+ <SideMenu.SubItem caption={'Входящие211'}/>
154
+ <SideMenu.SubItem caption={'Входящие212'}/>
155
+ <SideMenu.SubItem caption={'Входящие213'}/>
156
+ </SideMenu.SubItem>
157
+ <SideMenu.SubItem caption={'Входящие22'}/>
158
+ <SideMenu.SubItem caption={'Входящие23'}/>
151
159
  </SideMenu.SubItem>
152
- <SideMenu.SubItem caption={'Входящие22'}/>
153
- <SideMenu.SubItem caption={'Входящие23'}/>
160
+ <SideMenu.SubItem caption={'Входящие3'}/>
154
161
  </SideMenu.SubItem>
155
- <SideMenu.SubItem caption={'Входящие3'}/>
156
- </SideMenu.SubItem>
157
- <SideMenu.SubItem caption={'Исходящие'}/>
158
- <SideMenu.SubItem caption={'Внутренние'}/>
159
- <SideMenu.SubItem caption={'Черновики'}/>
160
- <SideMenu.SubItem caption={'Удаленные'}/>
161
- <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
162
- <SideMenu.SubItem caption={'Требуют обработки'}/>
163
- <SideMenu.SubItem caption={'Обработанные'}/>
164
- </SideMenu.Item>
165
- <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
166
- <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
167
- <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
168
- <SideMenu.SubItem caption={'Исходящие'}/>
169
- <SideMenu.SubItem caption={'Внутренние'}/>
170
- <SideMenu.SubItem caption={'Черновики'}/>
171
- <SideMenu.SubItem caption={'Удаленные'}/>
172
- </SideMenu.Item>
173
- <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
174
- <SideMenu.Divider />
175
- <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
176
- <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
177
- </SideMenu.Body>
178
- <SideMenu.Footer>
179
- <div>
180
- {opened && renderModal()}
181
- <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open}/>
182
- </div>
183
- <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
184
- <SideMenu.Avatar
185
- userName={'Ишматова Елена'}
186
- avatarUrl={getKonturAvatarUrl({
187
- userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
188
- })}
189
- >
190
- <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
191
- Личный кабинет
192
- </MenuItem>
193
- <MenuItem >Безопасность</MenuItem>
162
+ <SideMenu.SubItem caption={'Исходящие'}/>
163
+ <SideMenu.SubItem caption={'Внутренние'}/>
164
+ <SideMenu.SubItem caption={'Черновики'}/>
165
+ <SideMenu.SubItem caption={'Удаленные'}/>
166
+ <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
167
+ <SideMenu.SubItem caption={'Требуют обработки'}/>
168
+ <SideMenu.SubItem caption={'Обработанные'}/>
169
+ </SideMenu.Item>
170
+ <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
171
+ <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
172
+ <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
173
+ <SideMenu.SubItem caption={'Исходящие'}/>
174
+ <SideMenu.SubItem caption={'Внутренние'}/>
175
+ <SideMenu.SubItem caption={'Черновики'}/>
176
+ <SideMenu.SubItem caption={'Удаленные'}/>
177
+ </SideMenu.Item>
178
+ <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
194
179
  <SideMenu.Divider />
195
- <MenuItem >Выйти</MenuItem>
196
- </SideMenu.Avatar>
197
- </SideMenu.Footer>
198
- </SideMenu>
180
+ <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
181
+ <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'}/>
182
+ </SideMenu.Body>
183
+ <SideMenu.Footer>
184
+ <div>
185
+ {opened && renderModal()}
186
+ <SideMenu.Item icon={<StackHDownIcon24Regular/>} caption={'СКБ Контур'} onClick={open}/>
187
+ </div>
188
+ <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
189
+ <SideMenu.Avatar
190
+ userName={'Ишматова Елена'}
191
+ avatarUrl={getKonturAvatarUrl({
192
+ userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
193
+ })}
194
+ >
195
+ <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
196
+ Личный кабинет
197
+ </MenuItem>
198
+ <MenuItem >Безопасность</MenuItem>
199
+ <MenuSeparator />
200
+ <MenuItem >Выйти</MenuItem>
201
+ </SideMenu.Avatar>
202
+ </SideMenu.Footer>
203
+ </SideMenu>
204
+ </ThemeContext.Provider>
199
205
  <div style={{ background: linearLightGradient, width: '100%', height: '100%' }}>
200
206
  {'Content '.repeat(100)}
201
207
  </div>
@@ -209,7 +215,7 @@ SideMenu с ручным управлением.
209
215
  import { useState } from 'react';
210
216
  import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
211
217
  import { Kontur, Ofd } from '@skbkontur/logos';
212
- import { MenuItem, Select, Switcher } from '@skbkontur/react-ui';
218
+ import { ThemeContext, ThemeFactory, MenuItem, Select, Switcher, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
213
219
  import { SideMenu } from './index';
214
220
  import {
215
221
  DocTextIcon24Regular,
@@ -251,61 +257,63 @@ const items = [
251
257
  ];
252
258
 
253
259
  <div style={{height: '600px', display: 'flex', position: 'relative'}}>
260
+ <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
254
261
  <SideMenu value={activeItem} onValueChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
255
- <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>} withWidget={false}/>
256
- <SideMenu.Body>
257
- <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию id=100'} marker={'новое'} id={'100'}>
258
- <SideMenu.SubItem caption={'Входящие id=110'} id={'110'}/>
259
- <SideMenu.SubItem caption={'Исходящие id=120'} marker={'2'} id={'120'}>
260
- <SideMenu.SubItem caption={'Исходящие1 id=121'} id={'121'}/>
261
- <SideMenu.SubItem caption={'Исходящие2 id=122'} id={'122'}/>
262
- </SideMenu.SubItem>
263
- <SideMenu.SubItem caption={'Внутренние id=130'} id={'130'}/>
264
- <SideMenu.SubItem caption={'Черновики id=140'} id={'140'}/>
265
- <SideMenu.SubItem caption={'Удаленные id=150'} id={'150'}/>
266
- <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
267
- <SideMenu.SubItem caption={'Требуют обработки id=160'} id={'160'}/>
268
- <SideMenu.SubItem caption={'Обработанные id=170'} id={'170'}/>
269
- </SideMenu.Item>
270
- <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты id=200'} id={'200'}/>
271
- <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения id=300'} marker={'5'} id={'300'}>
272
- <SideMenu.SubItem caption={'Входящие id=310'} marker={'5'} id={'310'}/>
273
- <SideMenu.SubItem caption={'Исходящие id=320'} id={'320'}/>
274
- <SideMenu.SubItem caption={'Внутренние id=330'} id={'330'}/>
275
- <SideMenu.SubItem caption={'Черновики id=340'} id={'340'}/>
276
- <SideMenu.SubItem caption={'Удаленные id=350'} id={'350'}/>
277
- </SideMenu.Item>
278
- <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная id=400'} id={'400'}/>
279
- <SideMenu.Divider/>
280
- <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел id=500'} id={'500'}/>
281
- <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность id=600'} id={'600'}/>
282
- <SideMenu.Link href={'https://google.com'} icon={<AttachLinkIcon24Regular />} caption={'Ссылка'} target={'_blank'} />
283
- </SideMenu.Body>
284
- <SideMenu.Footer>
285
- <SideMenu.Dropdown icon={<StackHDownIcon24Regular/>}>
286
- <MenuItem>СКБ Контур</MenuItem>
287
- <MenuItem>Сириус Базинес</MenuItem>
288
- <MenuItem>Контур НТТ</MenuItem>
289
- <MenuItem>Промэлектроника</MenuItem>
290
- <SideMenu.Divider/>
291
- <MenuItem>Список организаций</MenuItem>
292
- </SideMenu.Dropdown>
293
- <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
294
- <SideMenu.Avatar
295
- userName={'Ишматова Елена'}
296
- avatarUrl={getKonturAvatarUrl({
297
- userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
298
- })}
299
- >
300
- <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
301
- Личный кабинет
302
- </MenuItem>
303
- <MenuItem >Безопасность</MenuItem>
262
+ <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>} withWidget={false}/>
263
+ <SideMenu.Body>
264
+ <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию id=100'} marker={'2'} id={'100'}>
265
+ <SideMenu.SubItem caption={'Входящие id=110'} id={'110'}/>
266
+ <SideMenu.SubItem caption={'Исходящие id=120'} marker={'2'} id={'120'}>
267
+ <SideMenu.SubItem caption={'Исходящие1 id=121'} id={'121'}/>
268
+ <SideMenu.SubItem caption={'Исходящие2 id=122'} id={'122'}/>
269
+ </SideMenu.SubItem>
270
+ <SideMenu.SubItem caption={'Внутренние id=130'} id={'130'}/>
271
+ <SideMenu.SubItem caption={'Черновики id=140'} id={'140'}/>
272
+ <SideMenu.SubItem caption={'Удаленные id=150'} id={'150'}/>
273
+ <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
274
+ <SideMenu.SubItem caption={'Требуют обработки id=160'} id={'160'}/>
275
+ <SideMenu.SubItem caption={'Обработанные id=170'} id={'170'}/>
276
+ </SideMenu.Item>
277
+ <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты id=200'} id={'200'}/>
278
+ <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения id=300'} marker={'5'} id={'300'}>
279
+ <SideMenu.SubItem caption={'Входящие id=310'} marker={'5'} id={'310'}/>
280
+ <SideMenu.SubItem caption={'Исходящие id=320'} id={'320'}/>
281
+ <SideMenu.SubItem caption={'Внутренние id=330'} id={'330'}/>
282
+ <SideMenu.SubItem caption={'Черновики id=340'} id={'340'}/>
283
+ <SideMenu.SubItem caption={'Удаленные id=350'} id={'350'}/>
284
+ </SideMenu.Item>
285
+ <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная id=400'} id={'400'}/>
304
286
  <SideMenu.Divider />
305
- <MenuItem >Выйти</MenuItem>
306
- </SideMenu.Avatar>
307
- </SideMenu.Footer>
308
- </SideMenu>
287
+ <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел id=500'} id={'500'}/>
288
+ <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность id=600'} id={'600'}/>
289
+ <SideMenu.Link href={'https://google.com'} icon={<AttachLinkIcon24Regular />} caption={'Ссылка'} target={'_blank'} />
290
+ </SideMenu.Body>
291
+ <SideMenu.Footer>
292
+ <SideMenu.Dropdown icon={<StackHDownIcon24Regular/>}>
293
+ <MenuItem>СКБ Контур</MenuItem>
294
+ <MenuItem>Сириус Базинес</MenuItem>
295
+ <MenuItem>Контур НТТ</MenuItem>
296
+ <MenuItem>Промэлектроника</MenuItem>
297
+ <MenuSeparator />
298
+ <MenuItem>Список организаций</MenuItem>
299
+ </SideMenu.Dropdown>
300
+ <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
301
+ <SideMenu.Avatar
302
+ userName={'Ишматова Елена'}
303
+ avatarUrl={getKonturAvatarUrl({
304
+ userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
305
+ })}
306
+ >
307
+ <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
308
+ Личный кабинет
309
+ </MenuItem>
310
+ <MenuItem >Безопасность</MenuItem>
311
+ <MenuSeparator />
312
+ <MenuItem >Выйти</MenuItem>
313
+ </SideMenu.Avatar>
314
+ </SideMenu.Footer>
315
+ </SideMenu>
316
+ </ThemeContext.Provider>
309
317
  <div style={isSeparatedMenu? {position: 'absolute', left: '464px'}:{}}>
310
318
  <p>Active Item: {activeItem}</p>
311
319
  <Select items={items} value={activeItem} onValueChange={setActiveItem} />
@@ -342,7 +350,7 @@ const items = [
342
350
  import { useState } from 'react';
343
351
  import { getKonturAvatarUrl } from '@skbkontur/react-ui-addons';
344
352
  import { Kontur, Ofd } from '@skbkontur/logos';
345
- import { MenuItem, Select, Switcher } from '@skbkontur/react-ui';
353
+ import { ThemeContext, ThemeFactory, MenuItem, Select, Switcher, MenuSeparator, THEME_2022 } from '@skbkontur/react-ui';
346
354
  import { SideMenu } from './index';
347
355
  import {
348
356
  DocTextIcon24Regular,
@@ -389,60 +397,62 @@ const items = [
389
397
  ];
390
398
 
391
399
  <div style={{height: '600px', display: 'flex', position: 'relative'}}>
400
+ <ThemeContext.Provider value={ThemeFactory.create({ sideMenuProductColor: '#64b419' }, THEME_2022)}>
392
401
  <SideMenu value={activeItem} onValueChange={setActiveItem} isSeparatedMenu={isSeparatedMenu}>
393
- <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>} withWidget={false}/>
394
- <SideMenu.Body>
395
- <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'новое'} id={'documents'}>
396
- <SideMenu.SubItem caption={'Входящие'} id={'my-id-for-incoming-documents'}/>
397
- <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
398
- <SideMenu.SubItem caption={'Исходящие1'}/>
399
- <SideMenu.SubItem caption={'Исходящие2'}/>
400
- </SideMenu.SubItem>
401
- <SideMenu.SubItem caption={'Внутренние'}/>
402
- <SideMenu.SubItem caption={'Черновики'}/>
403
- <SideMenu.SubItem caption={'Удаленные'}/>
404
- <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
405
- <SideMenu.SubItem caption={'Требуют обработки'}/>
406
- <SideMenu.SubItem caption={'Обработанные'}/>
407
- </SideMenu.Item>
408
- <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
409
- <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
410
- <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
411
- <SideMenu.SubItem caption={'Исходящие'}/>
412
- <SideMenu.SubItem caption={'Внутренние'}/>
413
- <SideMenu.SubItem caption={'Черновики'}/>
414
- <SideMenu.SubItem caption={'Удаленные'}/>
415
- </SideMenu.Item>
416
- <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
417
- <SideMenu.Divider/>
418
- <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
419
- <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'} id={'600'}/>
420
- </SideMenu.Body>
421
- <SideMenu.Footer>
422
- <SideMenu.Organisations icon={<StackHDownIcon24Regular/>}>
423
- <MenuItem>СКБ Контур</MenuItem>
424
- <MenuItem>Сириус Базинес</MenuItem>
425
- <MenuItem>Контур НТТ</MenuItem>
426
- <MenuItem>Промэлектроника</MenuItem>
427
- <SideMenu.Divider/>
428
- <MenuItem>Список организаций</MenuItem>
429
- </SideMenu.Organisations>
430
- <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
431
- <SideMenu.Avatar
432
- userName={'Ишматова Елена'}
433
- avatarUrl={getKonturAvatarUrl({
434
- userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
435
- })}
436
- >
437
- <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
438
- Личный кабинет
439
- </MenuItem>
440
- <MenuItem >Безопасность</MenuItem>
402
+ <SideMenu.Header konturLogo={<Kontur/>} productLogo={<Ofd/>} withWidget={false}/>
403
+ <SideMenu.Body>
404
+ <SideMenu.Item icon={<DocTextIcon24Regular/>} caption={'Документы к подписанию'} marker={'2'} id={'documents'}>
405
+ <SideMenu.SubItem caption={'Входящие'} id={'my-id-for-incoming-documents'}/>
406
+ <SideMenu.SubItem caption={'Исходящие'} marker={'2'}>
407
+ <SideMenu.SubItem caption={'Исходящие1'}/>
408
+ <SideMenu.SubItem caption={'Исходящие2'}/>
409
+ </SideMenu.SubItem>
410
+ <SideMenu.SubItem caption={'Внутренние'}/>
411
+ <SideMenu.SubItem caption={'Черновики'}/>
412
+ <SideMenu.SubItem caption={'Удаленные'}/>
413
+ <SideMenu.SubItemHeader>Согласованные</SideMenu.SubItemHeader>
414
+ <SideMenu.SubItem caption={'Требуют обработки'}/>
415
+ <SideMenu.SubItem caption={'Обработанные'}/>
416
+ </SideMenu.Item>
417
+ <SideMenu.Item icon={<FaceAHappyIcon24Regular />} caption={'Контрагенты'}/>
418
+ <SideMenu.Item icon={<CommentRectTextIcon24Regular/>} caption={'Сообщения'} marker={'5'}>
419
+ <SideMenu.SubItem caption={'Входящие'} marker={'5'}/>
420
+ <SideMenu.SubItem caption={'Исходящие'}/>
421
+ <SideMenu.SubItem caption={'Внутренние'}/>
422
+ <SideMenu.SubItem caption={'Черновики'}/>
423
+ <SideMenu.SubItem caption={'Удаленные'}/>
424
+ </SideMenu.Item>
425
+ <SideMenu.Item icon={<LightbulbIcon24Regular/>} caption={'Справочная'}/>
441
426
  <SideMenu.Divider />
442
- <MenuItem >Выйти</MenuItem>
443
- </SideMenu.Avatar>
444
- </SideMenu.Footer>
445
- </SideMenu>
427
+ <SideMenu.Item icon={<BookOpenTextIcon24Regular/>} caption={'Еще раздел'}/>
428
+ <SideMenu.Item icon={<BookmarkIcon24Regular/>} caption={'Отчетность'} id={'600'}/>
429
+ </SideMenu.Body>
430
+ <SideMenu.Footer>
431
+ <SideMenu.Organisations icon={<StackHDownIcon24Regular/>}>
432
+ <MenuItem>СКБ Контур</MenuItem>
433
+ <MenuItem>Сириус Базинес</MenuItem>
434
+ <MenuItem>Контур НТТ</MenuItem>
435
+ <MenuItem>Промэлектроника</MenuItem>
436
+ <MenuSeparator />
437
+ <MenuItem>Список организаций</MenuItem>
438
+ </SideMenu.Organisations>
439
+ <SideMenu.Item icon={<SettingsGearIcon24Regular/>} caption={'Реквизиты и настройки'}/>
440
+ <SideMenu.Avatar
441
+ userName={'Ишматова Елена'}
442
+ avatarUrl={getKonturAvatarUrl({
443
+ userId: '992408aa-050e-41e9-9a48-6bf2f2f20d94'
444
+ })}
445
+ >
446
+ <MenuItem href={'https://cabinet.kontur.ru'} target="_blank">
447
+ Личный кабинет
448
+ </MenuItem>
449
+ <MenuItem >Безопасность</MenuItem>
450
+ <MenuSeparator />
451
+ <MenuItem >Выйти</MenuItem>
452
+ </SideMenu.Avatar>
453
+ </SideMenu.Footer>
454
+ </SideMenu>
455
+ </ThemeContext.Provider>
446
456
  <div style={isSeparatedMenu? {position: 'absolute', left: '464px'}:{}}>
447
457
  <p>Active Item: {activeItem}</p>
448
458
  <Select items={items} value={activeItem} onValueChange={setActiveItem} />
@@ -590,14 +600,14 @@ import {
590
600
  DocTextIcon24Regular,
591
601
  SettingsGearIcon24Regular,
592
602
  } from '@skbkontur/icons';
593
- import { ThemeContext, ThemeFactory } from "@skbkontur/react-ui";
603
+ import { ThemeContext, ThemeFactory } from '@skbkontur/react-ui';
594
604
 
595
605
  <div style={{ height: '200px', position: 'relative' }}>
596
- <ThemeContext.Provider value={ThemeFactory.create({ sideMenuWidth: '300px', sideMenuIconSize: '32px' })}>
606
+ <ThemeContext.Provider value={ThemeFactory.create({ sideMenuWidth: '300px', sideMenuIconSize: '32px', sideMenuProductColor: '#64b419' })}>
597
607
  <SideMenu disableSwipe={false}>
598
608
  <SideMenu.Header konturLogo={<Kontur />} productLogo={<Ofd />} />
599
609
  <SideMenu.Body>
600
- <SideMenu.Item icon={<DocTextIcon24Regular />} caption={'Документы к подписанию'} marker={'новое'} />
610
+ <SideMenu.Item icon={<DocTextIcon24Regular />} caption={'Документы к подписанию'} marker={'2'} />
601
611
  </SideMenu.Body>
602
612
  <SideMenu.Footer>
603
613
  <SideMenu.Item icon={<SettingsGearIcon24Regular />} caption={'Реквизиты и настройки'} />
@@ -625,7 +635,7 @@ import { ThemeContext, ThemeFactory } from "@skbkontur/react-ui";
625
635
  sideMenuLineHeight: string;
626
636
  sideMenuLargeLineHeight: string;
627
637
  sideMenuProductColor: string;
628
- sideMenuFixedSeparatorColor: string;
638
+ sideMenuDividerBgColor: string;
629
639
  sideMenuDesktopMediaQuery: string;
630
640
  sideMenuNarrowDesktopMediaQuery: string;
631
641
  sideMenuTabletMediaQuery: string;