@patternfly/patternfly 5.0.0-prerelease.1 → 5.0.0-prerelease.3

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 (45) hide show
  1. package/base/_common.scss +7 -0
  2. package/base/_variables.scss +0 -7
  3. package/base/patternfly-common.css +6 -0
  4. package/base/patternfly-variables.css +0 -6
  5. package/components/CalendarMonth/calendar-month.css +3 -0
  6. package/components/CalendarMonth/calendar-month.scss +2 -0
  7. package/components/CalendarMonth/themes/dark/calendar-month.scss +4 -0
  8. package/components/Masthead/masthead.css +2 -6
  9. package/components/Masthead/masthead.scss +1 -7
  10. package/components/Masthead/themes/dark/masthead.scss +1 -0
  11. package/components/MenuToggle/menu-toggle.css +13 -11
  12. package/components/MenuToggle/menu-toggle.scss +14 -12
  13. package/components/MenuToggle/themes/dark/menu-toggle.scss +2 -1
  14. package/docs/demos/AboutModal/examples/AboutModal.md +42 -774
  15. package/docs/demos/Alert/examples/Alert.md +126 -2322
  16. package/docs/demos/BackToTop/examples/BackToTop.md +42 -774
  17. package/docs/demos/Banner/examples/Banner.md +84 -1588
  18. package/docs/demos/CardView/examples/CardView.md +42 -774
  19. package/docs/demos/ContextSelector/examples/ContextSelector.md +136 -2448
  20. package/docs/demos/Dashboard/examples/Dashboard.md +42 -774
  21. package/docs/demos/DataList/examples/DataList.md +191 -3119
  22. package/docs/demos/DescriptionList/examples/DescriptionList.md +126 -2322
  23. package/docs/demos/Drawer/examples/Drawer.md +210 -3870
  24. package/docs/demos/JumpLinks/examples/JumpLinks.md +252 -4644
  25. package/docs/demos/Masthead/examples/Masthead.md +144 -1962
  26. package/docs/demos/Modal/examples/Modal.md +252 -4644
  27. package/docs/demos/Nav/examples/Nav.md +336 -6192
  28. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +231 -3891
  29. package/docs/demos/Page/examples/Page.md +378 -6966
  30. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +426 -5550
  31. package/docs/demos/Skeleton/examples/Skeleton.md +42 -774
  32. package/docs/demos/Table/examples/Table.md +752 -11732
  33. package/docs/demos/Tabs/examples/Tabs.md +252 -4644
  34. package/docs/demos/Toolbar/examples/Toolbar.md +84 -1548
  35. package/docs/demos/Wizard/examples/Wizard.md +378 -6966
  36. package/package.json +1 -1
  37. package/patternfly-base-no-globals-theme-dark-unversioned.css +6 -6
  38. package/patternfly-base-no-globals.css +6 -6
  39. package/patternfly-base-theme-dark-unversioned.css +6 -6
  40. package/patternfly-base.css +6 -6
  41. package/patternfly-no-globals.css +24 -23
  42. package/patternfly-theme-dark-unversioned.css +24 -23
  43. package/patternfly.css +24 -23
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
@@ -56,800 +56,68 @@ wrapperTag: div
56
56
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
57
57
  >
58
58
  <div class="pf-v5-c-toolbar__item">
59
- <nav
60
- class="pf-v5-c-app-launcher"
59
+ <button
60
+ class="pf-v5-c-menu-toggle pf-m-plain"
61
+ type="button"
62
+ aria-expanded="false"
61
63
  aria-label="Application launcher"
62
- id="drawer-collapsed-example-masthead-application-launcher"
63
64
  >
64
- <button
65
- class="pf-v5-c-app-launcher__toggle"
66
- type="button"
67
- id="drawer-collapsed-example-masthead-application-launcher-button"
68
- aria-expanded="false"
69
- aria-label="Application launcher"
70
- >
71
- <i class="fas fa-th" aria-hidden="true"></i>
72
- </button>
73
- <div
74
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
75
- hidden
76
- >
77
- <div class="pf-v5-c-app-launcher__menu-search">
78
- <div class="pf-v5-c-text-input-group">
79
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
80
- <span class="pf-v5-c-text-input-group__text">
81
- <span class="pf-v5-c-text-input-group__icon">
82
- <i class="fas fa-fw fa-search"></i>
83
- </span>
84
- <input
85
- class="pf-v5-c-text-input-group__text-input"
86
- type="text"
87
- placeholder="Filer by name"
88
- value
89
- aria-label="Search input"
90
- />
91
- </span>
92
- </div>
93
- </div>
94
- </div>
95
- <section class="pf-v5-c-app-launcher__group">
96
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
97
- <ul role="list">
98
- <li
99
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
100
- >
101
- <a class="pf-v5-c-app-launcher__menu-item">
102
- Link 1
103
- <span
104
- class="pf-v5-c-app-launcher__menu-item-external-icon"
105
- >
106
- <i
107
- class="fas fa-external-link-alt"
108
- aria-hidden="true"
109
- ></i>
110
- </span>
111
- <span
112
- class="pf-v5-screen-reader"
113
- >(opens new window)</span>
114
- </a>
115
- <button
116
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
117
- type="button"
118
- aria-label="Favorite"
119
- >
120
- <i class="fas fa-star" aria-hidden="true"></i>
121
- </button>
122
- </li>
123
- <li
124
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
125
- >
126
- <a class="pf-v5-c-app-launcher__menu-item">
127
- Link 2
128
- <span
129
- class="pf-v5-c-app-launcher__menu-item-external-icon"
130
- >
131
- <i
132
- class="fas fa-external-link-alt"
133
- aria-hidden="true"
134
- ></i>
135
- </span>
136
- <span
137
- class="pf-v5-screen-reader"
138
- >(opens new window)</span>
139
- </a>
140
- <button
141
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
142
- type="button"
143
- aria-label="Favorite"
144
- >
145
- <i class="fas fa-star" aria-hidden="true"></i>
146
- </button>
147
- </li>
148
- </ul>
149
- </section>
150
- <hr class="pf-v5-c-divider" />
151
- <section class="pf-v5-c-app-launcher__group">
152
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
153
- <ul role="list">
154
- <li
155
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
156
- >
157
- <a class="pf-v5-c-app-launcher__menu-item">
158
- Link 1
159
- <span
160
- class="pf-v5-c-app-launcher__menu-item-external-icon"
161
- >
162
- <i
163
- class="fas fa-external-link-alt"
164
- aria-hidden="true"
165
- ></i>
166
- </span>
167
- <span
168
- class="pf-v5-screen-reader"
169
- >(opens new window)</span>
170
- </a>
171
- <button
172
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
173
- type="button"
174
- aria-label="Favorite"
175
- >
176
- <i class="fas fa-star" aria-hidden="true"></i>
177
- </button>
178
- </li>
179
- <li
180
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
181
- >
182
- <a class="pf-v5-c-app-launcher__menu-item">
183
- Link 2
184
- <span
185
- class="pf-v5-c-app-launcher__menu-item-external-icon"
186
- >
187
- <i
188
- class="fas fa-external-link-alt"
189
- aria-hidden="true"
190
- ></i>
191
- </span>
192
- <span
193
- class="pf-v5-screen-reader"
194
- >(opens new window)</span>
195
- </a>
196
- <button
197
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
198
- type="button"
199
- aria-label="Favorite"
200
- >
201
- <i class="fas fa-star" aria-hidden="true"></i>
202
- </button>
203
- </li>
204
- </ul>
205
- </section>
206
- </div>
207
- </nav>
65
+ <i class="fas fa-th" aria-hidden="true"></i>
66
+ </button>
208
67
  </div>
209
68
  <div class="pf-v5-c-toolbar__item">
210
- <div class="pf-v5-c-dropdown">
211
- <button
212
- class="pf-v5-c-dropdown__toggle pf-m-plain"
213
- id="drawer-collapsed-example-masthead-settings-button"
214
- aria-expanded="false"
215
- type="button"
216
- aria-label="Settings"
217
- >
218
- <i class="fas fa-cog" aria-hidden="true"></i>
219
- </button>
220
- <ul
221
- class="pf-v5-c-dropdown__menu pf-m-align-right"
222
- aria-labelledby="drawer-collapsed-example-masthead-settings-button"
223
- hidden
224
- >
225
- <li>
226
- <button
227
- class="pf-v5-c-dropdown__menu-item"
228
- type="button"
229
- >Settings</button>
230
- </li>
231
- <li>
232
- <button
233
- class="pf-v5-c-dropdown__menu-item"
234
- type="button"
235
- >Use the beta release</button>
236
- </li>
237
- </ul>
238
- </div>
69
+ <button
70
+ class="pf-v5-c-menu-toggle pf-m-plain"
71
+ type="button"
72
+ aria-expanded="false"
73
+ aria-label="Settings"
74
+ >
75
+ <i class="fas fa-cog" aria-hidden="true"></i>
76
+ </button>
239
77
  </div>
240
78
  <div class="pf-v5-c-toolbar__item">
241
- <div class="pf-v5-c-dropdown">
242
- <button
243
- class="pf-v5-c-dropdown__toggle pf-m-plain"
244
- id="drawer-collapsed-example-masthead-help-button"
245
- aria-expanded="false"
246
- type="button"
247
- aria-label="Help"
248
- >
249
- <i class="fas fa-question-circle" aria-hidden="true"></i>
250
- </button>
251
- <ul
252
- class="pf-v5-c-dropdown__menu pf-m-align-right"
253
- aria-labelledby="drawer-collapsed-example-masthead-help-button"
254
- hidden
255
- >
256
- <li>
257
- <button
258
- class="pf-v5-c-dropdown__menu-item"
259
- type="button"
260
- >Support options</button>
261
- </li>
262
- <li>
263
- <button
264
- class="pf-v5-c-dropdown__menu-item"
265
- type="button"
266
- >Open support case</button>
267
- </li>
268
- <li>
269
- <button
270
- class="pf-v5-c-dropdown__menu-item"
271
- type="button"
272
- >API documentation</button>
273
- </li>
274
- </ul>
275
- </div>
276
- </div>
277
- </div>
278
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
279
- <div class="pf-v5-c-dropdown">
280
79
  <button
281
80
  class="pf-v5-c-menu-toggle pf-m-plain"
282
81
  type="button"
283
82
  aria-expanded="false"
284
- aria-label="Actions"
83
+ aria-label="Help"
285
84
  >
286
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
85
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
287
86
  </button>
288
- <div
289
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
290
- hidden
291
- >
292
- <div class="pf-v5-c-menu__content">
293
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
294
- <ul class="pf-v5-c-menu__list" role="menu">
295
- <li
296
- class="pf-v5-c-menu__list-item pf-m-disabled"
297
- role="none"
298
- >
299
- <button
300
- class="pf-v5-c-menu__item"
301
- type="button"
302
- disabled
303
- role="menuitem"
304
- >
305
- <span class="pf-v5-c-menu__item-description">
306
- <div class="pf-v5-u-font-size-sm">Username:</div>
307
- <div class="pf-v5-u-font-size-md">ned_username</div>
308
- </span>
309
- </button>
310
- </li>
311
- <li
312
- class="pf-v5-c-menu__list-item pf-m-disabled"
313
- role="none"
314
- >
315
- <button
316
- class="pf-v5-c-menu__item"
317
- type="button"
318
- disabled
319
- role="menuitem"
320
- >
321
- <span class="pf-v5-c-menu__item-description">
322
- <div
323
- class="pf-v5-u-font-size-sm"
324
- >Account number:</div>
325
- <div class="pf-v5-u-font-size-md">123456789</div>
326
- </span>
327
- </button>
328
- </li>
329
- <li class="pf-v5-c-divider" role="separator"></li>
330
- <li class="pf-v5-c-menu__list-item" role="none">
331
- <button
332
- class="pf-v5-c-menu__item"
333
- type="button"
334
- role="menuitem"
335
- >
336
- <span class="pf-v5-c-menu__item-main">
337
- <span class="pf-v5-c-menu__item-text">My profile</span>
338
- </span>
339
- </button>
340
- </li>
341
- <li class="pf-v5-c-menu__list-item" role="none">
342
- <button
343
- class="pf-v5-c-menu__item"
344
- type="button"
345
- role="menuitem"
346
- >
347
- <span class="pf-v5-c-menu__item-main">
348
- <span
349
- class="pf-v5-c-menu__item-text"
350
- >User management</span>
351
- </span>
352
- </button>
353
- </li>
354
- <li class="pf-v5-c-menu__list-item" role="none">
355
- <button
356
- class="pf-v5-c-menu__item"
357
- type="button"
358
- role="menuitem"
359
- >
360
- <span class="pf-v5-c-menu__item-main">
361
- <span class="pf-v5-c-menu__item-text">Logout</span>
362
- </span>
363
- </button>
364
- </li>
365
- </ul>
366
- </section>
367
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
368
- <section class="pf-v5-c-menu__group">
369
- <ul class="pf-v5-c-menu__list" role="menu">
370
- <li class="pf-v5-c-menu__list-item" role="none">
371
- <button
372
- class="pf-v5-c-menu__item"
373
- type="button"
374
- role="menuitem"
375
- aria-expanded="false"
376
- >
377
- <span class="pf-v5-c-menu__item-main">
378
- <span class="pf-v5-c-menu__item-icon">
379
- <i
380
- class="fas fa-fw fa-cog"
381
- aria-hidden="true"
382
- ></i>
383
- </span>
384
- <span class="pf-v5-c-menu__item-text">Settings</span>
385
- <span class="pf-v5-c-menu__item-toggle-icon">
386
- <i class="fas fa-angle-right"></i>
387
- </span>
388
- </span>
389
- </button>
390
- <div class="pf-v5-c-menu" hidden>
391
- <div class="pf-v5-c-menu__content">
392
- <ul class="pf-v5-c-menu__list" role="menu">
393
- <li
394
- class="pf-v5-c-menu__list-item pf-m-drill-up"
395
- role="none"
396
- >
397
- <button
398
- class="pf-v5-c-menu__item"
399
- type="button"
400
- role="menuitem"
401
- >
402
- <span class="pf-v5-c-menu__item-main">
403
- <span
404
- class="pf-v5-c-menu__item-toggle-icon"
405
- >
406
- <i class="fas fa-angle-left"></i>
407
- </span>
408
- <span class="pf-v5-c-menu__item-icon">
409
- <i
410
- class="fas fa-fw fa-cog"
411
- aria-hidden="true"
412
- ></i>
413
- </span>
414
- <span
415
- class="pf-v5-c-menu__item-text"
416
- >Settings</span>
417
- </span>
418
- </button>
419
- </li>
420
- <li class="pf-v5-c-divider" role="separator"></li>
421
- <li
422
- class="pf-v5-c-menu__list-item"
423
- role="none"
424
- >
425
- <a
426
- class="pf-v5-c-menu__item"
427
- href="#"
428
- role="menuitem"
429
- >
430
- <span class="pf-v5-c-menu__item-main">
431
- <span
432
- class="pf-v5-c-menu__item-text"
433
- >Customer support</span>
434
- </span>
435
- </a>
436
- </li>
437
- <li
438
- class="pf-v5-c-menu__list-item"
439
- role="none"
440
- >
441
- <a
442
- class="pf-v5-c-menu__item"
443
- href="#"
444
- role="menuitem"
445
- >
446
- <span class="pf-v5-c-menu__item-main">
447
- <span
448
- class="pf-v5-c-menu__item-text"
449
- >About</span>
450
- </span>
451
- </a>
452
- </li>
453
- </ul>
454
- </div>
455
- </div>
456
- </li>
457
-
458
- <li class="pf-v5-c-menu__list-item" role="none">
459
- <button
460
- class="pf-v5-c-menu__item"
461
- type="button"
462
- role="menuitem"
463
- aria-expanded="false"
464
- >
465
- <span class="pf-v5-c-menu__item-main">
466
- <span class="pf-v5-c-menu__item-icon">
467
- <i
468
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
469
- aria-hidden="true"
470
- ></i>
471
- </span>
472
- <span class="pf-v5-c-menu__item-text">Help</span>
473
- <span class="pf-v5-c-menu__item-toggle-icon">
474
- <i class="fas fa-angle-right"></i>
475
- </span>
476
- </span>
477
- </button>
478
- <div class="pf-v5-c-menu" hidden>
479
- <div class="pf-v5-c-menu__content">
480
- <ul class="pf-v5-c-menu__list" role="menu">
481
- <li
482
- class="pf-v5-c-menu__list-item pf-m-drill-up"
483
- role="none"
484
- >
485
- <button
486
- class="pf-v5-c-menu__item"
487
- type="button"
488
- role="menuitem"
489
- >
490
- <span class="pf-v5-c-menu__item-main">
491
- <span
492
- class="pf-v5-c-menu__item-toggle-icon"
493
- >
494
- <i class="fas fa-angle-left"></i>
495
- </span>
496
- <span class="pf-v5-c-menu__item-icon">
497
- <i
498
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
499
- aria-hidden="true"
500
- ></i>
501
- </span>
502
- <span
503
- class="pf-v5-c-menu__item-text"
504
- >Help</span>
505
- </span>
506
- </button>
507
- </li>
508
- <li class="pf-v5-c-divider" role="separator"></li>
509
- <li
510
- class="pf-v5-c-menu__list-item"
511
- role="none"
512
- >
513
- <a
514
- class="pf-v5-c-menu__item"
515
- href="#"
516
- role="menuitem"
517
- >
518
- <span class="pf-v5-c-menu__item-main">
519
- <span
520
- class="pf-v5-c-menu__item-text"
521
- >Support options</span>
522
- </span>
523
- </a>
524
- </li>
525
- <li
526
- class="pf-v5-c-menu__list-item"
527
- role="none"
528
- >
529
- <a
530
- class="pf-v5-c-menu__item"
531
- href="#"
532
- role="menuitem"
533
- >
534
- <span class="pf-v5-c-menu__item-main">
535
- <span
536
- class="pf-v5-c-menu__item-text"
537
- >Open support case</span>
538
- </span>
539
- </a>
540
- </li>
541
- <li
542
- class="pf-v5-c-menu__list-item"
543
- role="none"
544
- >
545
- <a
546
- class="pf-v5-c-menu__item"
547
- href="#"
548
- role="menuitem"
549
- >
550
- <span class="pf-v5-c-menu__item-main">
551
- <span
552
- class="pf-v5-c-menu__item-text"
553
- >API documentation</span>
554
- </span>
555
- </a>
556
- </li>
557
- </ul>
558
- </div>
559
- </div>
560
- </li>
561
-
562
- <li class="pf-v5-c-menu__list-item" role="none">
563
- <button
564
- class="pf-v5-c-menu__item"
565
- type="button"
566
- role="menuitem"
567
- >
568
- <span class="pf-v5-c-menu__item-main">
569
- <span class="pf-v5-c-menu__item-icon">
570
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
571
- </span>
572
- <span
573
- class="pf-v5-c-menu__item-text"
574
- >Application launcher</span>
575
- <span class="pf-v5-c-menu__item-toggle-icon">
576
- <i class="fas fa-angle-right"></i>
577
- </span>
578
- </span>
579
- </button>
580
- <div class="pf-v5-c-menu" hidden>
581
- <div class="pf-v5-c-menu__header">
582
- <button
583
- class="pf-v5-c-menu__item"
584
- type="button"
585
- role="menuitem"
586
- >
587
- <span class="pf-v5-c-menu__item-main">
588
- <span
589
- class="pf-v5-c-menu__item-toggle-icon"
590
- >
591
- <i class="fas fa-angle-left"></i>
592
- </span>
593
- <span class="pf-v5-c-menu__item-icon">
594
- <i
595
- class="fas fa-fw fa-th"
596
- aria-hidden="true"
597
- ></i>
598
- </span>
599
- <span
600
- class="pf-v5-c-menu__item-text"
601
- >Application launcher</span>
602
- </span>
603
- </button>
604
- </div>
605
- <div class="pf-v5-c-menu__search">
606
- <div class="pf-v5-c-menu__search-input">
607
- <div class="pf-v5-c-text-input-group">
608
- <div
609
- class="pf-v5-c-text-input-group__main pf-m-icon"
610
- >
611
- <span
612
- class="pf-v5-c-text-input-group__text"
613
- >
614
- <span
615
- class="pf-v5-c-text-input-group__icon"
616
- >
617
- <i class="fas fa-fw fa-search"></i>
618
- </span>
619
- <input
620
- class="pf-v5-c-text-input-group__text-input"
621
- type="text"
622
- placeholder="Search"
623
- value
624
- aria-label="Search input"
625
- />
626
- </span>
627
- </div>
628
- </div>
629
- </div>
630
- </div>
631
- <hr class="pf-v5-c-divider" />
632
- <section class="pf-v5-c-menu__group">
633
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
634
- <ul class="pf-v5-c-menu__list" role="menu">
635
- <li
636
- class="pf-v5-c-menu__list-item"
637
- role="none"
638
- >
639
- <a
640
- class="pf-v5-c-menu__item"
641
- href="#"
642
- role="menuitem"
643
- >
644
- <span class="pf-v5-c-menu__item-main">
645
- <span
646
- class="pf-v5-c-menu__item-text"
647
- >Link 1</span>
648
- </span>
649
- </a>
650
- <button
651
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
652
- type="button"
653
- aria-label="Starred"
654
- >
655
- <span
656
- class="pf-v5-c-menu__item-action-icon"
657
- >
658
- <i
659
- class="fas fa-star"
660
- aria-hidden="true"
661
- ></i>
662
- </span>
663
- </button>
664
- </li>
665
- <li
666
- class="pf-v5-c-menu__list-item"
667
- role="none"
668
- >
669
- <a
670
- class="pf-v5-c-menu__item"
671
- href="#"
672
- role="menuitem"
673
- target="_blank"
674
- >
675
- <span class="pf-v5-c-menu__item-main">
676
- <span
677
- class="pf-v5-c-menu__item-text"
678
- >Link 2</span>
679
- <span
680
- class="pf-v5-c-menu__item-external-icon"
681
- >
682
- <i
683
- class="fas fa-external-link-alt"
684
- aria-hidden="true"
685
- ></i>
686
- </span>
687
- <span
688
- class="pf-v5-screen-reader"
689
- >(opens new window)</span>
690
- </span>
691
- </a>
692
- <button
693
- class="pf-v5-c-menu__item-action pf-m-favorite"
694
- type="button"
695
- aria-label="Not starred"
696
- >
697
- <span
698
- class="pf-v5-c-menu__item-action-icon"
699
- >
700
- <i
701
- class="fas fa-star"
702
- aria-hidden="true"
703
- ></i>
704
- </span>
705
- </button>
706
- </li>
707
- </ul>
708
- </section>
709
- <hr class="pf-v5-c-divider" />
710
- <section class="pf-v5-c-menu__group">
711
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
712
- <ul class="pf-v5-c-menu__list" role="menu">
713
- <li
714
- class="pf-v5-c-menu__list-item"
715
- role="none"
716
- >
717
- <a
718
- class="pf-v5-c-menu__item"
719
- href="#"
720
- role="menuitem"
721
- >
722
- <span class="pf-v5-c-menu__item-main">
723
- <span
724
- class="pf-v5-c-menu__item-text"
725
- >Link 1</span>
726
- </span>
727
- </a>
728
- <button
729
- class="pf-v5-c-menu__item-action pf-m-favorite"
730
- type="button"
731
- aria-label="Not starred"
732
- >
733
- <span
734
- class="pf-v5-c-menu__item-action-icon"
735
- >
736
- <i
737
- class="fas fa-star"
738
- aria-hidden="true"
739
- ></i>
740
- </span>
741
- </button>
742
- </li>
743
- <li
744
- class="pf-v5-c-menu__list-item"
745
- role="none"
746
- >
747
- <a
748
- class="pf-v5-c-menu__item"
749
- href="#"
750
- role="menuitem"
751
- target="_blank"
752
- >
753
- <span class="pf-v5-c-menu__item-main">
754
- <span
755
- class="pf-v5-c-menu__item-text"
756
- >Link 2</span>
757
- <span
758
- class="pf-v5-c-menu__item-external-icon"
759
- >
760
- <i
761
- class="fas fa-external-link-alt"
762
- aria-hidden="true"
763
- ></i>
764
- </span>
765
- <span
766
- class="pf-v5-screen-reader"
767
- >(opens new window)</span>
768
- </span>
769
- </a>
770
- <button
771
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
772
- type="button"
773
- aria-label="Starred"
774
- >
775
- <span
776
- class="pf-v5-c-menu__item-action-icon"
777
- >
778
- <i
779
- class="fas fa-star"
780
- aria-hidden="true"
781
- ></i>
782
- </span>
783
- </button>
784
- </li>
785
- </ul>
786
- </section>
787
- </div>
788
- </li>
789
- </ul>
790
- </section>
791
- </div>
792
- </div>
793
87
  </div>
794
88
  </div>
795
- </div>
796
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
797
- <div
798
- class="pf-v5-c-dropdown pf-m-full-height"
799
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
800
- >
89
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
801
90
  <button
802
- class="pf-v5-c-dropdown__toggle"
803
- id="drawer-collapsed-example-masthead-profile-button"
804
- aria-expanded="false"
91
+ class="pf-v5-c-menu-toggle pf-m-plain"
805
92
  type="button"
93
+ aria-expanded="false"
94
+ aria-label="Actions"
806
95
  >
807
- <span class="pf-v5-c-dropdown__toggle-image">
808
- <img
809
- class="pf-v5-c-avatar"
810
- alt="Avatar image"
811
- src="/assets/images/img_avatar-light.svg"
812
- />
813
- </span>
814
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
815
- <span class="pf-v5-c-dropdown__toggle-icon">
816
- <i class="fas fa-caret-down" aria-hidden="true"></i>
817
- </span>
96
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
818
97
  </button>
819
- <div class="pf-v5-c-dropdown__menu" hidden>
820
- <section class="pf-v5-c-dropdown__group">
821
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
822
- <div class="pf-v5-u-font-size-sm">Account number:</div>
823
- <div>123456789</div>
824
- </div>
825
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
826
- <div class="pf-v5-u-font-size-sm">Username:</div>
827
- <div>mshaksho@redhat.com</div>
828
- </div>
829
- </section>
830
- <hr class="pf-v5-c-divider" />
831
- <section class="pf-v5-c-dropdown__group">
832
- <ul>
833
- <li>
834
- <a
835
- class="pf-v5-c-dropdown__menu-item"
836
- href="#"
837
- >My profile</a>
838
- </li>
839
- <li>
840
- <a
841
- class="pf-v5-c-dropdown__menu-item"
842
- href="#"
843
- >User management</a>
844
- </li>
845
- <li>
846
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
847
- </li>
848
- </ul>
849
- </section>
850
- </div>
851
98
  </div>
852
99
  </div>
100
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
101
+ <button
102
+ class="pf-v5-c-menu-toggle pf-m-full-height"
103
+ type="button"
104
+ aria-expanded="false"
105
+ >
106
+ <span class="pf-v5-c-menu-toggle__icon">
107
+ <img
108
+ class="pf-v5-c-avatar"
109
+ alt="Avatar image"
110
+ src="/assets/images/img_avatar-light.svg"
111
+ />
112
+ </span>
113
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
114
+ <span class="pf-v5-c-menu-toggle__controls">
115
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
116
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
117
+ </span>
118
+ </span>
119
+ </button>
120
+ </div>
853
121
  </div>
854
122
  </div>
855
123
  </div>
@@ -1230,800 +498,68 @@ wrapperTag: div
1230
498
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1231
499
  >
1232
500
  <div class="pf-v5-c-toolbar__item">
1233
- <nav
1234
- class="pf-v5-c-app-launcher"
501
+ <button
502
+ class="pf-v5-c-menu-toggle pf-m-plain"
503
+ type="button"
504
+ aria-expanded="false"
1235
505
  aria-label="Application launcher"
1236
- id="drawer-expanded-example-masthead-application-launcher"
1237
506
  >
1238
- <button
1239
- class="pf-v5-c-app-launcher__toggle"
1240
- type="button"
1241
- id="drawer-expanded-example-masthead-application-launcher-button"
1242
- aria-expanded="false"
1243
- aria-label="Application launcher"
1244
- >
1245
- <i class="fas fa-th" aria-hidden="true"></i>
1246
- </button>
1247
- <div
1248
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
1249
- hidden
1250
- >
1251
- <div class="pf-v5-c-app-launcher__menu-search">
1252
- <div class="pf-v5-c-text-input-group">
1253
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1254
- <span class="pf-v5-c-text-input-group__text">
1255
- <span class="pf-v5-c-text-input-group__icon">
1256
- <i class="fas fa-fw fa-search"></i>
1257
- </span>
1258
- <input
1259
- class="pf-v5-c-text-input-group__text-input"
1260
- type="text"
1261
- placeholder="Filer by name"
1262
- value
1263
- aria-label="Search input"
1264
- />
1265
- </span>
1266
- </div>
1267
- </div>
1268
- </div>
1269
- <section class="pf-v5-c-app-launcher__group">
1270
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
1271
- <ul role="list">
1272
- <li
1273
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1274
- >
1275
- <a class="pf-v5-c-app-launcher__menu-item">
1276
- Link 1
1277
- <span
1278
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1279
- >
1280
- <i
1281
- class="fas fa-external-link-alt"
1282
- aria-hidden="true"
1283
- ></i>
1284
- </span>
1285
- <span
1286
- class="pf-v5-screen-reader"
1287
- >(opens new window)</span>
1288
- </a>
1289
- <button
1290
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1291
- type="button"
1292
- aria-label="Favorite"
1293
- >
1294
- <i class="fas fa-star" aria-hidden="true"></i>
1295
- </button>
1296
- </li>
1297
- <li
1298
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
1299
- >
1300
- <a class="pf-v5-c-app-launcher__menu-item">
1301
- Link 2
1302
- <span
1303
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1304
- >
1305
- <i
1306
- class="fas fa-external-link-alt"
1307
- aria-hidden="true"
1308
- ></i>
1309
- </span>
1310
- <span
1311
- class="pf-v5-screen-reader"
1312
- >(opens new window)</span>
1313
- </a>
1314
- <button
1315
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1316
- type="button"
1317
- aria-label="Favorite"
1318
- >
1319
- <i class="fas fa-star" aria-hidden="true"></i>
1320
- </button>
1321
- </li>
1322
- </ul>
1323
- </section>
1324
- <hr class="pf-v5-c-divider" />
1325
- <section class="pf-v5-c-app-launcher__group">
1326
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
1327
- <ul role="list">
1328
- <li
1329
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
1330
- >
1331
- <a class="pf-v5-c-app-launcher__menu-item">
1332
- Link 1
1333
- <span
1334
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1335
- >
1336
- <i
1337
- class="fas fa-external-link-alt"
1338
- aria-hidden="true"
1339
- ></i>
1340
- </span>
1341
- <span
1342
- class="pf-v5-screen-reader"
1343
- >(opens new window)</span>
1344
- </a>
1345
- <button
1346
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1347
- type="button"
1348
- aria-label="Favorite"
1349
- >
1350
- <i class="fas fa-star" aria-hidden="true"></i>
1351
- </button>
1352
- </li>
1353
- <li
1354
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
1355
- >
1356
- <a class="pf-v5-c-app-launcher__menu-item">
1357
- Link 2
1358
- <span
1359
- class="pf-v5-c-app-launcher__menu-item-external-icon"
1360
- >
1361
- <i
1362
- class="fas fa-external-link-alt"
1363
- aria-hidden="true"
1364
- ></i>
1365
- </span>
1366
- <span
1367
- class="pf-v5-screen-reader"
1368
- >(opens new window)</span>
1369
- </a>
1370
- <button
1371
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
1372
- type="button"
1373
- aria-label="Favorite"
1374
- >
1375
- <i class="fas fa-star" aria-hidden="true"></i>
1376
- </button>
1377
- </li>
1378
- </ul>
1379
- </section>
1380
- </div>
1381
- </nav>
507
+ <i class="fas fa-th" aria-hidden="true"></i>
508
+ </button>
1382
509
  </div>
1383
510
  <div class="pf-v5-c-toolbar__item">
1384
- <div class="pf-v5-c-dropdown">
1385
- <button
1386
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1387
- id="drawer-expanded-example-masthead-settings-button"
1388
- aria-expanded="false"
1389
- type="button"
1390
- aria-label="Settings"
1391
- >
1392
- <i class="fas fa-cog" aria-hidden="true"></i>
1393
- </button>
1394
- <ul
1395
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1396
- aria-labelledby="drawer-expanded-example-masthead-settings-button"
1397
- hidden
1398
- >
1399
- <li>
1400
- <button
1401
- class="pf-v5-c-dropdown__menu-item"
1402
- type="button"
1403
- >Settings</button>
1404
- </li>
1405
- <li>
1406
- <button
1407
- class="pf-v5-c-dropdown__menu-item"
1408
- type="button"
1409
- >Use the beta release</button>
1410
- </li>
1411
- </ul>
1412
- </div>
511
+ <button
512
+ class="pf-v5-c-menu-toggle pf-m-plain"
513
+ type="button"
514
+ aria-expanded="false"
515
+ aria-label="Settings"
516
+ >
517
+ <i class="fas fa-cog" aria-hidden="true"></i>
518
+ </button>
1413
519
  </div>
1414
520
  <div class="pf-v5-c-toolbar__item">
1415
- <div class="pf-v5-c-dropdown">
1416
- <button
1417
- class="pf-v5-c-dropdown__toggle pf-m-plain"
1418
- id="drawer-expanded-example-masthead-help-button"
1419
- aria-expanded="false"
1420
- type="button"
1421
- aria-label="Help"
1422
- >
1423
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1424
- </button>
1425
- <ul
1426
- class="pf-v5-c-dropdown__menu pf-m-align-right"
1427
- aria-labelledby="drawer-expanded-example-masthead-help-button"
1428
- hidden
1429
- >
1430
- <li>
1431
- <button
1432
- class="pf-v5-c-dropdown__menu-item"
1433
- type="button"
1434
- >Support options</button>
1435
- </li>
1436
- <li>
1437
- <button
1438
- class="pf-v5-c-dropdown__menu-item"
1439
- type="button"
1440
- >Open support case</button>
1441
- </li>
1442
- <li>
1443
- <button
1444
- class="pf-v5-c-dropdown__menu-item"
1445
- type="button"
1446
- >API documentation</button>
1447
- </li>
1448
- </ul>
1449
- </div>
1450
- </div>
1451
- </div>
1452
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1453
- <div class="pf-v5-c-dropdown">
1454
521
  <button
1455
522
  class="pf-v5-c-menu-toggle pf-m-plain"
1456
523
  type="button"
1457
524
  aria-expanded="false"
1458
- aria-label="Actions"
525
+ aria-label="Help"
1459
526
  >
1460
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
527
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1461
528
  </button>
1462
- <div
1463
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
1464
- hidden
1465
- >
1466
- <div class="pf-v5-c-menu__content">
1467
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
1468
- <ul class="pf-v5-c-menu__list" role="menu">
1469
- <li
1470
- class="pf-v5-c-menu__list-item pf-m-disabled"
1471
- role="none"
1472
- >
1473
- <button
1474
- class="pf-v5-c-menu__item"
1475
- type="button"
1476
- disabled
1477
- role="menuitem"
1478
- >
1479
- <span class="pf-v5-c-menu__item-description">
1480
- <div class="pf-v5-u-font-size-sm">Username:</div>
1481
- <div class="pf-v5-u-font-size-md">ned_username</div>
1482
- </span>
1483
- </button>
1484
- </li>
1485
- <li
1486
- class="pf-v5-c-menu__list-item pf-m-disabled"
1487
- role="none"
1488
- >
1489
- <button
1490
- class="pf-v5-c-menu__item"
1491
- type="button"
1492
- disabled
1493
- role="menuitem"
1494
- >
1495
- <span class="pf-v5-c-menu__item-description">
1496
- <div
1497
- class="pf-v5-u-font-size-sm"
1498
- >Account number:</div>
1499
- <div class="pf-v5-u-font-size-md">123456789</div>
1500
- </span>
1501
- </button>
1502
- </li>
1503
- <li class="pf-v5-c-divider" role="separator"></li>
1504
- <li class="pf-v5-c-menu__list-item" role="none">
1505
- <button
1506
- class="pf-v5-c-menu__item"
1507
- type="button"
1508
- role="menuitem"
1509
- >
1510
- <span class="pf-v5-c-menu__item-main">
1511
- <span class="pf-v5-c-menu__item-text">My profile</span>
1512
- </span>
1513
- </button>
1514
- </li>
1515
- <li class="pf-v5-c-menu__list-item" role="none">
1516
- <button
1517
- class="pf-v5-c-menu__item"
1518
- type="button"
1519
- role="menuitem"
1520
- >
1521
- <span class="pf-v5-c-menu__item-main">
1522
- <span
1523
- class="pf-v5-c-menu__item-text"
1524
- >User management</span>
1525
- </span>
1526
- </button>
1527
- </li>
1528
- <li class="pf-v5-c-menu__list-item" role="none">
1529
- <button
1530
- class="pf-v5-c-menu__item"
1531
- type="button"
1532
- role="menuitem"
1533
- >
1534
- <span class="pf-v5-c-menu__item-main">
1535
- <span class="pf-v5-c-menu__item-text">Logout</span>
1536
- </span>
1537
- </button>
1538
- </li>
1539
- </ul>
1540
- </section>
1541
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
1542
- <section class="pf-v5-c-menu__group">
1543
- <ul class="pf-v5-c-menu__list" role="menu">
1544
- <li class="pf-v5-c-menu__list-item" role="none">
1545
- <button
1546
- class="pf-v5-c-menu__item"
1547
- type="button"
1548
- role="menuitem"
1549
- aria-expanded="false"
1550
- >
1551
- <span class="pf-v5-c-menu__item-main">
1552
- <span class="pf-v5-c-menu__item-icon">
1553
- <i
1554
- class="fas fa-fw fa-cog"
1555
- aria-hidden="true"
1556
- ></i>
1557
- </span>
1558
- <span class="pf-v5-c-menu__item-text">Settings</span>
1559
- <span class="pf-v5-c-menu__item-toggle-icon">
1560
- <i class="fas fa-angle-right"></i>
1561
- </span>
1562
- </span>
1563
- </button>
1564
- <div class="pf-v5-c-menu" hidden>
1565
- <div class="pf-v5-c-menu__content">
1566
- <ul class="pf-v5-c-menu__list" role="menu">
1567
- <li
1568
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1569
- role="none"
1570
- >
1571
- <button
1572
- class="pf-v5-c-menu__item"
1573
- type="button"
1574
- role="menuitem"
1575
- >
1576
- <span class="pf-v5-c-menu__item-main">
1577
- <span
1578
- class="pf-v5-c-menu__item-toggle-icon"
1579
- >
1580
- <i class="fas fa-angle-left"></i>
1581
- </span>
1582
- <span class="pf-v5-c-menu__item-icon">
1583
- <i
1584
- class="fas fa-fw fa-cog"
1585
- aria-hidden="true"
1586
- ></i>
1587
- </span>
1588
- <span
1589
- class="pf-v5-c-menu__item-text"
1590
- >Settings</span>
1591
- </span>
1592
- </button>
1593
- </li>
1594
- <li class="pf-v5-c-divider" role="separator"></li>
1595
- <li
1596
- class="pf-v5-c-menu__list-item"
1597
- role="none"
1598
- >
1599
- <a
1600
- class="pf-v5-c-menu__item"
1601
- href="#"
1602
- role="menuitem"
1603
- >
1604
- <span class="pf-v5-c-menu__item-main">
1605
- <span
1606
- class="pf-v5-c-menu__item-text"
1607
- >Customer support</span>
1608
- </span>
1609
- </a>
1610
- </li>
1611
- <li
1612
- class="pf-v5-c-menu__list-item"
1613
- role="none"
1614
- >
1615
- <a
1616
- class="pf-v5-c-menu__item"
1617
- href="#"
1618
- role="menuitem"
1619
- >
1620
- <span class="pf-v5-c-menu__item-main">
1621
- <span
1622
- class="pf-v5-c-menu__item-text"
1623
- >About</span>
1624
- </span>
1625
- </a>
1626
- </li>
1627
- </ul>
1628
- </div>
1629
- </div>
1630
- </li>
1631
-
1632
- <li class="pf-v5-c-menu__list-item" role="none">
1633
- <button
1634
- class="pf-v5-c-menu__item"
1635
- type="button"
1636
- role="menuitem"
1637
- aria-expanded="false"
1638
- >
1639
- <span class="pf-v5-c-menu__item-main">
1640
- <span class="pf-v5-c-menu__item-icon">
1641
- <i
1642
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
1643
- aria-hidden="true"
1644
- ></i>
1645
- </span>
1646
- <span class="pf-v5-c-menu__item-text">Help</span>
1647
- <span class="pf-v5-c-menu__item-toggle-icon">
1648
- <i class="fas fa-angle-right"></i>
1649
- </span>
1650
- </span>
1651
- </button>
1652
- <div class="pf-v5-c-menu" hidden>
1653
- <div class="pf-v5-c-menu__content">
1654
- <ul class="pf-v5-c-menu__list" role="menu">
1655
- <li
1656
- class="pf-v5-c-menu__list-item pf-m-drill-up"
1657
- role="none"
1658
- >
1659
- <button
1660
- class="pf-v5-c-menu__item"
1661
- type="button"
1662
- role="menuitem"
1663
- >
1664
- <span class="pf-v5-c-menu__item-main">
1665
- <span
1666
- class="pf-v5-c-menu__item-toggle-icon"
1667
- >
1668
- <i class="fas fa-angle-left"></i>
1669
- </span>
1670
- <span class="pf-v5-c-menu__item-icon">
1671
- <i
1672
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
1673
- aria-hidden="true"
1674
- ></i>
1675
- </span>
1676
- <span
1677
- class="pf-v5-c-menu__item-text"
1678
- >Help</span>
1679
- </span>
1680
- </button>
1681
- </li>
1682
- <li class="pf-v5-c-divider" role="separator"></li>
1683
- <li
1684
- class="pf-v5-c-menu__list-item"
1685
- role="none"
1686
- >
1687
- <a
1688
- class="pf-v5-c-menu__item"
1689
- href="#"
1690
- role="menuitem"
1691
- >
1692
- <span class="pf-v5-c-menu__item-main">
1693
- <span
1694
- class="pf-v5-c-menu__item-text"
1695
- >Support options</span>
1696
- </span>
1697
- </a>
1698
- </li>
1699
- <li
1700
- class="pf-v5-c-menu__list-item"
1701
- role="none"
1702
- >
1703
- <a
1704
- class="pf-v5-c-menu__item"
1705
- href="#"
1706
- role="menuitem"
1707
- >
1708
- <span class="pf-v5-c-menu__item-main">
1709
- <span
1710
- class="pf-v5-c-menu__item-text"
1711
- >Open support case</span>
1712
- </span>
1713
- </a>
1714
- </li>
1715
- <li
1716
- class="pf-v5-c-menu__list-item"
1717
- role="none"
1718
- >
1719
- <a
1720
- class="pf-v5-c-menu__item"
1721
- href="#"
1722
- role="menuitem"
1723
- >
1724
- <span class="pf-v5-c-menu__item-main">
1725
- <span
1726
- class="pf-v5-c-menu__item-text"
1727
- >API documentation</span>
1728
- </span>
1729
- </a>
1730
- </li>
1731
- </ul>
1732
- </div>
1733
- </div>
1734
- </li>
1735
-
1736
- <li class="pf-v5-c-menu__list-item" role="none">
1737
- <button
1738
- class="pf-v5-c-menu__item"
1739
- type="button"
1740
- role="menuitem"
1741
- >
1742
- <span class="pf-v5-c-menu__item-main">
1743
- <span class="pf-v5-c-menu__item-icon">
1744
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
1745
- </span>
1746
- <span
1747
- class="pf-v5-c-menu__item-text"
1748
- >Application launcher</span>
1749
- <span class="pf-v5-c-menu__item-toggle-icon">
1750
- <i class="fas fa-angle-right"></i>
1751
- </span>
1752
- </span>
1753
- </button>
1754
- <div class="pf-v5-c-menu" hidden>
1755
- <div class="pf-v5-c-menu__header">
1756
- <button
1757
- class="pf-v5-c-menu__item"
1758
- type="button"
1759
- role="menuitem"
1760
- >
1761
- <span class="pf-v5-c-menu__item-main">
1762
- <span
1763
- class="pf-v5-c-menu__item-toggle-icon"
1764
- >
1765
- <i class="fas fa-angle-left"></i>
1766
- </span>
1767
- <span class="pf-v5-c-menu__item-icon">
1768
- <i
1769
- class="fas fa-fw fa-th"
1770
- aria-hidden="true"
1771
- ></i>
1772
- </span>
1773
- <span
1774
- class="pf-v5-c-menu__item-text"
1775
- >Application launcher</span>
1776
- </span>
1777
- </button>
1778
- </div>
1779
- <div class="pf-v5-c-menu__search">
1780
- <div class="pf-v5-c-menu__search-input">
1781
- <div class="pf-v5-c-text-input-group">
1782
- <div
1783
- class="pf-v5-c-text-input-group__main pf-m-icon"
1784
- >
1785
- <span
1786
- class="pf-v5-c-text-input-group__text"
1787
- >
1788
- <span
1789
- class="pf-v5-c-text-input-group__icon"
1790
- >
1791
- <i class="fas fa-fw fa-search"></i>
1792
- </span>
1793
- <input
1794
- class="pf-v5-c-text-input-group__text-input"
1795
- type="text"
1796
- placeholder="Search"
1797
- value
1798
- aria-label="Search input"
1799
- />
1800
- </span>
1801
- </div>
1802
- </div>
1803
- </div>
1804
- </div>
1805
- <hr class="pf-v5-c-divider" />
1806
- <section class="pf-v5-c-menu__group">
1807
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
1808
- <ul class="pf-v5-c-menu__list" role="menu">
1809
- <li
1810
- class="pf-v5-c-menu__list-item"
1811
- role="none"
1812
- >
1813
- <a
1814
- class="pf-v5-c-menu__item"
1815
- href="#"
1816
- role="menuitem"
1817
- >
1818
- <span class="pf-v5-c-menu__item-main">
1819
- <span
1820
- class="pf-v5-c-menu__item-text"
1821
- >Link 1</span>
1822
- </span>
1823
- </a>
1824
- <button
1825
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
1826
- type="button"
1827
- aria-label="Starred"
1828
- >
1829
- <span
1830
- class="pf-v5-c-menu__item-action-icon"
1831
- >
1832
- <i
1833
- class="fas fa-star"
1834
- aria-hidden="true"
1835
- ></i>
1836
- </span>
1837
- </button>
1838
- </li>
1839
- <li
1840
- class="pf-v5-c-menu__list-item"
1841
- role="none"
1842
- >
1843
- <a
1844
- class="pf-v5-c-menu__item"
1845
- href="#"
1846
- role="menuitem"
1847
- target="_blank"
1848
- >
1849
- <span class="pf-v5-c-menu__item-main">
1850
- <span
1851
- class="pf-v5-c-menu__item-text"
1852
- >Link 2</span>
1853
- <span
1854
- class="pf-v5-c-menu__item-external-icon"
1855
- >
1856
- <i
1857
- class="fas fa-external-link-alt"
1858
- aria-hidden="true"
1859
- ></i>
1860
- </span>
1861
- <span
1862
- class="pf-v5-screen-reader"
1863
- >(opens new window)</span>
1864
- </span>
1865
- </a>
1866
- <button
1867
- class="pf-v5-c-menu__item-action pf-m-favorite"
1868
- type="button"
1869
- aria-label="Not starred"
1870
- >
1871
- <span
1872
- class="pf-v5-c-menu__item-action-icon"
1873
- >
1874
- <i
1875
- class="fas fa-star"
1876
- aria-hidden="true"
1877
- ></i>
1878
- </span>
1879
- </button>
1880
- </li>
1881
- </ul>
1882
- </section>
1883
- <hr class="pf-v5-c-divider" />
1884
- <section class="pf-v5-c-menu__group">
1885
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
1886
- <ul class="pf-v5-c-menu__list" role="menu">
1887
- <li
1888
- class="pf-v5-c-menu__list-item"
1889
- role="none"
1890
- >
1891
- <a
1892
- class="pf-v5-c-menu__item"
1893
- href="#"
1894
- role="menuitem"
1895
- >
1896
- <span class="pf-v5-c-menu__item-main">
1897
- <span
1898
- class="pf-v5-c-menu__item-text"
1899
- >Link 1</span>
1900
- </span>
1901
- </a>
1902
- <button
1903
- class="pf-v5-c-menu__item-action pf-m-favorite"
1904
- type="button"
1905
- aria-label="Not starred"
1906
- >
1907
- <span
1908
- class="pf-v5-c-menu__item-action-icon"
1909
- >
1910
- <i
1911
- class="fas fa-star"
1912
- aria-hidden="true"
1913
- ></i>
1914
- </span>
1915
- </button>
1916
- </li>
1917
- <li
1918
- class="pf-v5-c-menu__list-item"
1919
- role="none"
1920
- >
1921
- <a
1922
- class="pf-v5-c-menu__item"
1923
- href="#"
1924
- role="menuitem"
1925
- target="_blank"
1926
- >
1927
- <span class="pf-v5-c-menu__item-main">
1928
- <span
1929
- class="pf-v5-c-menu__item-text"
1930
- >Link 2</span>
1931
- <span
1932
- class="pf-v5-c-menu__item-external-icon"
1933
- >
1934
- <i
1935
- class="fas fa-external-link-alt"
1936
- aria-hidden="true"
1937
- ></i>
1938
- </span>
1939
- <span
1940
- class="pf-v5-screen-reader"
1941
- >(opens new window)</span>
1942
- </span>
1943
- </a>
1944
- <button
1945
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
1946
- type="button"
1947
- aria-label="Starred"
1948
- >
1949
- <span
1950
- class="pf-v5-c-menu__item-action-icon"
1951
- >
1952
- <i
1953
- class="fas fa-star"
1954
- aria-hidden="true"
1955
- ></i>
1956
- </span>
1957
- </button>
1958
- </li>
1959
- </ul>
1960
- </section>
1961
- </div>
1962
- </li>
1963
- </ul>
1964
- </section>
1965
- </div>
1966
- </div>
1967
529
  </div>
1968
530
  </div>
1969
- </div>
1970
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1971
- <div
1972
- class="pf-v5-c-dropdown pf-m-full-height"
1973
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
1974
- >
531
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1975
532
  <button
1976
- class="pf-v5-c-dropdown__toggle"
1977
- id="drawer-expanded-example-masthead-profile-button"
1978
- aria-expanded="false"
533
+ class="pf-v5-c-menu-toggle pf-m-plain"
1979
534
  type="button"
535
+ aria-expanded="false"
536
+ aria-label="Actions"
1980
537
  >
1981
- <span class="pf-v5-c-dropdown__toggle-image">
1982
- <img
1983
- class="pf-v5-c-avatar"
1984
- alt="Avatar image"
1985
- src="/assets/images/img_avatar-light.svg"
1986
- />
1987
- </span>
1988
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
1989
- <span class="pf-v5-c-dropdown__toggle-icon">
1990
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1991
- </span>
538
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1992
539
  </button>
1993
- <div class="pf-v5-c-dropdown__menu" hidden>
1994
- <section class="pf-v5-c-dropdown__group">
1995
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
1996
- <div class="pf-v5-u-font-size-sm">Account number:</div>
1997
- <div>123456789</div>
1998
- </div>
1999
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
2000
- <div class="pf-v5-u-font-size-sm">Username:</div>
2001
- <div>mshaksho@redhat.com</div>
2002
- </div>
2003
- </section>
2004
- <hr class="pf-v5-c-divider" />
2005
- <section class="pf-v5-c-dropdown__group">
2006
- <ul>
2007
- <li>
2008
- <a
2009
- class="pf-v5-c-dropdown__menu-item"
2010
- href="#"
2011
- >My profile</a>
2012
- </li>
2013
- <li>
2014
- <a
2015
- class="pf-v5-c-dropdown__menu-item"
2016
- href="#"
2017
- >User management</a>
2018
- </li>
2019
- <li>
2020
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
2021
- </li>
2022
- </ul>
2023
- </section>
2024
- </div>
2025
540
  </div>
2026
541
  </div>
542
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
543
+ <button
544
+ class="pf-v5-c-menu-toggle pf-m-full-height"
545
+ type="button"
546
+ aria-expanded="false"
547
+ >
548
+ <span class="pf-v5-c-menu-toggle__icon">
549
+ <img
550
+ class="pf-v5-c-avatar"
551
+ alt="Avatar image"
552
+ src="/assets/images/img_avatar-light.svg"
553
+ />
554
+ </span>
555
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
556
+ <span class="pf-v5-c-menu-toggle__controls">
557
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
558
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
559
+ </span>
560
+ </span>
561
+ </button>
562
+ </div>
2027
563
  </div>
2028
564
  </div>
2029
565
  </div>
@@ -2226,800 +762,68 @@ wrapperTag: div
2226
762
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2227
763
  >
2228
764
  <div class="pf-v5-c-toolbar__item">
2229
- <nav
2230
- class="pf-v5-c-app-launcher"
765
+ <button
766
+ class="pf-v5-c-menu-toggle pf-m-plain"
767
+ type="button"
768
+ aria-expanded="false"
2231
769
  aria-label="Application launcher"
2232
- id="drawer-expanded-bottom-example-masthead-application-launcher"
2233
770
  >
2234
- <button
2235
- class="pf-v5-c-app-launcher__toggle"
2236
- type="button"
2237
- id="drawer-expanded-bottom-example-masthead-application-launcher-button"
2238
- aria-expanded="false"
2239
- aria-label="Application launcher"
2240
- >
2241
- <i class="fas fa-th" aria-hidden="true"></i>
2242
- </button>
2243
- <div
2244
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
2245
- hidden
2246
- >
2247
- <div class="pf-v5-c-app-launcher__menu-search">
2248
- <div class="pf-v5-c-text-input-group">
2249
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
2250
- <span class="pf-v5-c-text-input-group__text">
2251
- <span class="pf-v5-c-text-input-group__icon">
2252
- <i class="fas fa-fw fa-search"></i>
2253
- </span>
2254
- <input
2255
- class="pf-v5-c-text-input-group__text-input"
2256
- type="text"
2257
- placeholder="Filer by name"
2258
- value
2259
- aria-label="Search input"
2260
- />
2261
- </span>
2262
- </div>
2263
- </div>
2264
- </div>
2265
- <section class="pf-v5-c-app-launcher__group">
2266
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
2267
- <ul role="list">
2268
- <li
2269
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2270
- >
2271
- <a class="pf-v5-c-app-launcher__menu-item">
2272
- Link 1
2273
- <span
2274
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2275
- >
2276
- <i
2277
- class="fas fa-external-link-alt"
2278
- aria-hidden="true"
2279
- ></i>
2280
- </span>
2281
- <span
2282
- class="pf-v5-screen-reader"
2283
- >(opens new window)</span>
2284
- </a>
2285
- <button
2286
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2287
- type="button"
2288
- aria-label="Favorite"
2289
- >
2290
- <i class="fas fa-star" aria-hidden="true"></i>
2291
- </button>
2292
- </li>
2293
- <li
2294
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
2295
- >
2296
- <a class="pf-v5-c-app-launcher__menu-item">
2297
- Link 2
2298
- <span
2299
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2300
- >
2301
- <i
2302
- class="fas fa-external-link-alt"
2303
- aria-hidden="true"
2304
- ></i>
2305
- </span>
2306
- <span
2307
- class="pf-v5-screen-reader"
2308
- >(opens new window)</span>
2309
- </a>
2310
- <button
2311
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2312
- type="button"
2313
- aria-label="Favorite"
2314
- >
2315
- <i class="fas fa-star" aria-hidden="true"></i>
2316
- </button>
2317
- </li>
2318
- </ul>
2319
- </section>
2320
- <hr class="pf-v5-c-divider" />
2321
- <section class="pf-v5-c-app-launcher__group">
2322
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
2323
- <ul role="list">
2324
- <li
2325
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
2326
- >
2327
- <a class="pf-v5-c-app-launcher__menu-item">
2328
- Link 1
2329
- <span
2330
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2331
- >
2332
- <i
2333
- class="fas fa-external-link-alt"
2334
- aria-hidden="true"
2335
- ></i>
2336
- </span>
2337
- <span
2338
- class="pf-v5-screen-reader"
2339
- >(opens new window)</span>
2340
- </a>
2341
- <button
2342
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2343
- type="button"
2344
- aria-label="Favorite"
2345
- >
2346
- <i class="fas fa-star" aria-hidden="true"></i>
2347
- </button>
2348
- </li>
2349
- <li
2350
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
2351
- >
2352
- <a class="pf-v5-c-app-launcher__menu-item">
2353
- Link 2
2354
- <span
2355
- class="pf-v5-c-app-launcher__menu-item-external-icon"
2356
- >
2357
- <i
2358
- class="fas fa-external-link-alt"
2359
- aria-hidden="true"
2360
- ></i>
2361
- </span>
2362
- <span
2363
- class="pf-v5-screen-reader"
2364
- >(opens new window)</span>
2365
- </a>
2366
- <button
2367
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
2368
- type="button"
2369
- aria-label="Favorite"
2370
- >
2371
- <i class="fas fa-star" aria-hidden="true"></i>
2372
- </button>
2373
- </li>
2374
- </ul>
2375
- </section>
2376
- </div>
2377
- </nav>
771
+ <i class="fas fa-th" aria-hidden="true"></i>
772
+ </button>
2378
773
  </div>
2379
774
  <div class="pf-v5-c-toolbar__item">
2380
- <div class="pf-v5-c-dropdown">
2381
- <button
2382
- class="pf-v5-c-dropdown__toggle pf-m-plain"
2383
- id="drawer-expanded-bottom-example-masthead-settings-button"
2384
- aria-expanded="false"
2385
- type="button"
2386
- aria-label="Settings"
2387
- >
2388
- <i class="fas fa-cog" aria-hidden="true"></i>
2389
- </button>
2390
- <ul
2391
- class="pf-v5-c-dropdown__menu pf-m-align-right"
2392
- aria-labelledby="drawer-expanded-bottom-example-masthead-settings-button"
2393
- hidden
2394
- >
2395
- <li>
2396
- <button
2397
- class="pf-v5-c-dropdown__menu-item"
2398
- type="button"
2399
- >Settings</button>
2400
- </li>
2401
- <li>
2402
- <button
2403
- class="pf-v5-c-dropdown__menu-item"
2404
- type="button"
2405
- >Use the beta release</button>
2406
- </li>
2407
- </ul>
2408
- </div>
775
+ <button
776
+ class="pf-v5-c-menu-toggle pf-m-plain"
777
+ type="button"
778
+ aria-expanded="false"
779
+ aria-label="Settings"
780
+ >
781
+ <i class="fas fa-cog" aria-hidden="true"></i>
782
+ </button>
2409
783
  </div>
2410
784
  <div class="pf-v5-c-toolbar__item">
2411
- <div class="pf-v5-c-dropdown">
2412
- <button
2413
- class="pf-v5-c-dropdown__toggle pf-m-plain"
2414
- id="drawer-expanded-bottom-example-masthead-help-button"
2415
- aria-expanded="false"
2416
- type="button"
2417
- aria-label="Help"
2418
- >
2419
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2420
- </button>
2421
- <ul
2422
- class="pf-v5-c-dropdown__menu pf-m-align-right"
2423
- aria-labelledby="drawer-expanded-bottom-example-masthead-help-button"
2424
- hidden
2425
- >
2426
- <li>
2427
- <button
2428
- class="pf-v5-c-dropdown__menu-item"
2429
- type="button"
2430
- >Support options</button>
2431
- </li>
2432
- <li>
2433
- <button
2434
- class="pf-v5-c-dropdown__menu-item"
2435
- type="button"
2436
- >Open support case</button>
2437
- </li>
2438
- <li>
2439
- <button
2440
- class="pf-v5-c-dropdown__menu-item"
2441
- type="button"
2442
- >API documentation</button>
2443
- </li>
2444
- </ul>
2445
- </div>
2446
- </div>
2447
- </div>
2448
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2449
- <div class="pf-v5-c-dropdown">
2450
785
  <button
2451
786
  class="pf-v5-c-menu-toggle pf-m-plain"
2452
787
  type="button"
2453
788
  aria-expanded="false"
2454
- aria-label="Actions"
789
+ aria-label="Help"
2455
790
  >
2456
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
791
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2457
792
  </button>
2458
- <div
2459
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
2460
- hidden
2461
- >
2462
- <div class="pf-v5-c-menu__content">
2463
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
2464
- <ul class="pf-v5-c-menu__list" role="menu">
2465
- <li
2466
- class="pf-v5-c-menu__list-item pf-m-disabled"
2467
- role="none"
2468
- >
2469
- <button
2470
- class="pf-v5-c-menu__item"
2471
- type="button"
2472
- disabled
2473
- role="menuitem"
2474
- >
2475
- <span class="pf-v5-c-menu__item-description">
2476
- <div class="pf-v5-u-font-size-sm">Username:</div>
2477
- <div class="pf-v5-u-font-size-md">ned_username</div>
2478
- </span>
2479
- </button>
2480
- </li>
2481
- <li
2482
- class="pf-v5-c-menu__list-item pf-m-disabled"
2483
- role="none"
2484
- >
2485
- <button
2486
- class="pf-v5-c-menu__item"
2487
- type="button"
2488
- disabled
2489
- role="menuitem"
2490
- >
2491
- <span class="pf-v5-c-menu__item-description">
2492
- <div
2493
- class="pf-v5-u-font-size-sm"
2494
- >Account number:</div>
2495
- <div class="pf-v5-u-font-size-md">123456789</div>
2496
- </span>
2497
- </button>
2498
- </li>
2499
- <li class="pf-v5-c-divider" role="separator"></li>
2500
- <li class="pf-v5-c-menu__list-item" role="none">
2501
- <button
2502
- class="pf-v5-c-menu__item"
2503
- type="button"
2504
- role="menuitem"
2505
- >
2506
- <span class="pf-v5-c-menu__item-main">
2507
- <span class="pf-v5-c-menu__item-text">My profile</span>
2508
- </span>
2509
- </button>
2510
- </li>
2511
- <li class="pf-v5-c-menu__list-item" role="none">
2512
- <button
2513
- class="pf-v5-c-menu__item"
2514
- type="button"
2515
- role="menuitem"
2516
- >
2517
- <span class="pf-v5-c-menu__item-main">
2518
- <span
2519
- class="pf-v5-c-menu__item-text"
2520
- >User management</span>
2521
- </span>
2522
- </button>
2523
- </li>
2524
- <li class="pf-v5-c-menu__list-item" role="none">
2525
- <button
2526
- class="pf-v5-c-menu__item"
2527
- type="button"
2528
- role="menuitem"
2529
- >
2530
- <span class="pf-v5-c-menu__item-main">
2531
- <span class="pf-v5-c-menu__item-text">Logout</span>
2532
- </span>
2533
- </button>
2534
- </li>
2535
- </ul>
2536
- </section>
2537
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
2538
- <section class="pf-v5-c-menu__group">
2539
- <ul class="pf-v5-c-menu__list" role="menu">
2540
- <li class="pf-v5-c-menu__list-item" role="none">
2541
- <button
2542
- class="pf-v5-c-menu__item"
2543
- type="button"
2544
- role="menuitem"
2545
- aria-expanded="false"
2546
- >
2547
- <span class="pf-v5-c-menu__item-main">
2548
- <span class="pf-v5-c-menu__item-icon">
2549
- <i
2550
- class="fas fa-fw fa-cog"
2551
- aria-hidden="true"
2552
- ></i>
2553
- </span>
2554
- <span class="pf-v5-c-menu__item-text">Settings</span>
2555
- <span class="pf-v5-c-menu__item-toggle-icon">
2556
- <i class="fas fa-angle-right"></i>
2557
- </span>
2558
- </span>
2559
- </button>
2560
- <div class="pf-v5-c-menu" hidden>
2561
- <div class="pf-v5-c-menu__content">
2562
- <ul class="pf-v5-c-menu__list" role="menu">
2563
- <li
2564
- class="pf-v5-c-menu__list-item pf-m-drill-up"
2565
- role="none"
2566
- >
2567
- <button
2568
- class="pf-v5-c-menu__item"
2569
- type="button"
2570
- role="menuitem"
2571
- >
2572
- <span class="pf-v5-c-menu__item-main">
2573
- <span
2574
- class="pf-v5-c-menu__item-toggle-icon"
2575
- >
2576
- <i class="fas fa-angle-left"></i>
2577
- </span>
2578
- <span class="pf-v5-c-menu__item-icon">
2579
- <i
2580
- class="fas fa-fw fa-cog"
2581
- aria-hidden="true"
2582
- ></i>
2583
- </span>
2584
- <span
2585
- class="pf-v5-c-menu__item-text"
2586
- >Settings</span>
2587
- </span>
2588
- </button>
2589
- </li>
2590
- <li class="pf-v5-c-divider" role="separator"></li>
2591
- <li
2592
- class="pf-v5-c-menu__list-item"
2593
- role="none"
2594
- >
2595
- <a
2596
- class="pf-v5-c-menu__item"
2597
- href="#"
2598
- role="menuitem"
2599
- >
2600
- <span class="pf-v5-c-menu__item-main">
2601
- <span
2602
- class="pf-v5-c-menu__item-text"
2603
- >Customer support</span>
2604
- </span>
2605
- </a>
2606
- </li>
2607
- <li
2608
- class="pf-v5-c-menu__list-item"
2609
- role="none"
2610
- >
2611
- <a
2612
- class="pf-v5-c-menu__item"
2613
- href="#"
2614
- role="menuitem"
2615
- >
2616
- <span class="pf-v5-c-menu__item-main">
2617
- <span
2618
- class="pf-v5-c-menu__item-text"
2619
- >About</span>
2620
- </span>
2621
- </a>
2622
- </li>
2623
- </ul>
2624
- </div>
2625
- </div>
2626
- </li>
2627
-
2628
- <li class="pf-v5-c-menu__list-item" role="none">
2629
- <button
2630
- class="pf-v5-c-menu__item"
2631
- type="button"
2632
- role="menuitem"
2633
- aria-expanded="false"
2634
- >
2635
- <span class="pf-v5-c-menu__item-main">
2636
- <span class="pf-v5-c-menu__item-icon">
2637
- <i
2638
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
2639
- aria-hidden="true"
2640
- ></i>
2641
- </span>
2642
- <span class="pf-v5-c-menu__item-text">Help</span>
2643
- <span class="pf-v5-c-menu__item-toggle-icon">
2644
- <i class="fas fa-angle-right"></i>
2645
- </span>
2646
- </span>
2647
- </button>
2648
- <div class="pf-v5-c-menu" hidden>
2649
- <div class="pf-v5-c-menu__content">
2650
- <ul class="pf-v5-c-menu__list" role="menu">
2651
- <li
2652
- class="pf-v5-c-menu__list-item pf-m-drill-up"
2653
- role="none"
2654
- >
2655
- <button
2656
- class="pf-v5-c-menu__item"
2657
- type="button"
2658
- role="menuitem"
2659
- >
2660
- <span class="pf-v5-c-menu__item-main">
2661
- <span
2662
- class="pf-v5-c-menu__item-toggle-icon"
2663
- >
2664
- <i class="fas fa-angle-left"></i>
2665
- </span>
2666
- <span class="pf-v5-c-menu__item-icon">
2667
- <i
2668
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
2669
- aria-hidden="true"
2670
- ></i>
2671
- </span>
2672
- <span
2673
- class="pf-v5-c-menu__item-text"
2674
- >Help</span>
2675
- </span>
2676
- </button>
2677
- </li>
2678
- <li class="pf-v5-c-divider" role="separator"></li>
2679
- <li
2680
- class="pf-v5-c-menu__list-item"
2681
- role="none"
2682
- >
2683
- <a
2684
- class="pf-v5-c-menu__item"
2685
- href="#"
2686
- role="menuitem"
2687
- >
2688
- <span class="pf-v5-c-menu__item-main">
2689
- <span
2690
- class="pf-v5-c-menu__item-text"
2691
- >Support options</span>
2692
- </span>
2693
- </a>
2694
- </li>
2695
- <li
2696
- class="pf-v5-c-menu__list-item"
2697
- role="none"
2698
- >
2699
- <a
2700
- class="pf-v5-c-menu__item"
2701
- href="#"
2702
- role="menuitem"
2703
- >
2704
- <span class="pf-v5-c-menu__item-main">
2705
- <span
2706
- class="pf-v5-c-menu__item-text"
2707
- >Open support case</span>
2708
- </span>
2709
- </a>
2710
- </li>
2711
- <li
2712
- class="pf-v5-c-menu__list-item"
2713
- role="none"
2714
- >
2715
- <a
2716
- class="pf-v5-c-menu__item"
2717
- href="#"
2718
- role="menuitem"
2719
- >
2720
- <span class="pf-v5-c-menu__item-main">
2721
- <span
2722
- class="pf-v5-c-menu__item-text"
2723
- >API documentation</span>
2724
- </span>
2725
- </a>
2726
- </li>
2727
- </ul>
2728
- </div>
2729
- </div>
2730
- </li>
2731
-
2732
- <li class="pf-v5-c-menu__list-item" role="none">
2733
- <button
2734
- class="pf-v5-c-menu__item"
2735
- type="button"
2736
- role="menuitem"
2737
- >
2738
- <span class="pf-v5-c-menu__item-main">
2739
- <span class="pf-v5-c-menu__item-icon">
2740
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
2741
- </span>
2742
- <span
2743
- class="pf-v5-c-menu__item-text"
2744
- >Application launcher</span>
2745
- <span class="pf-v5-c-menu__item-toggle-icon">
2746
- <i class="fas fa-angle-right"></i>
2747
- </span>
2748
- </span>
2749
- </button>
2750
- <div class="pf-v5-c-menu" hidden>
2751
- <div class="pf-v5-c-menu__header">
2752
- <button
2753
- class="pf-v5-c-menu__item"
2754
- type="button"
2755
- role="menuitem"
2756
- >
2757
- <span class="pf-v5-c-menu__item-main">
2758
- <span
2759
- class="pf-v5-c-menu__item-toggle-icon"
2760
- >
2761
- <i class="fas fa-angle-left"></i>
2762
- </span>
2763
- <span class="pf-v5-c-menu__item-icon">
2764
- <i
2765
- class="fas fa-fw fa-th"
2766
- aria-hidden="true"
2767
- ></i>
2768
- </span>
2769
- <span
2770
- class="pf-v5-c-menu__item-text"
2771
- >Application launcher</span>
2772
- </span>
2773
- </button>
2774
- </div>
2775
- <div class="pf-v5-c-menu__search">
2776
- <div class="pf-v5-c-menu__search-input">
2777
- <div class="pf-v5-c-text-input-group">
2778
- <div
2779
- class="pf-v5-c-text-input-group__main pf-m-icon"
2780
- >
2781
- <span
2782
- class="pf-v5-c-text-input-group__text"
2783
- >
2784
- <span
2785
- class="pf-v5-c-text-input-group__icon"
2786
- >
2787
- <i class="fas fa-fw fa-search"></i>
2788
- </span>
2789
- <input
2790
- class="pf-v5-c-text-input-group__text-input"
2791
- type="text"
2792
- placeholder="Search"
2793
- value
2794
- aria-label="Search input"
2795
- />
2796
- </span>
2797
- </div>
2798
- </div>
2799
- </div>
2800
- </div>
2801
- <hr class="pf-v5-c-divider" />
2802
- <section class="pf-v5-c-menu__group">
2803
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
2804
- <ul class="pf-v5-c-menu__list" role="menu">
2805
- <li
2806
- class="pf-v5-c-menu__list-item"
2807
- role="none"
2808
- >
2809
- <a
2810
- class="pf-v5-c-menu__item"
2811
- href="#"
2812
- role="menuitem"
2813
- >
2814
- <span class="pf-v5-c-menu__item-main">
2815
- <span
2816
- class="pf-v5-c-menu__item-text"
2817
- >Link 1</span>
2818
- </span>
2819
- </a>
2820
- <button
2821
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
2822
- type="button"
2823
- aria-label="Starred"
2824
- >
2825
- <span
2826
- class="pf-v5-c-menu__item-action-icon"
2827
- >
2828
- <i
2829
- class="fas fa-star"
2830
- aria-hidden="true"
2831
- ></i>
2832
- </span>
2833
- </button>
2834
- </li>
2835
- <li
2836
- class="pf-v5-c-menu__list-item"
2837
- role="none"
2838
- >
2839
- <a
2840
- class="pf-v5-c-menu__item"
2841
- href="#"
2842
- role="menuitem"
2843
- target="_blank"
2844
- >
2845
- <span class="pf-v5-c-menu__item-main">
2846
- <span
2847
- class="pf-v5-c-menu__item-text"
2848
- >Link 2</span>
2849
- <span
2850
- class="pf-v5-c-menu__item-external-icon"
2851
- >
2852
- <i
2853
- class="fas fa-external-link-alt"
2854
- aria-hidden="true"
2855
- ></i>
2856
- </span>
2857
- <span
2858
- class="pf-v5-screen-reader"
2859
- >(opens new window)</span>
2860
- </span>
2861
- </a>
2862
- <button
2863
- class="pf-v5-c-menu__item-action pf-m-favorite"
2864
- type="button"
2865
- aria-label="Not starred"
2866
- >
2867
- <span
2868
- class="pf-v5-c-menu__item-action-icon"
2869
- >
2870
- <i
2871
- class="fas fa-star"
2872
- aria-hidden="true"
2873
- ></i>
2874
- </span>
2875
- </button>
2876
- </li>
2877
- </ul>
2878
- </section>
2879
- <hr class="pf-v5-c-divider" />
2880
- <section class="pf-v5-c-menu__group">
2881
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
2882
- <ul class="pf-v5-c-menu__list" role="menu">
2883
- <li
2884
- class="pf-v5-c-menu__list-item"
2885
- role="none"
2886
- >
2887
- <a
2888
- class="pf-v5-c-menu__item"
2889
- href="#"
2890
- role="menuitem"
2891
- >
2892
- <span class="pf-v5-c-menu__item-main">
2893
- <span
2894
- class="pf-v5-c-menu__item-text"
2895
- >Link 1</span>
2896
- </span>
2897
- </a>
2898
- <button
2899
- class="pf-v5-c-menu__item-action pf-m-favorite"
2900
- type="button"
2901
- aria-label="Not starred"
2902
- >
2903
- <span
2904
- class="pf-v5-c-menu__item-action-icon"
2905
- >
2906
- <i
2907
- class="fas fa-star"
2908
- aria-hidden="true"
2909
- ></i>
2910
- </span>
2911
- </button>
2912
- </li>
2913
- <li
2914
- class="pf-v5-c-menu__list-item"
2915
- role="none"
2916
- >
2917
- <a
2918
- class="pf-v5-c-menu__item"
2919
- href="#"
2920
- role="menuitem"
2921
- target="_blank"
2922
- >
2923
- <span class="pf-v5-c-menu__item-main">
2924
- <span
2925
- class="pf-v5-c-menu__item-text"
2926
- >Link 2</span>
2927
- <span
2928
- class="pf-v5-c-menu__item-external-icon"
2929
- >
2930
- <i
2931
- class="fas fa-external-link-alt"
2932
- aria-hidden="true"
2933
- ></i>
2934
- </span>
2935
- <span
2936
- class="pf-v5-screen-reader"
2937
- >(opens new window)</span>
2938
- </span>
2939
- </a>
2940
- <button
2941
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
2942
- type="button"
2943
- aria-label="Starred"
2944
- >
2945
- <span
2946
- class="pf-v5-c-menu__item-action-icon"
2947
- >
2948
- <i
2949
- class="fas fa-star"
2950
- aria-hidden="true"
2951
- ></i>
2952
- </span>
2953
- </button>
2954
- </li>
2955
- </ul>
2956
- </section>
2957
- </div>
2958
- </li>
2959
- </ul>
2960
- </section>
2961
- </div>
2962
- </div>
2963
793
  </div>
2964
794
  </div>
2965
- </div>
2966
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2967
- <div
2968
- class="pf-v5-c-dropdown pf-m-full-height"
2969
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
2970
- >
795
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2971
796
  <button
2972
- class="pf-v5-c-dropdown__toggle"
2973
- id="drawer-expanded-bottom-example-masthead-profile-button"
2974
- aria-expanded="false"
797
+ class="pf-v5-c-menu-toggle pf-m-plain"
2975
798
  type="button"
799
+ aria-expanded="false"
800
+ aria-label="Actions"
2976
801
  >
2977
- <span class="pf-v5-c-dropdown__toggle-image">
2978
- <img
2979
- class="pf-v5-c-avatar"
2980
- alt="Avatar image"
2981
- src="/assets/images/img_avatar-light.svg"
2982
- />
2983
- </span>
2984
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
2985
- <span class="pf-v5-c-dropdown__toggle-icon">
2986
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2987
- </span>
802
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2988
803
  </button>
2989
- <div class="pf-v5-c-dropdown__menu" hidden>
2990
- <section class="pf-v5-c-dropdown__group">
2991
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
2992
- <div class="pf-v5-u-font-size-sm">Account number:</div>
2993
- <div>123456789</div>
2994
- </div>
2995
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
2996
- <div class="pf-v5-u-font-size-sm">Username:</div>
2997
- <div>mshaksho@redhat.com</div>
2998
- </div>
2999
- </section>
3000
- <hr class="pf-v5-c-divider" />
3001
- <section class="pf-v5-c-dropdown__group">
3002
- <ul>
3003
- <li>
3004
- <a
3005
- class="pf-v5-c-dropdown__menu-item"
3006
- href="#"
3007
- >My profile</a>
3008
- </li>
3009
- <li>
3010
- <a
3011
- class="pf-v5-c-dropdown__menu-item"
3012
- href="#"
3013
- >User management</a>
3014
- </li>
3015
- <li>
3016
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
3017
- </li>
3018
- </ul>
3019
- </section>
3020
- </div>
3021
804
  </div>
3022
805
  </div>
806
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
807
+ <button
808
+ class="pf-v5-c-menu-toggle pf-m-full-height"
809
+ type="button"
810
+ aria-expanded="false"
811
+ >
812
+ <span class="pf-v5-c-menu-toggle__icon">
813
+ <img
814
+ class="pf-v5-c-avatar"
815
+ alt="Avatar image"
816
+ src="/assets/images/img_avatar-light.svg"
817
+ />
818
+ </span>
819
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
820
+ <span class="pf-v5-c-menu-toggle__controls">
821
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
822
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
823
+ </span>
824
+ </span>
825
+ </button>
826
+ </div>
3023
827
  </div>
3024
828
  </div>
3025
829
  </div>
@@ -3222,800 +1026,68 @@ wrapperTag: div
3222
1026
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
3223
1027
  >
3224
1028
  <div class="pf-v5-c-toolbar__item">
3225
- <nav
3226
- class="pf-v5-c-app-launcher"
1029
+ <button
1030
+ class="pf-v5-c-menu-toggle pf-m-plain"
1031
+ type="button"
1032
+ aria-expanded="false"
3227
1033
  aria-label="Application launcher"
3228
- id="drawer-jump-links-masthead-application-launcher"
3229
1034
  >
3230
- <button
3231
- class="pf-v5-c-app-launcher__toggle"
3232
- type="button"
3233
- id="drawer-jump-links-masthead-application-launcher-button"
3234
- aria-expanded="false"
3235
- aria-label="Application launcher"
3236
- >
3237
- <i class="fas fa-th" aria-hidden="true"></i>
3238
- </button>
3239
- <div
3240
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
3241
- hidden
3242
- >
3243
- <div class="pf-v5-c-app-launcher__menu-search">
3244
- <div class="pf-v5-c-text-input-group">
3245
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
3246
- <span class="pf-v5-c-text-input-group__text">
3247
- <span class="pf-v5-c-text-input-group__icon">
3248
- <i class="fas fa-fw fa-search"></i>
3249
- </span>
3250
- <input
3251
- class="pf-v5-c-text-input-group__text-input"
3252
- type="text"
3253
- placeholder="Filer by name"
3254
- value
3255
- aria-label="Search input"
3256
- />
3257
- </span>
3258
- </div>
3259
- </div>
3260
- </div>
3261
- <section class="pf-v5-c-app-launcher__group">
3262
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
3263
- <ul role="list">
3264
- <li
3265
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3266
- >
3267
- <a class="pf-v5-c-app-launcher__menu-item">
3268
- Link 1
3269
- <span
3270
- class="pf-v5-c-app-launcher__menu-item-external-icon"
3271
- >
3272
- <i
3273
- class="fas fa-external-link-alt"
3274
- aria-hidden="true"
3275
- ></i>
3276
- </span>
3277
- <span
3278
- class="pf-v5-screen-reader"
3279
- >(opens new window)</span>
3280
- </a>
3281
- <button
3282
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
3283
- type="button"
3284
- aria-label="Favorite"
3285
- >
3286
- <i class="fas fa-star" aria-hidden="true"></i>
3287
- </button>
3288
- </li>
3289
- <li
3290
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
3291
- >
3292
- <a class="pf-v5-c-app-launcher__menu-item">
3293
- Link 2
3294
- <span
3295
- class="pf-v5-c-app-launcher__menu-item-external-icon"
3296
- >
3297
- <i
3298
- class="fas fa-external-link-alt"
3299
- aria-hidden="true"
3300
- ></i>
3301
- </span>
3302
- <span
3303
- class="pf-v5-screen-reader"
3304
- >(opens new window)</span>
3305
- </a>
3306
- <button
3307
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
3308
- type="button"
3309
- aria-label="Favorite"
3310
- >
3311
- <i class="fas fa-star" aria-hidden="true"></i>
3312
- </button>
3313
- </li>
3314
- </ul>
3315
- </section>
3316
- <hr class="pf-v5-c-divider" />
3317
- <section class="pf-v5-c-app-launcher__group">
3318
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
3319
- <ul role="list">
3320
- <li
3321
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
3322
- >
3323
- <a class="pf-v5-c-app-launcher__menu-item">
3324
- Link 1
3325
- <span
3326
- class="pf-v5-c-app-launcher__menu-item-external-icon"
3327
- >
3328
- <i
3329
- class="fas fa-external-link-alt"
3330
- aria-hidden="true"
3331
- ></i>
3332
- </span>
3333
- <span
3334
- class="pf-v5-screen-reader"
3335
- >(opens new window)</span>
3336
- </a>
3337
- <button
3338
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
3339
- type="button"
3340
- aria-label="Favorite"
3341
- >
3342
- <i class="fas fa-star" aria-hidden="true"></i>
3343
- </button>
3344
- </li>
3345
- <li
3346
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
3347
- >
3348
- <a class="pf-v5-c-app-launcher__menu-item">
3349
- Link 2
3350
- <span
3351
- class="pf-v5-c-app-launcher__menu-item-external-icon"
3352
- >
3353
- <i
3354
- class="fas fa-external-link-alt"
3355
- aria-hidden="true"
3356
- ></i>
3357
- </span>
3358
- <span
3359
- class="pf-v5-screen-reader"
3360
- >(opens new window)</span>
3361
- </a>
3362
- <button
3363
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
3364
- type="button"
3365
- aria-label="Favorite"
3366
- >
3367
- <i class="fas fa-star" aria-hidden="true"></i>
3368
- </button>
3369
- </li>
3370
- </ul>
3371
- </section>
3372
- </div>
3373
- </nav>
1035
+ <i class="fas fa-th" aria-hidden="true"></i>
1036
+ </button>
3374
1037
  </div>
3375
1038
  <div class="pf-v5-c-toolbar__item">
3376
- <div class="pf-v5-c-dropdown">
3377
- <button
3378
- class="pf-v5-c-dropdown__toggle pf-m-plain"
3379
- id="drawer-jump-links-masthead-settings-button"
3380
- aria-expanded="false"
3381
- type="button"
3382
- aria-label="Settings"
3383
- >
3384
- <i class="fas fa-cog" aria-hidden="true"></i>
3385
- </button>
3386
- <ul
3387
- class="pf-v5-c-dropdown__menu pf-m-align-right"
3388
- aria-labelledby="drawer-jump-links-masthead-settings-button"
3389
- hidden
3390
- >
3391
- <li>
3392
- <button
3393
- class="pf-v5-c-dropdown__menu-item"
3394
- type="button"
3395
- >Settings</button>
3396
- </li>
3397
- <li>
3398
- <button
3399
- class="pf-v5-c-dropdown__menu-item"
3400
- type="button"
3401
- >Use the beta release</button>
3402
- </li>
3403
- </ul>
3404
- </div>
1039
+ <button
1040
+ class="pf-v5-c-menu-toggle pf-m-plain"
1041
+ type="button"
1042
+ aria-expanded="false"
1043
+ aria-label="Settings"
1044
+ >
1045
+ <i class="fas fa-cog" aria-hidden="true"></i>
1046
+ </button>
3405
1047
  </div>
3406
1048
  <div class="pf-v5-c-toolbar__item">
3407
- <div class="pf-v5-c-dropdown">
3408
- <button
3409
- class="pf-v5-c-dropdown__toggle pf-m-plain"
3410
- id="drawer-jump-links-masthead-help-button"
3411
- aria-expanded="false"
3412
- type="button"
3413
- aria-label="Help"
3414
- >
3415
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3416
- </button>
3417
- <ul
3418
- class="pf-v5-c-dropdown__menu pf-m-align-right"
3419
- aria-labelledby="drawer-jump-links-masthead-help-button"
3420
- hidden
3421
- >
3422
- <li>
3423
- <button
3424
- class="pf-v5-c-dropdown__menu-item"
3425
- type="button"
3426
- >Support options</button>
3427
- </li>
3428
- <li>
3429
- <button
3430
- class="pf-v5-c-dropdown__menu-item"
3431
- type="button"
3432
- >Open support case</button>
3433
- </li>
3434
- <li>
3435
- <button
3436
- class="pf-v5-c-dropdown__menu-item"
3437
- type="button"
3438
- >API documentation</button>
3439
- </li>
3440
- </ul>
3441
- </div>
3442
- </div>
3443
- </div>
3444
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
3445
- <div class="pf-v5-c-dropdown">
3446
1049
  <button
3447
1050
  class="pf-v5-c-menu-toggle pf-m-plain"
3448
1051
  type="button"
3449
1052
  aria-expanded="false"
3450
- aria-label="Actions"
1053
+ aria-label="Help"
3451
1054
  >
3452
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1055
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3453
1056
  </button>
3454
- <div
3455
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
3456
- hidden
3457
- >
3458
- <div class="pf-v5-c-menu__content">
3459
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
3460
- <ul class="pf-v5-c-menu__list" role="menu">
3461
- <li
3462
- class="pf-v5-c-menu__list-item pf-m-disabled"
3463
- role="none"
3464
- >
3465
- <button
3466
- class="pf-v5-c-menu__item"
3467
- type="button"
3468
- disabled
3469
- role="menuitem"
3470
- >
3471
- <span class="pf-v5-c-menu__item-description">
3472
- <div class="pf-v5-u-font-size-sm">Username:</div>
3473
- <div class="pf-v5-u-font-size-md">ned_username</div>
3474
- </span>
3475
- </button>
3476
- </li>
3477
- <li
3478
- class="pf-v5-c-menu__list-item pf-m-disabled"
3479
- role="none"
3480
- >
3481
- <button
3482
- class="pf-v5-c-menu__item"
3483
- type="button"
3484
- disabled
3485
- role="menuitem"
3486
- >
3487
- <span class="pf-v5-c-menu__item-description">
3488
- <div
3489
- class="pf-v5-u-font-size-sm"
3490
- >Account number:</div>
3491
- <div class="pf-v5-u-font-size-md">123456789</div>
3492
- </span>
3493
- </button>
3494
- </li>
3495
- <li class="pf-v5-c-divider" role="separator"></li>
3496
- <li class="pf-v5-c-menu__list-item" role="none">
3497
- <button
3498
- class="pf-v5-c-menu__item"
3499
- type="button"
3500
- role="menuitem"
3501
- >
3502
- <span class="pf-v5-c-menu__item-main">
3503
- <span class="pf-v5-c-menu__item-text">My profile</span>
3504
- </span>
3505
- </button>
3506
- </li>
3507
- <li class="pf-v5-c-menu__list-item" role="none">
3508
- <button
3509
- class="pf-v5-c-menu__item"
3510
- type="button"
3511
- role="menuitem"
3512
- >
3513
- <span class="pf-v5-c-menu__item-main">
3514
- <span
3515
- class="pf-v5-c-menu__item-text"
3516
- >User management</span>
3517
- </span>
3518
- </button>
3519
- </li>
3520
- <li class="pf-v5-c-menu__list-item" role="none">
3521
- <button
3522
- class="pf-v5-c-menu__item"
3523
- type="button"
3524
- role="menuitem"
3525
- >
3526
- <span class="pf-v5-c-menu__item-main">
3527
- <span class="pf-v5-c-menu__item-text">Logout</span>
3528
- </span>
3529
- </button>
3530
- </li>
3531
- </ul>
3532
- </section>
3533
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
3534
- <section class="pf-v5-c-menu__group">
3535
- <ul class="pf-v5-c-menu__list" role="menu">
3536
- <li class="pf-v5-c-menu__list-item" role="none">
3537
- <button
3538
- class="pf-v5-c-menu__item"
3539
- type="button"
3540
- role="menuitem"
3541
- aria-expanded="false"
3542
- >
3543
- <span class="pf-v5-c-menu__item-main">
3544
- <span class="pf-v5-c-menu__item-icon">
3545
- <i
3546
- class="fas fa-fw fa-cog"
3547
- aria-hidden="true"
3548
- ></i>
3549
- </span>
3550
- <span class="pf-v5-c-menu__item-text">Settings</span>
3551
- <span class="pf-v5-c-menu__item-toggle-icon">
3552
- <i class="fas fa-angle-right"></i>
3553
- </span>
3554
- </span>
3555
- </button>
3556
- <div class="pf-v5-c-menu" hidden>
3557
- <div class="pf-v5-c-menu__content">
3558
- <ul class="pf-v5-c-menu__list" role="menu">
3559
- <li
3560
- class="pf-v5-c-menu__list-item pf-m-drill-up"
3561
- role="none"
3562
- >
3563
- <button
3564
- class="pf-v5-c-menu__item"
3565
- type="button"
3566
- role="menuitem"
3567
- >
3568
- <span class="pf-v5-c-menu__item-main">
3569
- <span
3570
- class="pf-v5-c-menu__item-toggle-icon"
3571
- >
3572
- <i class="fas fa-angle-left"></i>
3573
- </span>
3574
- <span class="pf-v5-c-menu__item-icon">
3575
- <i
3576
- class="fas fa-fw fa-cog"
3577
- aria-hidden="true"
3578
- ></i>
3579
- </span>
3580
- <span
3581
- class="pf-v5-c-menu__item-text"
3582
- >Settings</span>
3583
- </span>
3584
- </button>
3585
- </li>
3586
- <li class="pf-v5-c-divider" role="separator"></li>
3587
- <li
3588
- class="pf-v5-c-menu__list-item"
3589
- role="none"
3590
- >
3591
- <a
3592
- class="pf-v5-c-menu__item"
3593
- href="#"
3594
- role="menuitem"
3595
- >
3596
- <span class="pf-v5-c-menu__item-main">
3597
- <span
3598
- class="pf-v5-c-menu__item-text"
3599
- >Customer support</span>
3600
- </span>
3601
- </a>
3602
- </li>
3603
- <li
3604
- class="pf-v5-c-menu__list-item"
3605
- role="none"
3606
- >
3607
- <a
3608
- class="pf-v5-c-menu__item"
3609
- href="#"
3610
- role="menuitem"
3611
- >
3612
- <span class="pf-v5-c-menu__item-main">
3613
- <span
3614
- class="pf-v5-c-menu__item-text"
3615
- >About</span>
3616
- </span>
3617
- </a>
3618
- </li>
3619
- </ul>
3620
- </div>
3621
- </div>
3622
- </li>
3623
-
3624
- <li class="pf-v5-c-menu__list-item" role="none">
3625
- <button
3626
- class="pf-v5-c-menu__item"
3627
- type="button"
3628
- role="menuitem"
3629
- aria-expanded="false"
3630
- >
3631
- <span class="pf-v5-c-menu__item-main">
3632
- <span class="pf-v5-c-menu__item-icon">
3633
- <i
3634
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
3635
- aria-hidden="true"
3636
- ></i>
3637
- </span>
3638
- <span class="pf-v5-c-menu__item-text">Help</span>
3639
- <span class="pf-v5-c-menu__item-toggle-icon">
3640
- <i class="fas fa-angle-right"></i>
3641
- </span>
3642
- </span>
3643
- </button>
3644
- <div class="pf-v5-c-menu" hidden>
3645
- <div class="pf-v5-c-menu__content">
3646
- <ul class="pf-v5-c-menu__list" role="menu">
3647
- <li
3648
- class="pf-v5-c-menu__list-item pf-m-drill-up"
3649
- role="none"
3650
- >
3651
- <button
3652
- class="pf-v5-c-menu__item"
3653
- type="button"
3654
- role="menuitem"
3655
- >
3656
- <span class="pf-v5-c-menu__item-main">
3657
- <span
3658
- class="pf-v5-c-menu__item-toggle-icon"
3659
- >
3660
- <i class="fas fa-angle-left"></i>
3661
- </span>
3662
- <span class="pf-v5-c-menu__item-icon">
3663
- <i
3664
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
3665
- aria-hidden="true"
3666
- ></i>
3667
- </span>
3668
- <span
3669
- class="pf-v5-c-menu__item-text"
3670
- >Help</span>
3671
- </span>
3672
- </button>
3673
- </li>
3674
- <li class="pf-v5-c-divider" role="separator"></li>
3675
- <li
3676
- class="pf-v5-c-menu__list-item"
3677
- role="none"
3678
- >
3679
- <a
3680
- class="pf-v5-c-menu__item"
3681
- href="#"
3682
- role="menuitem"
3683
- >
3684
- <span class="pf-v5-c-menu__item-main">
3685
- <span
3686
- class="pf-v5-c-menu__item-text"
3687
- >Support options</span>
3688
- </span>
3689
- </a>
3690
- </li>
3691
- <li
3692
- class="pf-v5-c-menu__list-item"
3693
- role="none"
3694
- >
3695
- <a
3696
- class="pf-v5-c-menu__item"
3697
- href="#"
3698
- role="menuitem"
3699
- >
3700
- <span class="pf-v5-c-menu__item-main">
3701
- <span
3702
- class="pf-v5-c-menu__item-text"
3703
- >Open support case</span>
3704
- </span>
3705
- </a>
3706
- </li>
3707
- <li
3708
- class="pf-v5-c-menu__list-item"
3709
- role="none"
3710
- >
3711
- <a
3712
- class="pf-v5-c-menu__item"
3713
- href="#"
3714
- role="menuitem"
3715
- >
3716
- <span class="pf-v5-c-menu__item-main">
3717
- <span
3718
- class="pf-v5-c-menu__item-text"
3719
- >API documentation</span>
3720
- </span>
3721
- </a>
3722
- </li>
3723
- </ul>
3724
- </div>
3725
- </div>
3726
- </li>
3727
-
3728
- <li class="pf-v5-c-menu__list-item" role="none">
3729
- <button
3730
- class="pf-v5-c-menu__item"
3731
- type="button"
3732
- role="menuitem"
3733
- >
3734
- <span class="pf-v5-c-menu__item-main">
3735
- <span class="pf-v5-c-menu__item-icon">
3736
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
3737
- </span>
3738
- <span
3739
- class="pf-v5-c-menu__item-text"
3740
- >Application launcher</span>
3741
- <span class="pf-v5-c-menu__item-toggle-icon">
3742
- <i class="fas fa-angle-right"></i>
3743
- </span>
3744
- </span>
3745
- </button>
3746
- <div class="pf-v5-c-menu" hidden>
3747
- <div class="pf-v5-c-menu__header">
3748
- <button
3749
- class="pf-v5-c-menu__item"
3750
- type="button"
3751
- role="menuitem"
3752
- >
3753
- <span class="pf-v5-c-menu__item-main">
3754
- <span
3755
- class="pf-v5-c-menu__item-toggle-icon"
3756
- >
3757
- <i class="fas fa-angle-left"></i>
3758
- </span>
3759
- <span class="pf-v5-c-menu__item-icon">
3760
- <i
3761
- class="fas fa-fw fa-th"
3762
- aria-hidden="true"
3763
- ></i>
3764
- </span>
3765
- <span
3766
- class="pf-v5-c-menu__item-text"
3767
- >Application launcher</span>
3768
- </span>
3769
- </button>
3770
- </div>
3771
- <div class="pf-v5-c-menu__search">
3772
- <div class="pf-v5-c-menu__search-input">
3773
- <div class="pf-v5-c-text-input-group">
3774
- <div
3775
- class="pf-v5-c-text-input-group__main pf-m-icon"
3776
- >
3777
- <span
3778
- class="pf-v5-c-text-input-group__text"
3779
- >
3780
- <span
3781
- class="pf-v5-c-text-input-group__icon"
3782
- >
3783
- <i class="fas fa-fw fa-search"></i>
3784
- </span>
3785
- <input
3786
- class="pf-v5-c-text-input-group__text-input"
3787
- type="text"
3788
- placeholder="Search"
3789
- value
3790
- aria-label="Search input"
3791
- />
3792
- </span>
3793
- </div>
3794
- </div>
3795
- </div>
3796
- </div>
3797
- <hr class="pf-v5-c-divider" />
3798
- <section class="pf-v5-c-menu__group">
3799
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
3800
- <ul class="pf-v5-c-menu__list" role="menu">
3801
- <li
3802
- class="pf-v5-c-menu__list-item"
3803
- role="none"
3804
- >
3805
- <a
3806
- class="pf-v5-c-menu__item"
3807
- href="#"
3808
- role="menuitem"
3809
- >
3810
- <span class="pf-v5-c-menu__item-main">
3811
- <span
3812
- class="pf-v5-c-menu__item-text"
3813
- >Link 1</span>
3814
- </span>
3815
- </a>
3816
- <button
3817
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
3818
- type="button"
3819
- aria-label="Starred"
3820
- >
3821
- <span
3822
- class="pf-v5-c-menu__item-action-icon"
3823
- >
3824
- <i
3825
- class="fas fa-star"
3826
- aria-hidden="true"
3827
- ></i>
3828
- </span>
3829
- </button>
3830
- </li>
3831
- <li
3832
- class="pf-v5-c-menu__list-item"
3833
- role="none"
3834
- >
3835
- <a
3836
- class="pf-v5-c-menu__item"
3837
- href="#"
3838
- role="menuitem"
3839
- target="_blank"
3840
- >
3841
- <span class="pf-v5-c-menu__item-main">
3842
- <span
3843
- class="pf-v5-c-menu__item-text"
3844
- >Link 2</span>
3845
- <span
3846
- class="pf-v5-c-menu__item-external-icon"
3847
- >
3848
- <i
3849
- class="fas fa-external-link-alt"
3850
- aria-hidden="true"
3851
- ></i>
3852
- </span>
3853
- <span
3854
- class="pf-v5-screen-reader"
3855
- >(opens new window)</span>
3856
- </span>
3857
- </a>
3858
- <button
3859
- class="pf-v5-c-menu__item-action pf-m-favorite"
3860
- type="button"
3861
- aria-label="Not starred"
3862
- >
3863
- <span
3864
- class="pf-v5-c-menu__item-action-icon"
3865
- >
3866
- <i
3867
- class="fas fa-star"
3868
- aria-hidden="true"
3869
- ></i>
3870
- </span>
3871
- </button>
3872
- </li>
3873
- </ul>
3874
- </section>
3875
- <hr class="pf-v5-c-divider" />
3876
- <section class="pf-v5-c-menu__group">
3877
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
3878
- <ul class="pf-v5-c-menu__list" role="menu">
3879
- <li
3880
- class="pf-v5-c-menu__list-item"
3881
- role="none"
3882
- >
3883
- <a
3884
- class="pf-v5-c-menu__item"
3885
- href="#"
3886
- role="menuitem"
3887
- >
3888
- <span class="pf-v5-c-menu__item-main">
3889
- <span
3890
- class="pf-v5-c-menu__item-text"
3891
- >Link 1</span>
3892
- </span>
3893
- </a>
3894
- <button
3895
- class="pf-v5-c-menu__item-action pf-m-favorite"
3896
- type="button"
3897
- aria-label="Not starred"
3898
- >
3899
- <span
3900
- class="pf-v5-c-menu__item-action-icon"
3901
- >
3902
- <i
3903
- class="fas fa-star"
3904
- aria-hidden="true"
3905
- ></i>
3906
- </span>
3907
- </button>
3908
- </li>
3909
- <li
3910
- class="pf-v5-c-menu__list-item"
3911
- role="none"
3912
- >
3913
- <a
3914
- class="pf-v5-c-menu__item"
3915
- href="#"
3916
- role="menuitem"
3917
- target="_blank"
3918
- >
3919
- <span class="pf-v5-c-menu__item-main">
3920
- <span
3921
- class="pf-v5-c-menu__item-text"
3922
- >Link 2</span>
3923
- <span
3924
- class="pf-v5-c-menu__item-external-icon"
3925
- >
3926
- <i
3927
- class="fas fa-external-link-alt"
3928
- aria-hidden="true"
3929
- ></i>
3930
- </span>
3931
- <span
3932
- class="pf-v5-screen-reader"
3933
- >(opens new window)</span>
3934
- </span>
3935
- </a>
3936
- <button
3937
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
3938
- type="button"
3939
- aria-label="Starred"
3940
- >
3941
- <span
3942
- class="pf-v5-c-menu__item-action-icon"
3943
- >
3944
- <i
3945
- class="fas fa-star"
3946
- aria-hidden="true"
3947
- ></i>
3948
- </span>
3949
- </button>
3950
- </li>
3951
- </ul>
3952
- </section>
3953
- </div>
3954
- </li>
3955
- </ul>
3956
- </section>
3957
- </div>
3958
- </div>
3959
1057
  </div>
3960
1058
  </div>
3961
- </div>
3962
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3963
- <div
3964
- class="pf-v5-c-dropdown pf-m-full-height"
3965
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
3966
- >
1059
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
3967
1060
  <button
3968
- class="pf-v5-c-dropdown__toggle"
3969
- id="drawer-jump-links-masthead-profile-button"
3970
- aria-expanded="false"
1061
+ class="pf-v5-c-menu-toggle pf-m-plain"
3971
1062
  type="button"
1063
+ aria-expanded="false"
1064
+ aria-label="Actions"
3972
1065
  >
3973
- <span class="pf-v5-c-dropdown__toggle-image">
3974
- <img
3975
- class="pf-v5-c-avatar"
3976
- alt="Avatar image"
3977
- src="/assets/images/img_avatar-light.svg"
3978
- />
3979
- </span>
3980
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
3981
- <span class="pf-v5-c-dropdown__toggle-icon">
3982
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3983
- </span>
1066
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3984
1067
  </button>
3985
- <div class="pf-v5-c-dropdown__menu" hidden>
3986
- <section class="pf-v5-c-dropdown__group">
3987
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
3988
- <div class="pf-v5-u-font-size-sm">Account number:</div>
3989
- <div>123456789</div>
3990
- </div>
3991
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
3992
- <div class="pf-v5-u-font-size-sm">Username:</div>
3993
- <div>mshaksho@redhat.com</div>
3994
- </div>
3995
- </section>
3996
- <hr class="pf-v5-c-divider" />
3997
- <section class="pf-v5-c-dropdown__group">
3998
- <ul>
3999
- <li>
4000
- <a
4001
- class="pf-v5-c-dropdown__menu-item"
4002
- href="#"
4003
- >My profile</a>
4004
- </li>
4005
- <li>
4006
- <a
4007
- class="pf-v5-c-dropdown__menu-item"
4008
- href="#"
4009
- >User management</a>
4010
- </li>
4011
- <li>
4012
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
4013
- </li>
4014
- </ul>
4015
- </section>
4016
- </div>
4017
1068
  </div>
4018
1069
  </div>
1070
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1071
+ <button
1072
+ class="pf-v5-c-menu-toggle pf-m-full-height"
1073
+ type="button"
1074
+ aria-expanded="false"
1075
+ >
1076
+ <span class="pf-v5-c-menu-toggle__icon">
1077
+ <img
1078
+ class="pf-v5-c-avatar"
1079
+ alt="Avatar image"
1080
+ src="/assets/images/img_avatar-light.svg"
1081
+ />
1082
+ </span>
1083
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1084
+ <span class="pf-v5-c-menu-toggle__controls">
1085
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1086
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1087
+ </span>
1088
+ </span>
1089
+ </button>
1090
+ </div>
4019
1091
  </div>
4020
1092
  </div>
4021
1093
  </div>
@@ -4236,800 +1308,68 @@ wrapperTag: div
4236
1308
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
4237
1309
  >
4238
1310
  <div class="pf-v5-c-toolbar__item">
4239
- <nav
4240
- class="pf-v5-c-app-launcher"
1311
+ <button
1312
+ class="pf-v5-c-menu-toggle pf-m-plain"
1313
+ type="button"
1314
+ aria-expanded="false"
4241
1315
  aria-label="Application launcher"
4242
- id="drawer-expanded-jump-links-masthead-application-launcher"
4243
1316
  >
4244
- <button
4245
- class="pf-v5-c-app-launcher__toggle"
4246
- type="button"
4247
- id="drawer-expanded-jump-links-masthead-application-launcher-button"
4248
- aria-expanded="false"
4249
- aria-label="Application launcher"
4250
- >
4251
- <i class="fas fa-th" aria-hidden="true"></i>
4252
- </button>
4253
- <div
4254
- class="pf-v5-c-app-launcher__menu pf-m-align-right"
4255
- hidden
4256
- >
4257
- <div class="pf-v5-c-app-launcher__menu-search">
4258
- <div class="pf-v5-c-text-input-group">
4259
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
4260
- <span class="pf-v5-c-text-input-group__text">
4261
- <span class="pf-v5-c-text-input-group__icon">
4262
- <i class="fas fa-fw fa-search"></i>
4263
- </span>
4264
- <input
4265
- class="pf-v5-c-text-input-group__text-input"
4266
- type="text"
4267
- placeholder="Filer by name"
4268
- value
4269
- aria-label="Search input"
4270
- />
4271
- </span>
4272
- </div>
4273
- </div>
4274
- </div>
4275
- <section class="pf-v5-c-app-launcher__group">
4276
- <h1 class="pf-v5-c-app-launcher__group-title">Favorites</h1>
4277
- <ul role="list">
4278
- <li
4279
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
4280
- >
4281
- <a class="pf-v5-c-app-launcher__menu-item">
4282
- Link 1
4283
- <span
4284
- class="pf-v5-c-app-launcher__menu-item-external-icon"
4285
- >
4286
- <i
4287
- class="fas fa-external-link-alt"
4288
- aria-hidden="true"
4289
- ></i>
4290
- </span>
4291
- <span
4292
- class="pf-v5-screen-reader"
4293
- >(opens new window)</span>
4294
- </a>
4295
- <button
4296
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
4297
- type="button"
4298
- aria-label="Favorite"
4299
- >
4300
- <i class="fas fa-star" aria-hidden="true"></i>
4301
- </button>
4302
- </li>
4303
- <li
4304
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
4305
- >
4306
- <a class="pf-v5-c-app-launcher__menu-item">
4307
- Link 2
4308
- <span
4309
- class="pf-v5-c-app-launcher__menu-item-external-icon"
4310
- >
4311
- <i
4312
- class="fas fa-external-link-alt"
4313
- aria-hidden="true"
4314
- ></i>
4315
- </span>
4316
- <span
4317
- class="pf-v5-screen-reader"
4318
- >(opens new window)</span>
4319
- </a>
4320
- <button
4321
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
4322
- type="button"
4323
- aria-label="Favorite"
4324
- >
4325
- <i class="fas fa-star" aria-hidden="true"></i>
4326
- </button>
4327
- </li>
4328
- </ul>
4329
- </section>
4330
- <hr class="pf-v5-c-divider" />
4331
- <section class="pf-v5-c-app-launcher__group">
4332
- <h1 class="pf-v5-c-app-launcher__group-title">Group 1</h1>
4333
- <ul role="list">
4334
- <li
4335
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external"
4336
- >
4337
- <a class="pf-v5-c-app-launcher__menu-item">
4338
- Link 1
4339
- <span
4340
- class="pf-v5-c-app-launcher__menu-item-external-icon"
4341
- >
4342
- <i
4343
- class="fas fa-external-link-alt"
4344
- aria-hidden="true"
4345
- ></i>
4346
- </span>
4347
- <span
4348
- class="pf-v5-screen-reader"
4349
- >(opens new window)</span>
4350
- </a>
4351
- <button
4352
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
4353
- type="button"
4354
- aria-label="Favorite"
4355
- >
4356
- <i class="fas fa-star" aria-hidden="true"></i>
4357
- </button>
4358
- </li>
4359
- <li
4360
- class="pf-v5-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
4361
- >
4362
- <a class="pf-v5-c-app-launcher__menu-item">
4363
- Link 2
4364
- <span
4365
- class="pf-v5-c-app-launcher__menu-item-external-icon"
4366
- >
4367
- <i
4368
- class="fas fa-external-link-alt"
4369
- aria-hidden="true"
4370
- ></i>
4371
- </span>
4372
- <span
4373
- class="pf-v5-screen-reader"
4374
- >(opens new window)</span>
4375
- </a>
4376
- <button
4377
- class="pf-v5-c-app-launcher__menu-item pf-m-action"
4378
- type="button"
4379
- aria-label="Favorite"
4380
- >
4381
- <i class="fas fa-star" aria-hidden="true"></i>
4382
- </button>
4383
- </li>
4384
- </ul>
4385
- </section>
4386
- </div>
4387
- </nav>
1317
+ <i class="fas fa-th" aria-hidden="true"></i>
1318
+ </button>
4388
1319
  </div>
4389
1320
  <div class="pf-v5-c-toolbar__item">
4390
- <div class="pf-v5-c-dropdown">
4391
- <button
4392
- class="pf-v5-c-dropdown__toggle pf-m-plain"
4393
- id="drawer-expanded-jump-links-masthead-settings-button"
4394
- aria-expanded="false"
4395
- type="button"
4396
- aria-label="Settings"
4397
- >
4398
- <i class="fas fa-cog" aria-hidden="true"></i>
4399
- </button>
4400
- <ul
4401
- class="pf-v5-c-dropdown__menu pf-m-align-right"
4402
- aria-labelledby="drawer-expanded-jump-links-masthead-settings-button"
4403
- hidden
4404
- >
4405
- <li>
4406
- <button
4407
- class="pf-v5-c-dropdown__menu-item"
4408
- type="button"
4409
- >Settings</button>
4410
- </li>
4411
- <li>
4412
- <button
4413
- class="pf-v5-c-dropdown__menu-item"
4414
- type="button"
4415
- >Use the beta release</button>
4416
- </li>
4417
- </ul>
4418
- </div>
1321
+ <button
1322
+ class="pf-v5-c-menu-toggle pf-m-plain"
1323
+ type="button"
1324
+ aria-expanded="false"
1325
+ aria-label="Settings"
1326
+ >
1327
+ <i class="fas fa-cog" aria-hidden="true"></i>
1328
+ </button>
4419
1329
  </div>
4420
1330
  <div class="pf-v5-c-toolbar__item">
4421
- <div class="pf-v5-c-dropdown">
4422
- <button
4423
- class="pf-v5-c-dropdown__toggle pf-m-plain"
4424
- id="drawer-expanded-jump-links-masthead-help-button"
4425
- aria-expanded="false"
4426
- type="button"
4427
- aria-label="Help"
4428
- >
4429
- <i class="fas fa-question-circle" aria-hidden="true"></i>
4430
- </button>
4431
- <ul
4432
- class="pf-v5-c-dropdown__menu pf-m-align-right"
4433
- aria-labelledby="drawer-expanded-jump-links-masthead-help-button"
4434
- hidden
4435
- >
4436
- <li>
4437
- <button
4438
- class="pf-v5-c-dropdown__menu-item"
4439
- type="button"
4440
- >Support options</button>
4441
- </li>
4442
- <li>
4443
- <button
4444
- class="pf-v5-c-dropdown__menu-item"
4445
- type="button"
4446
- >Open support case</button>
4447
- </li>
4448
- <li>
4449
- <button
4450
- class="pf-v5-c-dropdown__menu-item"
4451
- type="button"
4452
- >API documentation</button>
4453
- </li>
4454
- </ul>
4455
- </div>
4456
- </div>
4457
- </div>
4458
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
4459
- <div class="pf-v5-c-dropdown">
4460
1331
  <button
4461
1332
  class="pf-v5-c-menu-toggle pf-m-plain"
4462
1333
  type="button"
4463
1334
  aria-expanded="false"
4464
- aria-label="Actions"
1335
+ aria-label="Help"
4465
1336
  >
4466
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1337
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
4467
1338
  </button>
4468
- <div
4469
- class="pf-v5-c-menu pf-m-drilldown pf-m-align-right"
4470
- hidden
4471
- >
4472
- <div class="pf-v5-c-menu__content">
4473
- <section class="pf-v5-c-menu__group pf-m-hidden-on-sm">
4474
- <ul class="pf-v5-c-menu__list" role="menu">
4475
- <li
4476
- class="pf-v5-c-menu__list-item pf-m-disabled"
4477
- role="none"
4478
- >
4479
- <button
4480
- class="pf-v5-c-menu__item"
4481
- type="button"
4482
- disabled
4483
- role="menuitem"
4484
- >
4485
- <span class="pf-v5-c-menu__item-description">
4486
- <div class="pf-v5-u-font-size-sm">Username:</div>
4487
- <div class="pf-v5-u-font-size-md">ned_username</div>
4488
- </span>
4489
- </button>
4490
- </li>
4491
- <li
4492
- class="pf-v5-c-menu__list-item pf-m-disabled"
4493
- role="none"
4494
- >
4495
- <button
4496
- class="pf-v5-c-menu__item"
4497
- type="button"
4498
- disabled
4499
- role="menuitem"
4500
- >
4501
- <span class="pf-v5-c-menu__item-description">
4502
- <div
4503
- class="pf-v5-u-font-size-sm"
4504
- >Account number:</div>
4505
- <div class="pf-v5-u-font-size-md">123456789</div>
4506
- </span>
4507
- </button>
4508
- </li>
4509
- <li class="pf-v5-c-divider" role="separator"></li>
4510
- <li class="pf-v5-c-menu__list-item" role="none">
4511
- <button
4512
- class="pf-v5-c-menu__item"
4513
- type="button"
4514
- role="menuitem"
4515
- >
4516
- <span class="pf-v5-c-menu__item-main">
4517
- <span class="pf-v5-c-menu__item-text">My profile</span>
4518
- </span>
4519
- </button>
4520
- </li>
4521
- <li class="pf-v5-c-menu__list-item" role="none">
4522
- <button
4523
- class="pf-v5-c-menu__item"
4524
- type="button"
4525
- role="menuitem"
4526
- >
4527
- <span class="pf-v5-c-menu__item-main">
4528
- <span
4529
- class="pf-v5-c-menu__item-text"
4530
- >User management</span>
4531
- </span>
4532
- </button>
4533
- </li>
4534
- <li class="pf-v5-c-menu__list-item" role="none">
4535
- <button
4536
- class="pf-v5-c-menu__item"
4537
- type="button"
4538
- role="menuitem"
4539
- >
4540
- <span class="pf-v5-c-menu__item-main">
4541
- <span class="pf-v5-c-menu__item-text">Logout</span>
4542
- </span>
4543
- </button>
4544
- </li>
4545
- </ul>
4546
- </section>
4547
- <hr class="pf-v5-c-divider pf-m-hidden-on-sm" />
4548
- <section class="pf-v5-c-menu__group">
4549
- <ul class="pf-v5-c-menu__list" role="menu">
4550
- <li class="pf-v5-c-menu__list-item" role="none">
4551
- <button
4552
- class="pf-v5-c-menu__item"
4553
- type="button"
4554
- role="menuitem"
4555
- aria-expanded="false"
4556
- >
4557
- <span class="pf-v5-c-menu__item-main">
4558
- <span class="pf-v5-c-menu__item-icon">
4559
- <i
4560
- class="fas fa-fw fa-cog"
4561
- aria-hidden="true"
4562
- ></i>
4563
- </span>
4564
- <span class="pf-v5-c-menu__item-text">Settings</span>
4565
- <span class="pf-v5-c-menu__item-toggle-icon">
4566
- <i class="fas fa-angle-right"></i>
4567
- </span>
4568
- </span>
4569
- </button>
4570
- <div class="pf-v5-c-menu" hidden>
4571
- <div class="pf-v5-c-menu__content">
4572
- <ul class="pf-v5-c-menu__list" role="menu">
4573
- <li
4574
- class="pf-v5-c-menu__list-item pf-m-drill-up"
4575
- role="none"
4576
- >
4577
- <button
4578
- class="pf-v5-c-menu__item"
4579
- type="button"
4580
- role="menuitem"
4581
- >
4582
- <span class="pf-v5-c-menu__item-main">
4583
- <span
4584
- class="pf-v5-c-menu__item-toggle-icon"
4585
- >
4586
- <i class="fas fa-angle-left"></i>
4587
- </span>
4588
- <span class="pf-v5-c-menu__item-icon">
4589
- <i
4590
- class="fas fa-fw fa-cog"
4591
- aria-hidden="true"
4592
- ></i>
4593
- </span>
4594
- <span
4595
- class="pf-v5-c-menu__item-text"
4596
- >Settings</span>
4597
- </span>
4598
- </button>
4599
- </li>
4600
- <li class="pf-v5-c-divider" role="separator"></li>
4601
- <li
4602
- class="pf-v5-c-menu__list-item"
4603
- role="none"
4604
- >
4605
- <a
4606
- class="pf-v5-c-menu__item"
4607
- href="#"
4608
- role="menuitem"
4609
- >
4610
- <span class="pf-v5-c-menu__item-main">
4611
- <span
4612
- class="pf-v5-c-menu__item-text"
4613
- >Customer support</span>
4614
- </span>
4615
- </a>
4616
- </li>
4617
- <li
4618
- class="pf-v5-c-menu__list-item"
4619
- role="none"
4620
- >
4621
- <a
4622
- class="pf-v5-c-menu__item"
4623
- href="#"
4624
- role="menuitem"
4625
- >
4626
- <span class="pf-v5-c-menu__item-main">
4627
- <span
4628
- class="pf-v5-c-menu__item-text"
4629
- >About</span>
4630
- </span>
4631
- </a>
4632
- </li>
4633
- </ul>
4634
- </div>
4635
- </div>
4636
- </li>
4637
-
4638
- <li class="pf-v5-c-menu__list-item" role="none">
4639
- <button
4640
- class="pf-v5-c-menu__item"
4641
- type="button"
4642
- role="menuitem"
4643
- aria-expanded="false"
4644
- >
4645
- <span class="pf-v5-c-menu__item-main">
4646
- <span class="pf-v5-c-menu__item-icon">
4647
- <i
4648
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
4649
- aria-hidden="true"
4650
- ></i>
4651
- </span>
4652
- <span class="pf-v5-c-menu__item-text">Help</span>
4653
- <span class="pf-v5-c-menu__item-toggle-icon">
4654
- <i class="fas fa-angle-right"></i>
4655
- </span>
4656
- </span>
4657
- </button>
4658
- <div class="pf-v5-c-menu" hidden>
4659
- <div class="pf-v5-c-menu__content">
4660
- <ul class="pf-v5-c-menu__list" role="menu">
4661
- <li
4662
- class="pf-v5-c-menu__list-item pf-m-drill-up"
4663
- role="none"
4664
- >
4665
- <button
4666
- class="pf-v5-c-menu__item"
4667
- type="button"
4668
- role="menuitem"
4669
- >
4670
- <span class="pf-v5-c-menu__item-main">
4671
- <span
4672
- class="pf-v5-c-menu__item-toggle-icon"
4673
- >
4674
- <i class="fas fa-angle-left"></i>
4675
- </span>
4676
- <span class="pf-v5-c-menu__item-icon">
4677
- <i
4678
- class="fas fa-fw fa-pf-v5-pficon pf-v5-pficon-help"
4679
- aria-hidden="true"
4680
- ></i>
4681
- </span>
4682
- <span
4683
- class="pf-v5-c-menu__item-text"
4684
- >Help</span>
4685
- </span>
4686
- </button>
4687
- </li>
4688
- <li class="pf-v5-c-divider" role="separator"></li>
4689
- <li
4690
- class="pf-v5-c-menu__list-item"
4691
- role="none"
4692
- >
4693
- <a
4694
- class="pf-v5-c-menu__item"
4695
- href="#"
4696
- role="menuitem"
4697
- >
4698
- <span class="pf-v5-c-menu__item-main">
4699
- <span
4700
- class="pf-v5-c-menu__item-text"
4701
- >Support options</span>
4702
- </span>
4703
- </a>
4704
- </li>
4705
- <li
4706
- class="pf-v5-c-menu__list-item"
4707
- role="none"
4708
- >
4709
- <a
4710
- class="pf-v5-c-menu__item"
4711
- href="#"
4712
- role="menuitem"
4713
- >
4714
- <span class="pf-v5-c-menu__item-main">
4715
- <span
4716
- class="pf-v5-c-menu__item-text"
4717
- >Open support case</span>
4718
- </span>
4719
- </a>
4720
- </li>
4721
- <li
4722
- class="pf-v5-c-menu__list-item"
4723
- role="none"
4724
- >
4725
- <a
4726
- class="pf-v5-c-menu__item"
4727
- href="#"
4728
- role="menuitem"
4729
- >
4730
- <span class="pf-v5-c-menu__item-main">
4731
- <span
4732
- class="pf-v5-c-menu__item-text"
4733
- >API documentation</span>
4734
- </span>
4735
- </a>
4736
- </li>
4737
- </ul>
4738
- </div>
4739
- </div>
4740
- </li>
4741
-
4742
- <li class="pf-v5-c-menu__list-item" role="none">
4743
- <button
4744
- class="pf-v5-c-menu__item"
4745
- type="button"
4746
- role="menuitem"
4747
- >
4748
- <span class="pf-v5-c-menu__item-main">
4749
- <span class="pf-v5-c-menu__item-icon">
4750
- <i class="fas fa-fw fa-th" aria-hidden="true"></i>
4751
- </span>
4752
- <span
4753
- class="pf-v5-c-menu__item-text"
4754
- >Application launcher</span>
4755
- <span class="pf-v5-c-menu__item-toggle-icon">
4756
- <i class="fas fa-angle-right"></i>
4757
- </span>
4758
- </span>
4759
- </button>
4760
- <div class="pf-v5-c-menu" hidden>
4761
- <div class="pf-v5-c-menu__header">
4762
- <button
4763
- class="pf-v5-c-menu__item"
4764
- type="button"
4765
- role="menuitem"
4766
- >
4767
- <span class="pf-v5-c-menu__item-main">
4768
- <span
4769
- class="pf-v5-c-menu__item-toggle-icon"
4770
- >
4771
- <i class="fas fa-angle-left"></i>
4772
- </span>
4773
- <span class="pf-v5-c-menu__item-icon">
4774
- <i
4775
- class="fas fa-fw fa-th"
4776
- aria-hidden="true"
4777
- ></i>
4778
- </span>
4779
- <span
4780
- class="pf-v5-c-menu__item-text"
4781
- >Application launcher</span>
4782
- </span>
4783
- </button>
4784
- </div>
4785
- <div class="pf-v5-c-menu__search">
4786
- <div class="pf-v5-c-menu__search-input">
4787
- <div class="pf-v5-c-text-input-group">
4788
- <div
4789
- class="pf-v5-c-text-input-group__main pf-m-icon"
4790
- >
4791
- <span
4792
- class="pf-v5-c-text-input-group__text"
4793
- >
4794
- <span
4795
- class="pf-v5-c-text-input-group__icon"
4796
- >
4797
- <i class="fas fa-fw fa-search"></i>
4798
- </span>
4799
- <input
4800
- class="pf-v5-c-text-input-group__text-input"
4801
- type="text"
4802
- placeholder="Search"
4803
- value
4804
- aria-label="Search input"
4805
- />
4806
- </span>
4807
- </div>
4808
- </div>
4809
- </div>
4810
- </div>
4811
- <hr class="pf-v5-c-divider" />
4812
- <section class="pf-v5-c-menu__group">
4813
- <h1 class="pf-v5-c-menu__group-title">Favorites</h1>
4814
- <ul class="pf-v5-c-menu__list" role="menu">
4815
- <li
4816
- class="pf-v5-c-menu__list-item"
4817
- role="none"
4818
- >
4819
- <a
4820
- class="pf-v5-c-menu__item"
4821
- href="#"
4822
- role="menuitem"
4823
- >
4824
- <span class="pf-v5-c-menu__item-main">
4825
- <span
4826
- class="pf-v5-c-menu__item-text"
4827
- >Link 1</span>
4828
- </span>
4829
- </a>
4830
- <button
4831
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
4832
- type="button"
4833
- aria-label="Starred"
4834
- >
4835
- <span
4836
- class="pf-v5-c-menu__item-action-icon"
4837
- >
4838
- <i
4839
- class="fas fa-star"
4840
- aria-hidden="true"
4841
- ></i>
4842
- </span>
4843
- </button>
4844
- </li>
4845
- <li
4846
- class="pf-v5-c-menu__list-item"
4847
- role="none"
4848
- >
4849
- <a
4850
- class="pf-v5-c-menu__item"
4851
- href="#"
4852
- role="menuitem"
4853
- target="_blank"
4854
- >
4855
- <span class="pf-v5-c-menu__item-main">
4856
- <span
4857
- class="pf-v5-c-menu__item-text"
4858
- >Link 2</span>
4859
- <span
4860
- class="pf-v5-c-menu__item-external-icon"
4861
- >
4862
- <i
4863
- class="fas fa-external-link-alt"
4864
- aria-hidden="true"
4865
- ></i>
4866
- </span>
4867
- <span
4868
- class="pf-v5-screen-reader"
4869
- >(opens new window)</span>
4870
- </span>
4871
- </a>
4872
- <button
4873
- class="pf-v5-c-menu__item-action pf-m-favorite"
4874
- type="button"
4875
- aria-label="Not starred"
4876
- >
4877
- <span
4878
- class="pf-v5-c-menu__item-action-icon"
4879
- >
4880
- <i
4881
- class="fas fa-star"
4882
- aria-hidden="true"
4883
- ></i>
4884
- </span>
4885
- </button>
4886
- </li>
4887
- </ul>
4888
- </section>
4889
- <hr class="pf-v5-c-divider" />
4890
- <section class="pf-v5-c-menu__group">
4891
- <h1 class="pf-v5-c-menu__group-title">Group 1</h1>
4892
- <ul class="pf-v5-c-menu__list" role="menu">
4893
- <li
4894
- class="pf-v5-c-menu__list-item"
4895
- role="none"
4896
- >
4897
- <a
4898
- class="pf-v5-c-menu__item"
4899
- href="#"
4900
- role="menuitem"
4901
- >
4902
- <span class="pf-v5-c-menu__item-main">
4903
- <span
4904
- class="pf-v5-c-menu__item-text"
4905
- >Link 1</span>
4906
- </span>
4907
- </a>
4908
- <button
4909
- class="pf-v5-c-menu__item-action pf-m-favorite"
4910
- type="button"
4911
- aria-label="Not starred"
4912
- >
4913
- <span
4914
- class="pf-v5-c-menu__item-action-icon"
4915
- >
4916
- <i
4917
- class="fas fa-star"
4918
- aria-hidden="true"
4919
- ></i>
4920
- </span>
4921
- </button>
4922
- </li>
4923
- <li
4924
- class="pf-v5-c-menu__list-item"
4925
- role="none"
4926
- >
4927
- <a
4928
- class="pf-v5-c-menu__item"
4929
- href="#"
4930
- role="menuitem"
4931
- target="_blank"
4932
- >
4933
- <span class="pf-v5-c-menu__item-main">
4934
- <span
4935
- class="pf-v5-c-menu__item-text"
4936
- >Link 2</span>
4937
- <span
4938
- class="pf-v5-c-menu__item-external-icon"
4939
- >
4940
- <i
4941
- class="fas fa-external-link-alt"
4942
- aria-hidden="true"
4943
- ></i>
4944
- </span>
4945
- <span
4946
- class="pf-v5-screen-reader"
4947
- >(opens new window)</span>
4948
- </span>
4949
- </a>
4950
- <button
4951
- class="pf-v5-c-menu__item-action pf-m-favorite pf-m-favorited"
4952
- type="button"
4953
- aria-label="Starred"
4954
- >
4955
- <span
4956
- class="pf-v5-c-menu__item-action-icon"
4957
- >
4958
- <i
4959
- class="fas fa-star"
4960
- aria-hidden="true"
4961
- ></i>
4962
- </span>
4963
- </button>
4964
- </li>
4965
- </ul>
4966
- </section>
4967
- </div>
4968
- </li>
4969
- </ul>
4970
- </section>
4971
- </div>
4972
- </div>
4973
1339
  </div>
4974
1340
  </div>
4975
- </div>
4976
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
4977
- <div
4978
- class="pf-v5-c-dropdown pf-m-full-height"
4979
- style="--pf-v5-c-dropdown--MaxWidth: 20ch;"
4980
- >
1341
+ <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
4981
1342
  <button
4982
- class="pf-v5-c-dropdown__toggle"
4983
- id="drawer-expanded-jump-links-masthead-profile-button"
4984
- aria-expanded="false"
1343
+ class="pf-v5-c-menu-toggle pf-m-plain"
4985
1344
  type="button"
1345
+ aria-expanded="false"
1346
+ aria-label="Actions"
4986
1347
  >
4987
- <span class="pf-v5-c-dropdown__toggle-image">
4988
- <img
4989
- class="pf-v5-c-avatar"
4990
- alt="Avatar image"
4991
- src="/assets/images/img_avatar-light.svg"
4992
- />
4993
- </span>
4994
- <span class="pf-v5-c-dropdown__toggle-text">Ned Username</span>
4995
- <span class="pf-v5-c-dropdown__toggle-icon">
4996
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4997
- </span>
1348
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4998
1349
  </button>
4999
- <div class="pf-v5-c-dropdown__menu" hidden>
5000
- <section class="pf-v5-c-dropdown__group">
5001
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
5002
- <div class="pf-v5-u-font-size-sm">Account number:</div>
5003
- <div>123456789</div>
5004
- </div>
5005
- <div class="pf-v5-c-dropdown__menu-item pf-m-text">
5006
- <div class="pf-v5-u-font-size-sm">Username:</div>
5007
- <div>mshaksho@redhat.com</div>
5008
- </div>
5009
- </section>
5010
- <hr class="pf-v5-c-divider" />
5011
- <section class="pf-v5-c-dropdown__group">
5012
- <ul>
5013
- <li>
5014
- <a
5015
- class="pf-v5-c-dropdown__menu-item"
5016
- href="#"
5017
- >My profile</a>
5018
- </li>
5019
- <li>
5020
- <a
5021
- class="pf-v5-c-dropdown__menu-item"
5022
- href="#"
5023
- >User management</a>
5024
- </li>
5025
- <li>
5026
- <a class="pf-v5-c-dropdown__menu-item" href="#">Logout</a>
5027
- </li>
5028
- </ul>
5029
- </section>
5030
- </div>
5031
1350
  </div>
5032
1351
  </div>
1352
+ <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1353
+ <button
1354
+ class="pf-v5-c-menu-toggle pf-m-full-height"
1355
+ type="button"
1356
+ aria-expanded="false"
1357
+ >
1358
+ <span class="pf-v5-c-menu-toggle__icon">
1359
+ <img
1360
+ class="pf-v5-c-avatar"
1361
+ alt="Avatar image"
1362
+ src="/assets/images/img_avatar-light.svg"
1363
+ />
1364
+ </span>
1365
+ <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1366
+ <span class="pf-v5-c-menu-toggle__controls">
1367
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1368
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1369
+ </span>
1370
+ </span>
1371
+ </button>
1372
+ </div>
5033
1373
  </div>
5034
1374
  </div>
5035
1375
  </div>