npm - @rio-cloud/uikit-mcp - Versions diffs - 1.0.1 → 1.1.1 - Mend

@rio-cloud/uikit-mcp 1.0.1 → 1.1.1

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 (388) hide show

package/README.md +75 -39
package/dist/doc-metadata.json +1872 -0
package/dist/docs/components/accentBar.md +582 -0
package/dist/docs/components/activity.md +330 -0
package/dist/docs/components/animatedNumber.md +88 -0
package/dist/docs/components/animatedTextReveal.md +381 -0
package/dist/docs/components/animations.md +459 -0
package/dist/docs/components/appHeader.md +737 -0
package/dist/docs/components/appLayout.md +2033 -0
package/dist/docs/components/appNavigationBar.md +274 -0
package/dist/docs/components/areaCharts.md +828 -0
package/dist/docs/components/aspectRatioPlaceholder.md +106 -0
package/dist/docs/components/assetTree.md +3132 -0
package/dist/docs/components/autosuggests.md +1177 -0
package/dist/docs/components/avatar.md +206 -0
package/dist/docs/components/banner.md +668 -0
package/dist/docs/components/barCharts.md +2765 -0
package/dist/docs/components/barList.md +517 -0
package/dist/docs/components/basicMap.md +167 -0
package/dist/docs/components/bottomSheet.md +721 -0
package/dist/docs/components/button.md +775 -0
package/dist/docs/components/buttonToolbar.md +134 -0
package/dist/docs/components/calendarStripe.md +533 -0
package/dist/docs/components/card.md +86 -0
package/dist/docs/components/carousel.md +128 -0
package/dist/docs/components/chartColors.md +716 -0
package/dist/docs/components/chartsGettingStarted.md +28 -0
package/dist/docs/components/chat.md +935 -0
package/dist/docs/components/checkbox.md +996 -0
package/dist/docs/components/clearableInput.md +806 -0
package/dist/docs/components/collapse.md +189 -0
package/dist/docs/components/composedCharts.md +424 -0
package/dist/docs/components/contentLoader.md +674 -0
package/dist/docs/components/dataTabs.md +1251 -0
package/dist/docs/components/datepickers.md +2543 -0
package/dist/docs/components/dialogs.md +2244 -0
package/dist/docs/components/divider.md +219 -0
package/dist/docs/components/dropdowns.md +17538 -0
package/dist/docs/components/editableContent.md +1127 -0
package/dist/docs/components/expander.md +970 -0
package/dist/docs/components/fade.md +836 -0
package/dist/docs/components/fadeExpander.md +180 -0
package/dist/docs/components/fadeUp.md +396 -0
package/dist/docs/components/feedback.md +758 -0
package/dist/docs/components/filePickers.md +370 -0
package/dist/docs/components/formLabel.md +251 -0
package/dist/docs/components/fullscreenMap.md +10 -0
package/dist/docs/components/groupedItemList.md +1001 -0
package/dist/docs/components/iconList.md +306 -0
package/dist/docs/components/imagePreloader.md +167 -0
package/dist/docs/components/labeledElement.md +115 -0
package/dist/docs/components/licensePlate.md +412 -0
package/dist/docs/components/lineCharts.md +2014 -0
package/dist/docs/components/listMenu.md +392 -0
package/dist/docs/components/loadMore.md +219 -0
package/dist/docs/components/mainNavigation.md +129 -0
package/dist/docs/components/mapCircle.md +93 -0
package/dist/docs/components/mapCluster.md +337 -0
package/dist/docs/components/mapContext.md +284 -0
package/dist/docs/components/mapDraggableMarker.md +150 -0
package/dist/docs/components/mapGettingStarted.md +39 -0
package/dist/docs/components/mapInfoBubble.md +135 -0
package/dist/docs/components/mapLayerGroup.md +94 -0
package/dist/docs/components/mapMarker.md +1814 -0
package/dist/docs/components/mapPolygon.md +959 -0
package/dist/docs/components/mapRoute.md +3816 -0
package/dist/docs/components/mapRouteGenerator.md +6 -0
package/dist/docs/components/mapSettings.md +1040 -0
package/dist/docs/components/mapUtils.md +132 -0
package/dist/docs/components/multiselects.md +1921 -0
package/dist/docs/components/noData.md +210 -0
package/dist/docs/components/notifications.md +314 -0
package/dist/docs/components/numbercontrol.md +706 -0
package/dist/docs/components/onboarding.md +297 -0
package/dist/docs/components/page.md +241 -0
package/dist/docs/components/pager.md +133 -0
package/dist/docs/components/pieCharts.md +1284 -0
package/dist/docs/components/popover.md +222 -0
package/dist/docs/components/position.md +50 -0
package/dist/docs/components/radialBarCharts.md +3663 -0
package/dist/docs/components/radiobutton.md +1271 -0
package/dist/docs/components/releaseNotes.md +135 -0
package/dist/docs/components/resizer.md +162 -0
package/dist/docs/components/responsiveColumnStripe.md +435 -0
package/dist/docs/components/responsiveVideo.md +71 -0
package/dist/docs/components/rioglyph.md +331 -0
package/dist/docs/components/rules.md +965 -0
package/dist/docs/components/saveableInput.md +1721 -0
package/dist/docs/components/selects.md +1993 -0
package/dist/docs/components/sidebar.md +332 -0
package/dist/docs/components/sliders.md +376 -0
package/dist/docs/components/smoothScrollbars.md +1180 -0
package/dist/docs/components/spinners.md +506 -0
package/dist/docs/components/states.md +1176 -0
package/dist/docs/components/statsWidgets.md +636 -0
package/dist/docs/components/statusBar.md +644 -0
package/dist/docs/components/stepButton.md +61 -0
package/dist/docs/components/steppedProgressBars.md +1064 -0
package/dist/docs/components/subNavigation.md +470 -0
package/dist/docs/components/supportMarker.md +115 -0
package/dist/docs/components/svgImage.md +248 -0
package/dist/docs/components/switch.md +554 -0
package/dist/docs/components/tables.md +8 -0
package/dist/docs/components/tagManager.md +476 -0
package/dist/docs/components/tags.md +785 -0
package/dist/docs/components/teaser.md +925 -0
package/dist/docs/components/timeline.md +514 -0
package/dist/docs/components/timepicker.md +262 -0
package/dist/docs/components/toggleButton.md +178 -0
package/dist/docs/components/tooltip.md +454 -0
package/dist/docs/components/virtualList.md +486 -0
package/dist/docs/foundations.md +20901 -0
package/dist/docs/start/changelog.md +714 -0
package/dist/docs/start/goodtoknow.md +14 -0
package/dist/docs/start/guidelines/color-combinations.md +678 -0
package/dist/docs/start/guidelines/custom-css.md +42 -0
package/dist/docs/start/guidelines/custom-rioglyph.md +35 -0
package/dist/docs/start/guidelines/formatting.md +587 -0
package/dist/docs/start/guidelines/iframe.md +323 -0
package/dist/docs/start/guidelines/obfuscate-data.md +30 -0
package/dist/docs/start/guidelines/print-css.md +36 -0
package/dist/docs/start/guidelines/spinner.md +710 -0
package/dist/docs/start/guidelines/supported-browsers.md +10 -0
package/dist/docs/start/guidelines/writing.md +635 -0
package/dist/docs/start/howto.md +187 -0
package/dist/docs/start/intro.md +43 -0
package/dist/docs/start/responsiveness.md +98 -0
package/dist/docs/templates/common-table.md +1111 -0
package/dist/docs/templates/detail-views.md +942 -0
package/dist/docs/templates/expandable-details.md +228 -0
package/dist/docs/templates/feature-cards.md +549 -0
package/dist/docs/templates/form-summary.md +199 -0
package/dist/docs/templates/form-toggle.md +367 -0
package/dist/docs/templates/list-blocks.md +1021 -0
package/dist/docs/templates/loading-progress.md +109 -0
package/dist/docs/templates/options-panel.md +152 -0
package/dist/docs/templates/panel-variants.md +164 -0
package/dist/docs/templates/progress-cards.md +607 -0
package/dist/docs/templates/progress-success.md +142 -0
package/dist/docs/templates/settings-form.md +434 -0
package/dist/docs/templates/stats-blocks.md +1381 -0
package/dist/docs/templates/table-panel.md +184 -0
package/dist/docs/templates/table-row-animation.md +317 -0
package/dist/docs/templates/usage-cards.md +227 -0
package/dist/docs/utilities/deviceUtils.md +123 -0
package/dist/docs/utilities/featureToggles.md +90 -0
package/dist/docs/utilities/fuelTypeUtils.md +186 -0
package/dist/docs/utilities/routeUtils.md +138 -0
package/dist/docs/utilities/useAfterMount.md +66 -0
package/dist/docs/utilities/useAutoAnimate.md +193 -0
package/dist/docs/utilities/useAverage.md +95 -0
package/dist/docs/utilities/useClickOutside.md +61 -0
package/dist/docs/utilities/useClipboard.md +93 -0
package/dist/docs/utilities/useCount.md +178 -0
package/dist/docs/utilities/useDarkMode.md +49 -0
package/dist/docs/utilities/useDebugInfo.md +126 -0
package/dist/docs/utilities/useEffectOnce.md +58 -0
package/dist/docs/utilities/useElapsedTime.md +58 -0
package/dist/docs/utilities/useElementSize.md +71 -0
package/dist/docs/utilities/useEsc.md +58 -0
package/dist/docs/utilities/useEvent.md +64 -0
package/dist/docs/utilities/useFocusTrap.md +85 -0
package/dist/docs/utilities/useFullscreen.md +198 -0
package/dist/docs/utilities/useHover.md +55 -0
package/dist/docs/utilities/useIncomingPostMessages.md +237 -0
package/dist/docs/utilities/useInterval.md +85 -0
package/dist/docs/utilities/useIsFocusWithin.md +114 -0
package/dist/docs/utilities/useKey.md +151 -0
package/dist/docs/utilities/useLocalStorage.md +91 -0
package/dist/docs/utilities/useLocationSuggestions.md +114 -0
package/dist/docs/utilities/useMax.md +62 -0
package/dist/docs/utilities/useMin.md +78 -0
package/dist/docs/utilities/useMutationObserver.md +113 -0
package/dist/docs/utilities/useOnScreen.md +138 -0
package/dist/docs/utilities/useOnlineStatus.md +49 -0
package/dist/docs/utilities/usePostMessage.md +117 -0
package/dist/docs/utilities/usePostMessageSender.md +257 -0
package/dist/docs/utilities/usePrevious.md +101 -0
package/dist/docs/utilities/useResizeObserver.md +151 -0
package/dist/docs/utilities/useScrollPosition.md +252 -0
package/dist/docs/utilities/useSearch.md +228 -0
package/dist/docs/utilities/useSorting.md +389 -0
package/dist/docs/utilities/useStateWithValidation.md +83 -0
package/dist/docs/utilities/useSum.md +155 -0
package/dist/docs/utilities/useTableExport.md +404 -0
package/dist/docs/utilities/useTableSelection.md +1120 -0
package/dist/docs/utilities/useTimeout.md +55 -0
package/dist/docs/utilities/useToggle.md +115 -0
package/dist/docs/utilities/useWindowResize.md +70 -0
package/dist/index.mjs +271 -0
package/dist/search-synonyms.json +134 -0
package/dist/version.json +4 -0
package/package.json +23 -19
package/bin/uikit-mcp.mjs +0 -23
package/data/pages/Components/components/accentbar.json +0 -207
package/data/pages/Components/components/activity.json +0 -87
package/data/pages/Components/components/animatednumber.json +0 -99
package/data/pages/Components/components/animations.json +0 -87
package/data/pages/Components/components/appheader.json +0 -291
package/data/pages/Components/components/applayout.json +0 -1198
package/data/pages/Components/components/appnavigationbar.json +0 -327
package/data/pages/Components/components/areacharts.json +0 -563
package/data/pages/Components/components/aspectratioplaceholder.json +0 -75
package/data/pages/Components/components/assettree.json +0 -3080
package/data/pages/Components/components/autosuggests.json +0 -710
package/data/pages/Components/components/avatar.json +0 -157
package/data/pages/Components/components/banner.json +0 -599
package/data/pages/Components/components/barcharts.json +0 -1507
package/data/pages/Components/components/barlist.json +0 -223
package/data/pages/Components/components/basicmap.json +0 -68
package/data/pages/Components/components/bottomsheet.json +0 -601
package/data/pages/Components/components/button.json +0 -583
package/data/pages/Components/components/buttontoolbar.json +0 -63
package/data/pages/Components/components/calendarstripe.json +0 -235
package/data/pages/Components/components/card.json +0 -69
package/data/pages/Components/components/carousel.json +0 -39
package/data/pages/Components/components/chartcolors.json +0 -34
package/data/pages/Components/components/chartsgettingstarted.json +0 -32
package/data/pages/Components/components/chat.json +0 -39
package/data/pages/Components/components/checkbox.json +0 -847
package/data/pages/Components/components/clearableinput.json +0 -789
package/data/pages/Components/components/collapse.json +0 -175
package/data/pages/Components/components/composedcharts.json +0 -159
package/data/pages/Components/components/contentloader.json +0 -233
package/data/pages/Components/components/datatabs.json +0 -680
package/data/pages/Components/components/datepickers.json +0 -287
package/data/pages/Components/components/dialogs.json +0 -1492
package/data/pages/Components/components/divider.json +0 -93
package/data/pages/Components/components/dropdowns.json +0 -936
package/data/pages/Components/components/editablecontent.json +0 -1117
package/data/pages/Components/components/expander.json +0 -377
package/data/pages/Components/components/fade.json +0 -403
package/data/pages/Components/components/fadeexpander.json +0 -75
package/data/pages/Components/components/fadeup.json +0 -127
package/data/pages/Components/components/feedback.json +0 -269
package/data/pages/Components/components/filepickers.json +0 -269
package/data/pages/Components/components/formlabel.json +0 -115
package/data/pages/Components/components/fullscreenmap.json +0 -22
package/data/pages/Components/components/groupeditemlist.json +0 -323
package/data/pages/Components/components/iconlist.json +0 -45
package/data/pages/Components/components/imagepreloader.json +0 -81
package/data/pages/Components/components/labeledelement.json +0 -75
package/data/pages/Components/components/licenseplate.json +0 -69
package/data/pages/Components/components/linecharts.json +0 -987
package/data/pages/Components/components/listmenu.json +0 -313
package/data/pages/Components/components/loadmore.json +0 -175
package/data/pages/Components/components/mainnavigation.json +0 -39
package/data/pages/Components/components/mapcircle.json +0 -34
package/data/pages/Components/components/mapcluster.json +0 -51
package/data/pages/Components/components/mapcontext.json +0 -105
package/data/pages/Components/components/mapdraggablemarker.json +0 -34
package/data/pages/Components/components/mapgettingstarted.json +0 -27
package/data/pages/Components/components/mapgroup.json +0 -1198
package/data/pages/Components/components/mapinfobubble.json +0 -34
package/data/pages/Components/components/maplayergroup.json +0 -34
package/data/pages/Components/components/mapmarker.json +0 -700
package/data/pages/Components/components/mappolygon.json +0 -45
package/data/pages/Components/components/maproute.json +0 -623
package/data/pages/Components/components/maproutegenerator.json +0 -16
package/data/pages/Components/components/mapsettings.json +0 -51
package/data/pages/Components/components/maputils.json +0 -34
package/data/pages/Components/components/multiselects.json +0 -1451
package/data/pages/Components/components/nodata.json +0 -139
package/data/pages/Components/components/notifications.json +0 -65
package/data/pages/Components/components/numbercontrol.json +0 -301
package/data/pages/Components/components/onboarding.json +0 -302
package/data/pages/Components/components/page.json +0 -197
package/data/pages/Components/components/pager.json +0 -93
package/data/pages/Components/components/piecharts.json +0 -731
package/data/pages/Components/components/popover.json +0 -251
package/data/pages/Components/components/position.json +0 -69
package/data/pages/Components/components/radialbarcharts.json +0 -1304
package/data/pages/Components/components/radiobutton.json +0 -1105
package/data/pages/Components/components/releasenotes.json +0 -44
package/data/pages/Components/components/resizer.json +0 -93
package/data/pages/Components/components/responsivecolumnstripe.json +0 -123
package/data/pages/Components/components/responsivevideo.json +0 -75
package/data/pages/Components/components/rioglyph.json +0 -93
package/data/pages/Components/components/rules.json +0 -410
package/data/pages/Components/components/saveableinput.json +0 -703
package/data/pages/Components/components/selects.json +0 -701
package/data/pages/Components/components/sidebar.json +0 -243
package/data/pages/Components/components/sliders.json +0 -235
package/data/pages/Components/components/smoothscrollbars.json +0 -335
package/data/pages/Components/components/spinners.json +0 -343
package/data/pages/Components/components/states.json +0 -1705
package/data/pages/Components/components/statswidgets.json +0 -314
package/data/pages/Components/components/statusbar.json +0 -177
package/data/pages/Components/components/stepbutton.json +0 -57
package/data/pages/Components/components/steppedprogressbars.json +0 -417
package/data/pages/Components/components/subnavigation.json +0 -107
package/data/pages/Components/components/supportmarker.json +0 -45
package/data/pages/Components/components/svgimage.json +0 -81
package/data/pages/Components/components/switch.json +0 -111
package/data/pages/Components/components/tables.json +0 -144
package/data/pages/Components/components/tagmanager.json +0 -86
package/data/pages/Components/components/tags.json +0 -146
package/data/pages/Components/components/teaser.json +0 -188
package/data/pages/Components/components/timeline.json +0 -45
package/data/pages/Components/components/timepicker.json +0 -163
package/data/pages/Components/components/togglebutton.json +0 -247
package/data/pages/Components/components/tooltip.json +0 -270
package/data/pages/Components/components/virtuallist.json +0 -175
package/data/pages/Foundations/foundations.json +0 -2475
package/data/pages/Getting-started/start/changelog.json +0 -22
package/data/pages/Getting-started/start/goodtoknow.json +0 -32
package/data/pages/Getting-started/start/guidelines/color-combinations.json +0 -58
package/data/pages/Getting-started/start/guidelines/custom-css.json +0 -27
package/data/pages/Getting-started/start/guidelines/custom-rioglyph.json +0 -22
package/data/pages/Getting-started/start/guidelines/formatting.json +0 -97
package/data/pages/Getting-started/start/guidelines/iframe.json +0 -93
package/data/pages/Getting-started/start/guidelines/obfuscate-data.json +0 -22
package/data/pages/Getting-started/start/guidelines/print-css.json +0 -37
package/data/pages/Getting-started/start/guidelines/spinner.json +0 -144
package/data/pages/Getting-started/start/guidelines/supported-browsers.json +0 -22
package/data/pages/Getting-started/start/guidelines/writing.json +0 -242
package/data/pages/Getting-started/start/howto.json +0 -72
package/data/pages/Getting-started/start/intro.json +0 -37
package/data/pages/Getting-started/start/responsiveness.json +0 -52
package/data/pages/Templates/templates/common-table.json +0 -39
package/data/pages/Templates/templates/detail-views.json +0 -71
package/data/pages/Templates/templates/expandable-details.json +0 -39
package/data/pages/Templates/templates/feature-cards.json +0 -103
package/data/pages/Templates/templates/form-summary.json +0 -39
package/data/pages/Templates/templates/form-toggle.json +0 -39
package/data/pages/Templates/templates/list-blocks.json +0 -119
package/data/pages/Templates/templates/loading-progress.json +0 -39
package/data/pages/Templates/templates/options-panel.json +0 -39
package/data/pages/Templates/templates/panel-variants.json +0 -39
package/data/pages/Templates/templates/progress-cards.json +0 -71
package/data/pages/Templates/templates/progress-success.json +0 -39
package/data/pages/Templates/templates/settings-form.json +0 -39
package/data/pages/Templates/templates/stats-blocks.json +0 -135
package/data/pages/Templates/templates/table-panel.json +0 -39
package/data/pages/Templates/templates/table-row-animation.json +0 -39
package/data/pages/Templates/templates/usage-cards.json +0 -39
package/data/pages/Utilities/utilities/deviceutils.json +0 -39
package/data/pages/Utilities/utilities/featuretoggles.json +0 -42
package/data/pages/Utilities/utilities/fueltypeutils.json +0 -118
package/data/pages/Utilities/utilities/routeutils.json +0 -34
package/data/pages/Utilities/utilities/useaftermount.json +0 -63
package/data/pages/Utilities/utilities/useaverage.json +0 -86
package/data/pages/Utilities/utilities/useclickoutside.json +0 -69
package/data/pages/Utilities/utilities/useclipboard.json +0 -57
package/data/pages/Utilities/utilities/usecount.json +0 -92
package/data/pages/Utilities/utilities/usedarkmode.json +0 -50
package/data/pages/Utilities/utilities/usedebuginfo.json +0 -63
package/data/pages/Utilities/utilities/useeffectonce.json +0 -57
package/data/pages/Utilities/utilities/useelapsedtime.json +0 -57
package/data/pages/Utilities/utilities/useelementsize.json +0 -63
package/data/pages/Utilities/utilities/useesc.json +0 -57
package/data/pages/Utilities/utilities/useevent.json +0 -75
package/data/pages/Utilities/utilities/usefocustrap.json +0 -57
package/data/pages/Utilities/utilities/usefullscreen.json +0 -197
package/data/pages/Utilities/utilities/usehover.json +0 -57
package/data/pages/Utilities/utilities/useinterval.json +0 -63
package/data/pages/Utilities/utilities/useisfocuswithin.json +0 -75
package/data/pages/Utilities/utilities/usekey.json +0 -75
package/data/pages/Utilities/utilities/uselocalstorage.json +0 -69
package/data/pages/Utilities/utilities/uselocationsuggestions.json +0 -110
package/data/pages/Utilities/utilities/usemax.json +0 -86
package/data/pages/Utilities/utilities/usemin.json +0 -86
package/data/pages/Utilities/utilities/usemutationobserver.json +0 -69
package/data/pages/Utilities/utilities/useonlinestatus.json +0 -39
package/data/pages/Utilities/utilities/useonscreen.json +0 -63
package/data/pages/Utilities/utilities/usepostmessage.json +0 -80
package/data/pages/Utilities/utilities/useprevious.json +0 -63
package/data/pages/Utilities/utilities/useresizeobserver.json +0 -65
package/data/pages/Utilities/utilities/usescrollposition.json +0 -103
package/data/pages/Utilities/utilities/usesearch.json +0 -197
package/data/pages/Utilities/utilities/usesorting.json +0 -139
package/data/pages/Utilities/utilities/usestatewithvalidation.json +0 -69
package/data/pages/Utilities/utilities/usesum.json +0 -86
package/data/pages/Utilities/utilities/usetableexport.json +0 -87
package/data/pages/Utilities/utilities/usetableselection.json +0 -311
package/data/pages/Utilities/utilities/usetimeout.json +0 -63
package/data/pages/Utilities/utilities/usetoggle.json +0 -75
package/data/pages/Utilities/utilities/usewindowresize.json +0 -63
package/data/version.json +0 -4
package/docs/content-schema.md +0 -147
package/docs/navigation-inventory.json +0 -1310
package/docs/search-synonyms.json +0 -43
package/server/index.mjs +0 -268
package/server/lib/load-docs.mjs +0 -48
package/server/lib/normalise-doc.mjs +0 -220
package/server/lib/render-markdown.mjs +0 -82
package/server/lib/search-index.mjs +0 -49
package/server/lib/types.js +0 -99

package/dist/docs/components/appLayout.md ADDED Viewed

@@ -0,0 +1,2033 @@
+# ApplicationLayout
+*Category:* Components
+*Section:* Application
+*Source:* https://uikit.developers.rio.cloud/#components/appLayout
+*Captured:* 2025-12-12T14:20:11.441Z
+The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar
+## ApplicationLayout
+The ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.
+> Note: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragment> instead
+> Note: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <body> node.
+## Default example
+### Example: Example 1
+RIO Service
+Navigation 1
+Navigation 2
+Navigation 3
+#### Summary
+RIO Service
+Navigation 1
+Navigation 2
+Navigation 3
+#### React (tsx)
+```tsx
+import { NavLink } from 'react-router-dom';
+import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
+import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
+const navItems = [
+    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },
+    {
+        key: '2',
+        route: (
+            <NavLink to='/2' onClick={event => event.preventDefault()}>
+                Navigation 2
+            </NavLink>
+        ),
+    },
+    {
+        key: '3',
+        route: (
+            <NavLink to='/3' onClick={event => event.preventDefault()}>
+                Navigation 3
+            </NavLink>
+        ),
+    },
+];
+export default () => (
+    <ApplicationLayout className='bg-lighter'>
+        <ApplicationLayout.Header>
+            <ApplicationHeader label='RIO Service' navItems={navItems} />
+        </ApplicationLayout.Header>
+        <ApplicationLayout.Body className='uikitDemo'>
+            <div className='dummy-class' />
+        </ApplicationLayout.Body>
+    </ApplicationLayout>
+);
+```
+#### HTML (html)
+```html
+<div class="ApplicationLayout bg-lighter" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
+    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
+        <nav class="ApplicationHeader user-select-none">
+            <div class="navbar-header">
+                <span class="navbar-brand home-icon">
+                </span>
+            </div>
+            <ul class="ModuleNavigation AppMenu user-select-none pointer-events-none">
+                <li class="dropdown">
+                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive" role="button" id="basic-nav-dropdown">
+                        <span>RIO Service</span>
+                    </a>
+                </li>
+            </ul>
+            <ul class="SubmoduleNavigation nav">
+                <li class="submodule " data-nav-item-key="1">
+                    <a aria-current="page" class="active" href="#components/appLayout">Navigation 1</a>
+                </li>
+                <li class="submodule " data-nav-item-key="2">
+                    <a href="#2">Navigation 2</a>
+                </li>
+                <li class="submodule " data-nav-item-key="3">
+                    <a href="#3">Navigation 3</a>
+                </li>
+            </ul>
+            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
+            </ul>
+        </nav>
+    </div>
+    <div class="ApplicationLayoutBody uikitDemo">
+        <div class="module-content-wrapper">
+            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
+                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
+                    <div class="scrollbar-content-wrapper">
+                        <div class="scrollbar-content">
+                            <div class="dummy-class">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
+                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
+                    </div>
+                </div>
+                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
+                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <span class="scroll-to-top">
+            <button type="button" class="btn btn-primary btn-icon-only">
+                <span class="rioglyph rioglyph-arrow-up">
+                </span>
+            </button>
+        </span>
+    </div>
+</div>
+```
+#### Props: ApplicationLayout
+### ApplicationLayout
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutHeader
+### ApplicationLayoutHeader
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutSidebar
+### ApplicationLayoutSidebar
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | React.ref | — | A React ref function assigned to the wrapper element. |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutBody
+### ApplicationLayoutBody
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| innerClassName | String | — | Additional class names that are added to the inner module-content component. |
+| children | any | — | Any component given to the layout components will be rendered |
+| navigation | any | — | The ApplicationLayoutBodyNavigation component. |
+| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |
+| bottomBar | Node \| String | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |
+| banner | any | — | The ApplicationLayoutBodyBanner component. |
+#### Props: ApplicationLayoutBodyNavigation
+### ApplicationLayoutBodyNavigation
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
+#### Props: ApplicationLayoutBodyBottomBar
+### ApplicationLayoutBodyBottomBar
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |
+| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+#### Props: ApplicationLayoutBodyBanner
+### ApplicationLayoutBodyBanner
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| backgroundColor | String | bg-primary | One of our bg-color utility classes. |
+| textColor | string | text-color-white | One of our text-color utility classes. |
+| isSticky | Boolean | false | Sticky while scrolling. |
+## SubNavigation example
+### Example: Example 2
+RIO Service
+Navigation 1
+Navigation 2
+Navigation 3
+Subnavigation 1
+Subnavigation 2
+Subnavigation 3
+#### Summary
+RIO Service
+Navigation 1
+Navigation 2
+Navigation 3
+Subnavigation 1
+Subnavigation 2
+Subnavigation 3
+#### React (tsx)
+```tsx
+import { useState, useEffect } from 'react';
+import { NavLink } from 'react-router-dom';
+import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
+import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
+import ApplicationLayoutBodyNavigation from '@rio-cloud/rio-uikit/ApplicationLayoutBodyNavigation';
+import SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';
+import useResizeObserver from '@rio-cloud/rio-uikit/useResizeObserver';
+import { SCREEN_MD } from '@rio-cloud/rio-uikit/DeviceUtils';
+export default () => {
+    const currentLocation = window.location.hash.replace('#', '/');
+    const navItems = [
+        { key: '1', route: <NavLink to={currentLocation}>Navigation 1</NavLink> },
+        {
+            key: '2',
+            route: (
+                <NavLink to='/2' onClick={event => event.preventDefault()}>
+                    Navigation 2
+                </NavLink>
+            ),
+        },
+        {
+            key: '3',
+            route: (
+                <NavLink to='/3' onClick={event => event.preventDefault()}>
+                    Navigation 3
+                </NavLink>
+            ),
+        },
+    ];
+    // Listen for resize changes of the target element defined by the ref
+    // Note: this is for demo purpose only when resizing the demo playground.
+    // The SubNavigation component handles this case internally
+    const { ref, isMobile } = useResizer();
+    const bodyNavigationClasses = isMobile ? '' : 'has-offset';
+    return (
+        <ApplicationLayout className='bg-lighter' layoutRef={ref}>
+            <ApplicationLayout.Header>
+                <ApplicationHeader label='RIO Service' navItems={navItems} />
+            </ApplicationLayout.Header>
+            <ApplicationLayout.Body
+                className='uikitDemo'
+                navigation={
+                    <ApplicationLayoutBodyNavigation className={bodyNavigationClasses}>
+                        <SubNavigation
+                            navItems={[
+                                {
+                                    key: '1',
+                                    route: <NavLink to={currentLocation}>Subnavigation 1</NavLink>,
+                                },
+                                {
+                                    key: '2',
+                                    route: (
+                                        <NavLink to='/2' onClick={event => event.preventDefault()}>
+                                            Subnavigation 2
+                                        </NavLink>
+                                    ),
+                                },
+                                {
+                                    key: '3',
+                                    route: (
+                                        <NavLink to='/3' onClick={event => event.preventDefault()}>
+                                            Subnavigation 3
+                                        </NavLink>
+                                    ),
+                                },
+                            ]}
+                        />
+                    </ApplicationLayoutBodyNavigation>
+                }
+            >
+                <div className='dummy-class' />
+            </ApplicationLayout.Body>
+        </ApplicationLayout>
+    );
+};
+const useResizer = () => {
+    const [isMobile, setIsMobile] = useState(false);
+    const [ref, observerEntry] = useResizeObserver();
+    const contentRect = observerEntry?.contentRect;
+    useEffect(() => {
+        if (!contentRect) {
+            return;
+        }
+        const width = Math.round(contentRect.width);
+        if (width <= SCREEN_MD) {
+            setIsMobile(true);
+        } else {
+            setIsMobile(false);
+        }
+    }, [contentRect]);
+    return { ref, isMobile };
+};
+```
+#### HTML (html)
+```html
+<div class="ApplicationLayout bg-lighter" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
+    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
+        <nav class="ApplicationHeader user-select-none">
+            <div class="navbar-header">
+                <span class="navbar-brand home-icon">
+                </span>
+            </div>
+            <ul class="ModuleNavigation AppMenu user-select-none pointer-events-none">
+                <li class="dropdown">
+                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive" role="button" id="basic-nav-dropdown">
+                        <span>RIO Service</span>
+                    </a>
+                </li>
+            </ul>
+            <ul class="SubmoduleNavigation nav">
+                <li class="submodule " data-nav-item-key="1">
+                    <a aria-current="page" class="active" href="#components/appLayout">Navigation 1</a>
+                </li>
+                <li class="submodule " data-nav-item-key="2">
+                    <a href="#2">Navigation 2</a>
+                </li>
+                <li class="submodule " data-nav-item-key="3">
+                    <a href="#3">Navigation 3</a>
+                </li>
+            </ul>
+            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
+            </ul>
+        </nav>
+    </div>
+    <div class="ApplicationLayoutBody uikitDemo">
+        <div class="module-content-wrapper">
+            <div class="ApplicationLayoutBodyNavigation">
+                <div class="SubNavigation width-100pct overflow-auto">
+                    <ul class="SubmoduleNavigation nav">
+                        <li class="submodule" data-nav-item-key="1">
+                            <a aria-current="page" class="active" href="#components/appLayout">Subnavigation 1</a>
+                        </li>
+                        <li class="submodule" data-nav-item-key="2">
+                            <a href="#2">Subnavigation 2</a>
+                        </li>
+                        <li class="submodule" data-nav-item-key="3">
+                            <a href="#3">Subnavigation 3</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
+                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
+                    <div class="scrollbar-content-wrapper">
+                        <div class="scrollbar-content">
+                            <div class="dummy-class">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
+                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
+                    </div>
+                </div>
+                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
+                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <span class="scroll-to-top">
+            <button type="button" class="btn btn-primary btn-icon-only">
+                <span class="rioglyph rioglyph-arrow-up">
+                </span>
+            </button>
+        </span>
+    </div>
+</div>
+```
+#### Props: ApplicationLayout
+### ApplicationLayout
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutHeader
+### ApplicationLayoutHeader
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutSidebar
+### ApplicationLayoutSidebar
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | React.ref | — | A React ref function assigned to the wrapper element. |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutBody
+### ApplicationLayoutBody
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| innerClassName | String | — | Additional class names that are added to the inner module-content component. |
+| children | any | — | Any component given to the layout components will be rendered |
+| navigation | any | — | The ApplicationLayoutBodyNavigation component. |
+| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |
+| bottomBar | Node \| String | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |
+| banner | any | — | The ApplicationLayoutBodyBanner component. |
+#### Props: ApplicationLayoutBodyNavigation
+### ApplicationLayoutBodyNavigation
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
+#### Props: ApplicationLayoutBodyBottomBar
+### ApplicationLayoutBodyBottomBar
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |
+| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+#### Props: ApplicationLayoutBodyBanner
+### ApplicationLayoutBodyBanner
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| backgroundColor | String | bg-primary | One of our bg-color utility classes. |
+| textColor | string | text-color-white | One of our text-color utility classes. |
+| isSticky | Boolean | false | Sticky while scrolling. |
+## Body banner example
+### Example: Example 3
+RIO Service
+Navigation 1
+Navigation 2
+Navigation 3
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.
+#### Summary
+RIO Service
+Navigation 1
+Navigation 2
+Navigation 3
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.
+#### React (tsx)
+```tsx
+import { NavLink } from 'react-router-dom';
+import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
+import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
+import ApplicationLayoutBodyBanner from '@rio-cloud/rio-uikit/ApplicationLayoutBodyBanner';
+const navItems = [
+    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },
+    {
+        key: '2',
+        route: (
+            <NavLink to='/2' onClick={event => event.preventDefault()}>
+                Navigation 2
+            </NavLink>
+        ),
+    },
+    {
+        key: '3',
+        route: (
+            <NavLink to='/3' onClick={event => event.preventDefault()}>
+                Navigation 3
+            </NavLink>
+        ),
+    },
+];
+export default () => (
+    <ApplicationLayout className='bg-lighter'>
+        <ApplicationLayout.Header>
+            <ApplicationHeader label='RIO Service' navItems={navItems} />
+        </ApplicationLayout.Header>
+        <ApplicationLayout.Body
+            className='uikitDemo'
+            banner={
+                <ApplicationLayoutBodyBanner>
+                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.
+                </ApplicationLayoutBodyBanner>
+            }
+        >
+            <div className='dummy-class' />
+        </ApplicationLayout.Body>
+    </ApplicationLayout>
+);
+```
+#### HTML (html)
+```html
+<div class="ApplicationLayout bg-lighter" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
+    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
+        <nav class="ApplicationHeader user-select-none">
+            <div class="navbar-header">
+                <span class="navbar-brand home-icon">
+                </span>
+            </div>
+            <ul class="ModuleNavigation AppMenu user-select-none pointer-events-none">
+                <li class="dropdown">
+                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive" role="button" id="basic-nav-dropdown">
+                        <span>RIO Service</span>
+                    </a>
+                </li>
+            </ul>
+            <ul class="SubmoduleNavigation nav">
+                <li class="submodule " data-nav-item-key="1">
+                    <a aria-current="page" class="active" href="#components/appLayout">Navigation 1</a>
+                </li>
+                <li class="submodule " data-nav-item-key="2">
+                    <a href="#2">Navigation 2</a>
+                </li>
+                <li class="submodule " data-nav-item-key="3">
+                    <a href="#3">Navigation 3</a>
+                </li>
+            </ul>
+            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
+            </ul>
+        </nav>
+    </div>
+    <div class="ApplicationLayoutBody uikitDemo">
+        <div class="module-content-wrapper">
+            <div class="ApplicationLayoutBodyBanner text-color-white bg-primary position-sticky top-0 z-index-3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.</div>
+            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
+                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
+                    <div class="scrollbar-content-wrapper">
+                        <div class="scrollbar-content">
+                            <div class="dummy-class">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
+                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
+                    </div>
+                </div>
+                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
+                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <span class="scroll-to-top">
+            <button type="button" class="btn btn-primary btn-icon-only">
+                <span class="rioglyph rioglyph-arrow-up">
+                </span>
+            </button>
+        </span>
+    </div>
+</div>
+```
+#### Props: ApplicationLayout
+### ApplicationLayout
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutHeader
+### ApplicationLayoutHeader
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutSidebar
+### ApplicationLayoutSidebar
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | React.ref | — | A React ref function assigned to the wrapper element. |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutBody
+### ApplicationLayoutBody
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| innerClassName | String | — | Additional class names that are added to the inner module-content component. |
+| children | any | — | Any component given to the layout components will be rendered |
+| navigation | any | — | The ApplicationLayoutBodyNavigation component. |
+| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |
+| bottomBar | Node \| String | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |
+| banner | any | — | The ApplicationLayoutBodyBanner component. |
+#### Props: ApplicationLayoutBodyNavigation
+### ApplicationLayoutBodyNavigation
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
+#### Props: ApplicationLayoutBodyBottomBar
+### ApplicationLayoutBodyBottomBar
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |
+| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+#### Props: ApplicationLayoutBodyBanner
+### ApplicationLayoutBodyBanner
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| backgroundColor | String | bg-primary | One of our bg-color utility classes. |
+| textColor | string | text-color-white | One of our text-color utility classes. |
+| isSticky | Boolean | false | Sticky while scrolling. |
+## Bottom bar example
+### Example: Example 4
+RIO Service
+Navigation 1
+Navigation 2
+Navigation 3
+Button
+#### Summary
+RIO Service
+Navigation 1
+Navigation 2
+Navigation 3
+Button
+#### React (tsx)
+```tsx
+import { NavLink } from 'react-router-dom';
+import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
+import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
+import ApplicationLayoutBodyBottomBar from '@rio-cloud/rio-uikit/ApplicationLayoutBodyBottomBar';
+const navItems = [
+    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },
+    {
+        key: '2',
+        route: (
+            <NavLink to='/2' onClick={event => event.preventDefault()}>
+                Navigation 2
+            </NavLink>
+        ),
+    },
+    {
+        key: '3',
+        route: (
+            <NavLink to='/3' onClick={event => event.preventDefault()}>
+                Navigation 3
+            </NavLink>
+        ),
+    },
+];
+export default () => (
+    <ApplicationLayout className='bg-lighter'>
+        <ApplicationLayout.Header>
+            <ApplicationHeader label='RIO Service' navItems={navItems} />
+        </ApplicationLayout.Header>
+        <ApplicationLayout.Body
+            className='uikitDemo'
+            bottomBar={
+                <ApplicationLayoutBodyBottomBar>
+                    <button type='button' className='btn btn-primary'>
+                        Button
+                    </button>
+                </ApplicationLayoutBodyBottomBar>
+            }
+        >
+            <div className='dummy-class' />
+        </ApplicationLayout.Body>
+    </ApplicationLayout>
+);
+```
+#### HTML (html)
+```html
+<div class="ApplicationLayout bg-lighter" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
+    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
+        <nav class="ApplicationHeader user-select-none">
+            <div class="navbar-header">
+                <span class="navbar-brand home-icon">
+                </span>
+            </div>
+            <ul class="ModuleNavigation AppMenu user-select-none pointer-events-none">
+                <li class="dropdown">
+                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive" role="button" id="basic-nav-dropdown">
+                        <span>RIO Service</span>
+                    </a>
+                </li>
+            </ul>
+            <ul class="SubmoduleNavigation nav">
+                <li class="submodule " data-nav-item-key="1">
+                    <a aria-current="page" class="active" href="#components/appLayout">Navigation 1</a>
+                </li>
+                <li class="submodule " data-nav-item-key="2">
+                    <a href="#2">Navigation 2</a>
+                </li>
+                <li class="submodule " data-nav-item-key="3">
+                    <a href="#3">Navigation 3</a>
+                </li>
+            </ul>
+            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
+            </ul>
+        </nav>
+    </div>
+    <div class="ApplicationLayoutBody has-footer uikitDemo">
+        <div class="module-content-wrapper">
+            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
+                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
+                    <div class="scrollbar-content-wrapper">
+                        <div class="scrollbar-content">
+                            <div class="dummy-class">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
+                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
+                    </div>
+                </div>
+                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
+                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <span class="scroll-to-top">
+            <button type="button" class="btn btn-primary btn-icon-only">
+                <span class="rioglyph rioglyph-arrow-up">
+                </span>
+            </button>
+        </span>
+    </div>
+    <div class="ApplicationLayoutBodyBottomBar justify-content-between">
+        <button type="button" class="btn btn-primary">Button</button>
+    </div>
+</div>
+```
+#### Props: ApplicationLayout
+### ApplicationLayout
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutHeader
+### ApplicationLayoutHeader
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutSidebar
+### ApplicationLayoutSidebar
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | React.ref | — | A React ref function assigned to the wrapper element. |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutBody
+### ApplicationLayoutBody
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| innerClassName | String | — | Additional class names that are added to the inner module-content component. |
+| children | any | — | Any component given to the layout components will be rendered |
+| navigation | any | — | The ApplicationLayoutBodyNavigation component. |
+| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |
+| bottomBar | Node \| String | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |
+| banner | any | — | The ApplicationLayoutBodyBanner component. |
+#### Props: ApplicationLayoutBodyNavigation
+### ApplicationLayoutBodyNavigation
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
+#### Props: ApplicationLayoutBodyBottomBar
+### ApplicationLayoutBodyBottomBar
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |
+| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+#### Props: ApplicationLayoutBodyBanner
+### ApplicationLayoutBodyBanner
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| backgroundColor | String | bg-primary | One of our bg-color utility classes. |
+| textColor | string | text-color-white | One of our text-color utility classes. |
+| isSticky | Boolean | false | Sticky while scrolling. |
+## Sidebar Example
+### Example: Example 5
+RIO Service
+Navigation 1
+Navigation 2
+Navigation 3
+Sidebar Right
+Sidebar components may be added here...
+Button
+#### Summary
+RIO Service
+Navigation 1
+Navigation 2
+Navigation 3
+Sidebar Right
+Sidebar components may be added here...
+Button
+#### React (tsx)
+```tsx
+import { NavLink } from 'react-router-dom';
+import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
+import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
+import Sidebar from '@rio-cloud/rio-uikit/Sidebar';
+const navItems = [
+    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },
+    {
+        key: '2',
+        route: (
+            <NavLink to='/2' onClick={event => event.preventDefault()}>
+                Navigation 2
+            </NavLink>
+        ),
+    },
+    {
+        key: '3',
+        route: (
+            <NavLink to='/3' onClick={event => event.preventDefault()}>
+                Navigation 3
+            </NavLink>
+        ),
+    },
+];
+export default () => (
+    <ApplicationLayout className='bg-lighter'>
+        <ApplicationLayout.Header>
+            <ApplicationHeader label='RIO Service' navItems={navItems} />
+        </ApplicationLayout.Header>
+        <ApplicationLayout.Sidebar className='right bg-white'>
+            <Sidebar
+                title='Sidebar Right'
+                titleClassName='padding-left-10'
+                closed={false}
+                onClose={() => {}}
+                position={Sidebar.RIGHT}
+                resizable
+                minWidth={300}
+                maxWidth={600}
+                footer={
+                    <button className='btn btn-primary' type='button' onClick={() => {}}>
+                        Button
+                    </button>
+                }
+            >
+                <div className='padding-left-20 padding-right-20'>Sidebar components may be added here...</div>
+            </Sidebar>
+        </ApplicationLayout.Sidebar>
+        <ApplicationLayout.Body className='uikitDemo'>
+            <div className='dummy-class' />
+        </ApplicationLayout.Body>
+    </ApplicationLayout>
+);
+```
+#### HTML (html)
+```html
+<div class="ApplicationLayout bg-lighter" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
+    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
+        <nav class="ApplicationHeader user-select-none">
+            <div class="navbar-header">
+                <span class="navbar-brand home-icon">
+                </span>
+            </div>
+            <ul class="ModuleNavigation AppMenu user-select-none pointer-events-none">
+                <li class="dropdown">
+                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive" role="button" id="basic-nav-dropdown">
+                        <span>RIO Service</span>
+                    </a>
+                </li>
+            </ul>
+            <ul class="SubmoduleNavigation nav">
+                <li class="submodule " data-nav-item-key="1">
+                    <a aria-current="page" class="active" href="#components/appLayout">Navigation 1</a>
+                </li>
+                <li class="submodule " data-nav-item-key="2">
+                    <a href="#2">Navigation 2</a>
+                </li>
+                <li class="submodule " data-nav-item-key="3">
+                    <a href="#3">Navigation 3</a>
+                </li>
+            </ul>
+            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
+            </ul>
+        </nav>
+    </div>
+    <div class="ApplicationLayoutSidebar right bg-white">
+        <div class="Sidebar fluid" style="width: 350px; opacity: 1; display: block; transform: none;">
+            <div class="SidebarResizeLimit" style="right: 600px;">
+            </div>
+            <div class="SidebarContent">
+                <div class="SidebarHeader">
+                    <div class="SidebarTitle padding-left-10">Sidebar Right</div>
+                    <div class="SidebarButtons non-printable close">
+                        <button type="button" data-testid="sidebarCloseButton" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
+                            <span class="rioglyph rioglyph-remove">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+                <div class="SidebarBody">
+                    <div class="padding-left-20 padding-right-20">Sidebar components may be added here...</div>
+                </div>
+                <div class="SidebarFooter">
+                    <button class="btn btn-primary" type="button">Button</button>
+                </div>
+            </div>
+            <div class="Resizer resize-horizontal resize-left">
+            </div>
+        </div>
+    </div>
+    <div class="ApplicationLayoutBody uikitDemo">
+        <div class="module-content-wrapper">
+            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
+                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
+                    <div class="scrollbar-content-wrapper">
+                        <div class="scrollbar-content">
+                            <div class="dummy-class">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
+                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
+                    </div>
+                </div>
+                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
+                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <span class="scroll-to-top">
+            <button type="button" class="btn btn-primary btn-icon-only">
+                <span class="rioglyph rioglyph-arrow-up">
+                </span>
+            </button>
+        </span>
+    </div>
+</div>
+```
+#### Props: ApplicationLayout
+### ApplicationLayout
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutHeader
+### ApplicationLayoutHeader
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutSidebar
+### ApplicationLayoutSidebar
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | React.ref | — | A React ref function assigned to the wrapper element. |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutBody
+### ApplicationLayoutBody
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| innerClassName | String | — | Additional class names that are added to the inner module-content component. |
+| children | any | — | Any component given to the layout components will be rendered |
+| navigation | any | — | The ApplicationLayoutBodyNavigation component. |
+| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |
+| bottomBar | Node \| String | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |
+| banner | any | — | The ApplicationLayoutBodyBanner component. |
+#### Props: ApplicationLayoutBodyNavigation
+### ApplicationLayoutBodyNavigation
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
+#### Props: ApplicationLayoutBodyBottomBar
+### ApplicationLayoutBodyBottomBar
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |
+| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+#### Props: ApplicationLayoutBodyBanner
+### ApplicationLayoutBodyBanner
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| backgroundColor | String | bg-primary | One of our bg-color utility classes. |
+| textColor | string | text-color-white | One of our text-color utility classes. |
+| isSticky | Boolean | false | Sticky while scrolling. |
+## Complete example with all components
+### Example: Example 6
+RIO Service
+Navigation 1
+Navigation 2
+Navigation 3
+4
+5
+2
+1
+Asset Group3
+Vehicle-2115Asset 1005
+Vehicle-2747Asset 1001
+Vehicle-5156Asset 1000
+Ungrouped5
+200
+Sidebar Right
+Sidebar components may be added here...
+Close
+Subnavigation 1
+Subnavigation 2
+Subnavigation 3
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.
+Sample Service Content
+Open Sidebar
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
+Bottom Button
+#### Summary
+RIO Service
+Navigation 1
+Navigation 2
+Navigation 3
+4
+5
+2
+1
+Asset Group3
+Vehicle-2115Asset 1005
+Vehicle-2747Asset 1001
+Vehicle-5156Asset 1000
+Ungrouped5
+200
+Sidebar Right
+Sidebar components may be added here...
+Close
+Subnavigation 1
+Subnavigation 2
+Subnavigation 3
+Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.
+Sample Service Content
+Open Sidebar
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.
+Bottom Button
+#### React (tsx)
+```tsx
+import { useState, useEffect } from 'react';
+import { Link, NavLink } from 'react-router-dom';
+import { random } from 'es-toolkit/compat';
+import faker from 'faker';
+import IframeResizer from 'iframe-resizer-react';
+import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
+import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
+import ActionBarItem from '@rio-cloud/rio-uikit/ActionBarItem';
+import ApplicationLayoutBodyBanner from '@rio-cloud/rio-uikit/ApplicationLayoutBodyBanner';
+import ApplicationLayoutBodyBottomBar from '@rio-cloud/rio-uikit/ApplicationLayoutBodyBottomBar';
+import ApplicationLayoutBodyNavigation from '@rio-cloud/rio-uikit/ApplicationLayoutBodyNavigation';
+import SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';
+import useResizeObserver from '@rio-cloud/rio-uikit/useResizeObserver';
+import { SCREEN_MD } from '@rio-cloud/rio-uikit/DeviceUtils';
+import Sidebar from '@rio-cloud/rio-uikit/Sidebar';
+import Button from '@rio-cloud/rio-uikit/Button';
+import Notification from '@rio-cloud/rio-uikit/Notification';
+import AssetTree from '@rio-cloud/rio-uikit/AssetTree';
+import TreeCategory from '@rio-cloud/rio-uikit/TreeCategory';
+import Tree, { type TreeGroup } from '@rio-cloud/rio-uikit/Tree';
+import { dummyTextLong } from '../../../utils/data';
+const CATEGORY_ASSETS = 'trucks';
+const CATEGORY_DRIVER = 'driver';
+const navItems = [
+    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },
+    {
+        key: '2',
+        route: (
+            <NavLink to='/2' onClick={event => event.preventDefault()}>
+                Navigation 2
+            </NavLink>
+        ),
+    },
+    {
+        key: '3',
+        route: (
+            <NavLink to='/3' onClick={event => event.preventDefault()}>
+                Navigation 3
+            </NavLink>
+        ),
+    },
+];
+const ServiceInfo = () => (
+    <ActionBarItem.List>
+        <ActionBarItem.ListItem icon='rioglyph-hand-right' onClick={() => Notification.info('Show Welcome Dialog')}>
+            <div className='display-flex align-items-center gap-5'>
+                <span>Welcome</span>
+                <span className='badge badge-primary'>1</span>
+            </div>
+        </ActionBarItem.ListItem>
+        <ActionBarItem.ListItem
+            icon='rioglyph-exclamation-sign'
+            onClick={() => Notification.info("Show What's New Dialog")}
+        >
+            What's new?
+        </ActionBarItem.ListItem>
+        <ActionBarItem.ListItem icon='rioglyph-question-sign' onClick={() => Notification.info('Show Features Dialog')}>
+            Features
+        </ActionBarItem.ListItem>
+        <ActionBarItem.ListItem icon='rioglyph-envelope' hasLink>
+            <Link to='/components/appHeader'>Feedback</Link>
+        </ActionBarItem.ListItem>
+    </ActionBarItem.List>
+);
+const ServiceInfoComponent = (
+    <ActionBarItem id='serviceInfo' className='myItem'>
+        <ActionBarItem.Icon>
+            <span className='icon rioglyph rioglyph-info-sign' />
+        </ActionBarItem.Icon>
+        <ActionBarItem.Popover
+            className='myItemPopover'
+            title={
+                <div>
+                    <span>Service XYZ</span>
+                    <span className='text-color-gray margin-left-10'>v1.1.0</span>
+                </div>
+            }
+        >
+            <ServiceInfo />
+        </ActionBarItem.Popover>
+    </ActionBarItem>
+);
+const AccountMenuComponent = (
+    <ActionBarItem id='accountMenu' hidePopoverOnClick={false}>
+        <ActionBarItem.Icon>
+            <span className='icon rioglyph rioglyph-user' />
+        </ActionBarItem.Icon>
+        <ActionBarItem.Popover>
+            <ActionBarItem.List>
+                <ActionBarItem.ListItem>
+                    <div>
+                        <div className='text-medium'>This is just an example</div>
+                        <div>The real account menu comes here...</div>
+                    </div>
+                </ActionBarItem.ListItem>
+                <ActionBarItem.ListSeparator />
+                <ActionBarItem.ListItem className='padding-0'>
+                    <iframe
+                        className='buyButton height-30 padding-top-5 padding-bottom-5'
+                        title='ContactForm'
+                        src='https://contact-form.rio.cloud/contact_link.html?opener=https%3A%2F%2Fhome.rio.cloud%2F&amp;locale=en-GB'
+                    />
+                </ActionBarItem.ListItem>
+                <ActionBarItem.ListSeparator />
+                <ActionBarItem.ListItem className='padding-0'>
+                    <button
+                        type='button'
+                        className='btn btn-link btn-link-inline text-color-dark'
+                        onClick={() => Notification.info('Logout')}
+                    >
+                        <span className='rioglyph rioglyph-off margin-right-5 text-size-16 text-color-dark' />
+                        <span>Logout</span>
+                    </button>
+                </ActionBarItem.ListItem>
+            </ActionBarItem.List>
+        </ActionBarItem.Popover>
+    </ActionBarItem>
+);
+const Notifications = (
+    <ActionBarItem id='notifications'>
+        <ActionBarItem.Icon>
+            <span className='icon rioglyph rioglyph-notification' />
+            <span className='badge badge-primary badge-indicator badge-indicator-pinging'>4</span>
+        </ActionBarItem.Icon>
+    </ActionBarItem>
+);
+export default () => {
+    const [showSidebar, setShowSidebar] = useState(true);
+    const [isTreeOpen, setIsTreeOpen] = useState(true);
+    const [currentCategoryId, setCurrentCategoryId] = useState(CATEGORY_ASSETS);
+    const [selectedGroupIds, setSelectedGroupIds] = useState([]);
+    const [selectedItemIds, setSelectedItemIds] = useState([]);
+    const [expandedGroups, setExpandedGroups] = useState([assetGroups[0].id]);
+    // Listen for resize changes of the target element defined by the ref
+    // Note: this is for demo purpose only when resizing the demo playground.
+    // The SubNavigation component handles this case internally
+    const { ref, isMobile } = useResizer();
+    const bodyNavigationClasses = ''; // isMobile ? '' : 'has-offset';
+    const handleCloseSidebar = () => setShowSidebar(false);
+    const handleOpenSidebar = () => setShowSidebar(true);
+    const handleToggleTree = (toggle: boolean) => setIsTreeOpen(toggle);
+    const handleChangeCategories = (categoryId: string) => setCurrentCategoryId(categoryId);
+    const handleExpandGroup = (newExpandedGroups: string[]) => setExpandedGroups(newExpandedGroups);
+    const handleSelection = ({ items, groups }: any) => {
+        setSelectedItemIds(items);
+        setSelectedGroupIds(groups);
+    };
+    return (
+        <ApplicationLayout className='bg-lighter height-500' layoutRef={ref}>
+            <ApplicationLayout.Header>
+                <ApplicationHeader
+                    label='RIO Service'
+                    appNavigator={
+                        <IframeResizer className='iFrameResizer' src='https://menu.rio.cloud' checkOrigin={false} />
+                    }
+                    navItems={navItems}
+                    actionBarItems={[ServiceInfoComponent, Notifications, AccountMenuComponent]}
+                />
+            </ApplicationLayout.Header>
+            <ApplicationLayout.Sidebar>
+                <AssetTree
+                    minWidth={300}
+                    maxWidth={450}
+                    currentCategoryId={currentCategoryId}
+                    onCategoryChange={handleChangeCategories}
+                    height={500}
+                    isOpen={isTreeOpen}
+                    onToggleTree={handleToggleTree}
+                    useOffscreen
+                >
+                    <TreeCategory key={CATEGORY_ASSETS} id={CATEGORY_ASSETS} label='Assets' icon='rioglyph-truck'>
+                        <Tree
+                            groups={assetGroups}
+                            items={assets}
+                            searchPlaceholder='Find asset'
+                            expandedGroups={expandedGroups}
+                            onExpandGroupsChange={handleExpandGroup}
+                            selectedGroups={selectedGroupIds}
+                            selectedItems={selectedItemIds}
+                            onSelectionChange={handleSelection}
+                        />
+                    </TreeCategory>
+                    <TreeCategory key={CATEGORY_DRIVER} id={CATEGORY_DRIVER} label='My Drivers' icon='rioglyph-driver'>
+                        <Tree items={randomDrivers} hasMultiselect={false} />
+                    </TreeCategory>
+                </AssetTree>
+            </ApplicationLayout.Sidebar>
+            <ApplicationLayout.Sidebar className='right bg-white height-450'>
+                <Sidebar
+                    title='Sidebar Right'
+                    titleClassName='padding-left-10'
+                    closed={!showSidebar}
+                    onClose={handleCloseSidebar}
+                    position={Sidebar.RIGHT}
+                    enableFullscreenToggle
+                    resizable
+                    minWidth={300}
+                    maxWidth={600}
+                    switchModeBreakpoint={1400}
+                    footer={
+                        <button className='btn btn-primary' type='button' onClick={handleCloseSidebar}>
+                            Close
+                        </button>
+                    }
+                >
+                    <div className='padding-left-20 padding-right-20'>Sidebar components may be added here...</div>
+                </Sidebar>
+            </ApplicationLayout.Sidebar>
+            <ApplicationLayout.Body
+                className='uikitDemo'
+                banner={
+                    <ApplicationLayoutBodyBanner>
+                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.
+                    </ApplicationLayoutBodyBanner>
+                }
+                navigation={
+                    <ApplicationLayoutBodyNavigation className={bodyNavigationClasses}>
+                        <SubNavigation
+                            navItems={[
+                                {
+                                    key: '1',
+                                    route: <NavLink to='/components/appLayout'>Subnavigation 1</NavLink>,
+                                },
+                                {
+                                    key: '2',
+                                    route: (
+                                        <NavLink to='/2' onClick={event => event.preventDefault()}>
+                                            Subnavigation 2
+                                        </NavLink>
+                                    ),
+                                },
+                                {
+                                    key: '3',
+                                    route: (
+                                        <NavLink to='/3' onClick={event => event.preventDefault()}>
+                                            Subnavigation 3
+                                        </NavLink>
+                                    ),
+                                },
+                            ]}
+                        />
+                    </ApplicationLayoutBodyNavigation>
+                }
+                bottomBar={
+                    <ApplicationLayoutBodyBottomBar>
+                        <button type='button' className='btn btn-primary'>
+                            Bottom Button
+                        </button>
+                    </ApplicationLayoutBodyBottomBar>
+                }
+            >
+                <div>
+                    <div className='panel panel-default shadow-default'>
+                        <div className='panel-heading'>Sample Service Content</div>
+                        <div className='panel-body overflow-auto'>
+                            <Button onClick={handleOpenSidebar}>Open Sidebar</Button>
+                            <div className='margin-top-15'>{dummyTextLong}</div>
+                        </div>
+                    </div>
+                </div>
+            </ApplicationLayout.Body>
+        </ApplicationLayout>
+    );
+};
+const useResizer = () => {
+    const [isMobile, setIsMobile] = useState(false);
+    const [ref, observerEntry] = useResizeObserver();
+    const contentRect = observerEntry?.contentRect;
+    useEffect(() => {
+        if (!contentRect) {
+            return;
+        }
+        const width = Math.round(contentRect.width);
+        if (width <= SCREEN_MD) {
+            setIsMobile(true);
+        } else {
+            setIsMobile(false);
+        }
+    }, [contentRect]);
+    return { ref, isMobile };
+};
+const assetGroups: TreeGroup[] = [
+    {
+        id: '0250a8aa-721e-40b4-b1ea-7908acddfdf4',
+        name: 'Asset Group',
+    },
+    {
+        id: 'unassigned',
+        name: 'Ungrouped',
+        position: 'last',
+    },
+];
+const assets = Array.from({ length: random(5, 20) }, (_, index) => ({
+    id: `010191ac-d06d-4567-b13a-7b7fd85d97${index}`,
+    name: `Vehicle-${random(1000, 9999)}`,
+    info: `Asset 1${String(index).padStart(3, '0')}`,
+    type: faker.random.arrayElement(['truck', 'trailer', 'van', 'bus']),
+    groupIds: [faker.random.arrayElement(assetGroups).id],
+}));
+const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
+    id: `74e8eb86-18a1-4abe-90cb-aeee7909f85${index}`,
+    name: {
+        firstName: faker.internet.userName(),
+        lastName: faker.name.firstName(),
+    },
+    type: 'driver',
+}));
+```
+#### HTML (html)
+```html
+<div class="ApplicationLayout bg-lighter height-500" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
+    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
+        <nav class="ApplicationHeader user-select-none">
+            <div class="navbar-header">
+                <span class="navbar-brand home-icon">
+                </span>
+            </div>
+            <ul class="ModuleNavigation AppMenu user-select-none hasModules">
+                <li class="dropdown">
+                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between" role="button" id="basic-nav-dropdown">
+                        <span>RIO Service</span>
+                        <span class="caret">
+                        </span>
+                    </a>
+                    <ul role="menu" class="dropdown-menu ModuleNavigation-dropdown-menu">
+                        <li role="presentation">
+                            <iframe title="iframe" class="iFrameResizer" src="https://menu.rio.cloud" id="iFrameResizer0" scrolling="no" style="overflow: hidden; height: 139px;">
+                            </iframe>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+            <ul class="SubmoduleNavigation nav">
+                <li class="submodule " data-nav-item-key="1">
+                    <a aria-current="page" class="active" href="#components/appLayout">Navigation 1</a>
+                </li>
+                <li class="submodule " data-nav-item-key="2">
+                    <a href="#2">Navigation 2</a>
+                </li>
+                <li class="CollapsedDropdown dropdown ">
+                    <a id="basic-nav-dropdown" role="button" class="dropdown-toggle text-color-gray" aria-haspopup="true" aria-expanded="true">
+                        <span class="rioglyph rioglyph-option-horizontal" aria-hidden="true">
+                        </span>
+                    </a>
+                    <ul class="dropdown-menu" role="menu" aria-labelledby="basic-nav-dropdown">
+                        <li class="submodule" data-nav-item-key="3">
+                            <a href="#3">Navigation 3</a>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
+                <li role="presentation" class="navigationItem">
+                    <div class="ActionBarItem myItem">
+                        <div class="ActionBarItemIcon">
+                            <span class="icon rioglyph rioglyph-info-sign">
+                            </span>
+                        </div>
+                    </div>
+                </li>
+                <li role="presentation" class="navigationItem">
+                    <div class="ActionBarItem">
+                        <div class="ActionBarItemIcon">
+                            <span class="icon rioglyph rioglyph-notification">
+                            </span>
+                            <span class="badge badge-primary badge-indicator badge-indicator-pinging">4</span>
+                        </div>
+                    </div>
+                </li>
+                <li role="presentation" class="navigationItem">
+                    <div class="ActionBarItem">
+                        <div class="ActionBarItemIcon">
+                            <span class="icon rioglyph rioglyph-user">
+                            </span>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </nav>
+    </div>
+    <div class="ApplicationLayoutSidebar">
+        <div class="AssetTree fluid" style="width: 350px; height: 500px;">
+            <div class="AssetTreeResizeLimit" style="left: 450px;">
+            </div>
+            <div class="AssetTreeContent">
+                <div class="TreeSidebar">
+                    <ul class="TreeSidebarNavigation">
+                        <li class="active">
+                            <div class="selection-bubble">
+                                <span class="rioglyph rioglyph-truck">
+                                </span>
+                            </div>
+                        </li>
+                        <li class="">
+                            <div class="selection-bubble">
+                                <span class="rioglyph rioglyph-driver">
+                                </span>
+                            </div>
+                        </li>
+                    </ul>
+                    <div class="TreeSidebarToggle">
+                        <span class="rioglyph rioglyph-chevron-left">
+                        </span>
+                    </div>
+                </div>
+                <div class="AssetTreeBody scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
+                    <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
+                        <div class="scrollbar-content-wrapper">
+                            <div class="TreeOffscreenWrapper">
+                                <div class="Tree">
+                                    <div class="TreeHeader">
+                                        <div class="TreeSearch">
+                                            <div class="input-group flex-1-0">
+                                                <span class="input-group-addon">
+                                                    <span class="rioglyph rioglyph-search" aria-hidden="true">
+                                                    </span>
+                                                </span>
+                                                <div class="ClearableInput input-group">
+                                                    <input placeholder="Find asset" class="form-control" type="text" tabindex="0" value="">
+                                                    <span class="clearButton hide">
+                                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                                        </span>
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="TreeHead display-flex gap-5 padding-15">
+                                            <div class="border border-right-only hidden-empty padding-right-10 margin-right-2">
+                                                <div class="TreeSelectAll display-flex align-items-center">
+                                                    <label class="checkbox margin-top--1" tabindex="0">
+                                                        <input type="checkbox" class="margin-top--1">
+                                                        <span class="checkbox-text">
+                                                        </span>
+                                                    </label>
+                                                </div>
+                                            </div>
+                                            <div class="display-flex justify-content-between align-items-start width-100pct">
+                                                <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
+                                                    <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
+                                                        <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
+                                                        </span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
+                                                    </div>
+                                                    <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
+                                                        <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
+                                                        </span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">2</span>
+                                                    </div>
+                                                    <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
+                                                        <span class="rioglyph rioglyph-van text-size-16 margin-right-2">
+                                                        </span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">1</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="TreeRoot user-select-none overflow-hidden" style="position: relative;">
+                                        <div class="TreeNodeContainer user-select-none overflow-hidden open" data-id="0250a8aa-721e-40b4-b1ea-7908acddfdf4">
+                                            <div class="TreeNode from-group" data-key="0250a8aa-721e-40b4-b1ea-7908acddfdf4">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Asset Group</span>
+                                                    </span>
+                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
+                                                    <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d975">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-trailer">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-2115</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1005</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-bus">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-2747</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1001</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="rioglyph rioglyph-trailer">
+                                                    </span>
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Vehicle-5156</span>
+                                                        <span class="TreeLabelNameTextSubline">Asset 1000</span>
+                                                    </span>
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="unassigned">
+                                            <div class="TreeNode from-group" data-key="unassigned">
+                                                <label class="checkbox TreeCheckbox" tabindex="0">
+                                                    <input type="checkbox" class="TreeCheckbox">
+                                                    <span class="checkbox-text">
+                                                    </span>
+                                                </label>
+                                                <span class="TreeLabel TreeLabelName">
+                                                    <span class="TreeLabelNameText">
+                                                        <span class="TreeLabelNameTextHeadline">Ungrouped</span>
+                                                    </span>
+                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">5</span>
+                                                    <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
+                                                    </span>
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="TreeOffscreenWrapper position-offscreen pointer-events-none">
+                                <div class="Tree">
+                                    <div class="TreeHeader">
+                                        <div class="TreeSearch">
+                                            <div class="input-group flex-1-0">
+                                                <span class="input-group-addon">
+                                                    <span class="rioglyph rioglyph-search" aria-hidden="true">
+                                                    </span>
+                                                </span>
+                                                <div class="ClearableInput input-group">
+                                                    <input placeholder="Type here to filter by name" class="form-control" type="text" tabindex="0" value="">
+                                                    <span class="clearButton hide">
+                                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
+                                                        </span>
+                                                    </span>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <div class="TreeHead display-flex gap-5 padding-15">
+                                            <div class="border border-right-only hidden-empty padding-right-10 margin-right-2">
+                                            </div>
+                                            <div class="display-flex justify-content-between align-items-start width-100pct">
+                                                <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
+                                                    <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none">
+                                                        <span class="rioglyph rioglyph-driver text-size-16 margin-right-2">
+                                                        </span>
+                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">200</span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="TreeRoot user-select-none overflow-hidden" style="position: relative;">
+                                        <div class="tree-virtual-scrollbar scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
+                                            <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
+                                                <div class="scrollbar-content-wrapper">
+                                                    <div class="flat-list" style="height: 8200px; position: relative;">
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
+                                                <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
+                                                </div>
+                                            </div>
+                                            <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
+                                                <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
+                        <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
+                        </div>
+                    </div>
+                    <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
+                        <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="Resizer resize-horizontal resize-right">
+            </div>
+        </div>
+    </div>
+    <div class="ApplicationLayoutSidebar right bg-white height-450">
+        <div class="Sidebar fly" style="width: 350px; opacity: 1; display: block; transform: none;">
+            <div class="SidebarResizeLimit" style="right: 600px;">
+            </div>
+            <div class="SidebarContent">
+                <div class="SidebarHeader">
+                    <div class="SidebarTitle padding-left-10">Sidebar Right</div>
+                    <div class="SidebarButtons non-printable close">
+                        <button type="button" data-testid="sidebarFullscreenToggle" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
+                            <span class="rioglyph rioglyph-resize-full">
+                            </span>
+                        </button>
+                        <div class="SidebarButtons-spacer">
+                        </div>
+                        <button type="button" data-testid="sidebarCloseButton" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
+                            <span class="rioglyph rioglyph-remove">
+                            </span>
+                        </button>
+                    </div>
+                </div>
+                <div class="SidebarBody">
+                    <div class="padding-left-20 padding-right-20">Sidebar components may be added here...</div>
+                </div>
+                <div class="SidebarFooter">
+                    <button class="btn btn-primary" type="button">Close</button>
+                </div>
+            </div>
+            <div class="Resizer resize-horizontal resize-left">
+            </div>
+        </div>
+    </div>
+    <div class="ApplicationLayoutBody has-footer uikitDemo">
+        <div class="module-content-wrapper">
+            <div class="ApplicationLayoutBodyNavigation">
+                <div class="SubNavigation width-100pct overflow-auto">
+                    <ul class="SubmoduleNavigation nav">
+                        <li class="submodule" data-nav-item-key="1">
+                            <a aria-current="page" class="active" href="#components/appLayout">Subnavigation 1</a>
+                        </li>
+                        <li class="submodule" data-nav-item-key="2">
+                            <a href="#2">Subnavigation 2</a>
+                        </li>
+                        <li class="submodule" data-nav-item-key="3">
+                            <a href="#3">Subnavigation 3</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="ApplicationLayoutBodyBanner text-color-white bg-primary position-sticky top-0 z-index-3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.</div>
+            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
+                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
+                    <div class="scrollbar-content-wrapper">
+                        <div class="scrollbar-content">
+                            <div>
+                                <div class="panel panel-default shadow-default">
+                                    <div class="panel-heading">Sample Service Content</div>
+                                    <div class="panel-body overflow-auto">
+                                        <button type="button" class="btn btn-default btn-component" tabindex="0">Open Sidebar</button>
+                                        <div class="margin-top-15">
+                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.
+                                            In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+                                            Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
+                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
+                    </div>
+                </div>
+                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
+                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
+                    </div>
+                </div>
+            </div>
+        </div>
+        <span class="scroll-to-top">
+            <button type="button" class="btn btn-primary btn-icon-only">
+                <span class="rioglyph rioglyph-arrow-up">
+                </span>
+            </button>
+        </span>
+    </div>
+    <div class="ApplicationLayoutBodyBottomBar justify-content-between">
+        <button type="button" class="btn btn-primary">Bottom Button</button>
+    </div>
+</div>
+```
+#### Props: ApplicationLayout
+### ApplicationLayout
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| layoutRef | React.ref | — | A React ref function assigned to the wrapper element. |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutHeader
+### ApplicationLayoutHeader
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutSidebar
+### ApplicationLayoutSidebar
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| ref | React.ref | — | A React ref function assigned to the wrapper element. |
+| className | String | — | Additional class names that are added to the respective component. |
+#### Props: ApplicationLayoutBody
+### ApplicationLayoutBody
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| innerClassName | String | — | Additional class names that are added to the inner module-content component. |
+| children | any | — | Any component given to the layout components will be rendered |
+| navigation | any | — | The ApplicationLayoutBodyNavigation component. |
+| enableScrollToTop | Boolean | true | Show scroll to top button after scrolling the content. |
+| forceScrollbar | Boolean | false | Always show vertical scrollbar to prevent the content from jumping. |
+| bottomBar | Node \| String | — | Optional bottom bar component or a simple string. |
+| bottomBarHeight | Number | 54 | Height of the bottomBar in pixel. |
+| banner | any | — | The ApplicationLayoutBodyBanner component. |
+#### Props: ApplicationLayoutBodyNavigation
+### ApplicationLayoutBodyNavigation
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. Example: "has-offset" |
+#### Props: ApplicationLayoutBodyBottomBar
+### ApplicationLayoutBodyBottomBar
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| buttonAlignment | String | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or 'left''right' |
+| useBodyPaddings | Boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
+#### Props: ApplicationLayoutBodyBanner
+### ApplicationLayoutBodyBanner
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| className | String | — | Additional class names that are added to the respective component. |
+| backgroundColor | String | bg-primary | One of our bg-color utility classes. |
+| textColor | string | text-color-white | One of our text-color utility classes. |
+| isSticky | Boolean | false | Sticky while scrolling. |