npm - @rio-cloud/uikit-mcp - Versions diffs - 1.0.0 - Mend

@rio-cloud/uikit-mcp 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/data/pages/Components/components/mapgroup.json ADDED Viewed

@@ -0,0 +1,1198 @@
+{
+  "metadata": {
+    "captured_at": "2025-11-21T12:08:09.122Z",
+    "source": "https://uikit.developers.rio.cloud/#components/mapGroup",
+    "category": "Components",
+    "section": "Map",
+    "slug": "components/mapgroup",
+    "version": "v1.13.2",
+    "hash_algorithm": "sha256",
+    "hash": "7f6c2e927168ad24f7ba6d03aadaea80b8963a2d14e8863643eab2efa339b151"
+  },
+  "title": "ApplicationLayout",
+  "lead": "The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar",
+  "content": [
+    {
+      "heading": "ApplicationLayout",
+      "body": "The ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.\n\n> 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\n\n> Note: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <body> node.",
+      "examples": []
+    },
+    {
+      "heading": "Default example",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 1",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { NavLink } from 'react-router-dom';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\n\nconst navItems = [\n    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },\n    {\n        key: '2',\n        route: (\n            <NavLink to='/2' onClick={event => event.preventDefault()}>\n                Navigation 2\n            </NavLink>\n        ),\n    },\n    {\n        key: '3',\n        route: (\n            <NavLink to='/3' onClick={event => event.preventDefault()}>\n                Navigation 3\n            </NavLink>\n        ),\n    },\n];\n\nexport default () => (\n    <ApplicationLayout className='bg-lighter'>\n        <ApplicationLayout.Header>\n            <ApplicationHeader label='RIO Service' navItems={navItems} />\n        </ApplicationLayout.Header>\n        <ApplicationLayout.Body className='uikitDemo'>\n            <div className='dummy-class' />\n        </ApplicationLayout.Body>\n    </ApplicationLayout>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"ApplicationLayout bg-lighter\" style=\"--ApplicationLayoutBodyBottomBarHeight: 54px;\">\n    <div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\">\n        <nav class=\"ApplicationHeader user-select-none\">\n            <div class=\"navbar-header\">\n                <span class=\"navbar-brand home-icon\">\n                </span>\n            </div>\n            <ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\">\n                <li class=\"dropdown\">\n                    <a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\">\n                        <span>RIO Service</span>\n                    </a>\n                </li>\n            </ul>\n            <ul class=\"SubmoduleNavigation nav\">\n                <li class=\"submodule \" data-nav-item-key=\"1\">\n                    <a aria-current=\"page\" class=\"active\" href=\"#components/appLayout\">Navigation 1</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"2\">\n                    <a href=\"#2\">Navigation 2</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"3\">\n                    <a href=\"#3\">Navigation 3</a>\n                </li>\n            </ul>\n            <ul class=\"ApplicationActionBar nav navbar-nav navbar-right \">\n            </ul>\n        </nav>\n    </div>\n    <div class=\"ApplicationLayoutBody uikitDemo\">\n        <div class=\"module-content-wrapper\">\n            <div class=\"module-content smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                    <div class=\"scrollbar-content-wrapper\">\n                        <div class=\"scrollbar-content\">\n                            <div class=\"dummy-class\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\">\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\">\n                    </div>\n                </div>\n            </div>\n        </div>\n        <span class=\"scroll-to-top\">\n            <button type=\"button\" class=\"btn btn-primary btn-icon-only\">\n                <span class=\"rioglyph rioglyph-arrow-up\">\n                </span>\n            </button>\n        </span>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "ApplicationLayout",
+                  "rows": [
+                    {
+                      "name": "layoutRef",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A React ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutHeader",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutSidebar",
+                  "rows": [
+                    {
+                      "name": "ref",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A React ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBody",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "innerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the inner module-content component."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any component given to the layout components will be rendered"
+                    },
+                    {
+                      "name": "navigation",
+                      "type": "any",
+                      "default": "",
+                      "description": "The ApplicationLayoutBodyNavigation component."
+                    },
+                    {
+                      "name": "enableScrollToTop",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Show scroll to top button after scrolling the content."
+                    },
+                    {
+                      "name": "forceScrollbar",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Always show vertical scrollbar to prevent the content from jumping."
+                    },
+                    {
+                      "name": "bottomBar",
+                      "type": "Node | String",
+                      "default": "",
+                      "description": "Optional bottom bar component or a simple string."
+                    },
+                    {
+                      "name": "bottomBarHeight",
+                      "type": "Number",
+                      "default": "54",
+                      "description": "Height of the bottomBar in pixel."
+                    },
+                    {
+                      "name": "banner",
+                      "type": "any",
+                      "default": "",
+                      "description": "The ApplicationLayoutBodyBanner component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyNavigation",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component. Example: \"has-offset\""
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyBottomBar",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "buttonAlignment",
+                      "type": "String",
+                      "default": "",
+                      "description": "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'"
+                    },
+                    {
+                      "name": "useBodyPaddings",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use same paddings (left and right) as the ApplicationLayoutBody."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyBanner",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "backgroundColor",
+                      "type": "String",
+                      "default": "bg-primary",
+                      "description": "One of our bg-color utility classes."
+                    },
+                    {
+                      "name": "textColor",
+                      "type": "string",
+                      "default": "text-color-white",
+                      "description": "One of our text-color utility classes."
+                    },
+                    {
+                      "name": "isSticky",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Sticky while scrolling."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "SubNavigation example",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 2",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import React, { useState, useEffect } from 'react';\nimport { NavLink } from 'react-router-dom';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\nimport ApplicationLayoutBodyNavigation from '@rio-cloud/rio-uikit/ApplicationLayoutBodyNavigation';\nimport SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';\nimport useResizeObserver from '@rio-cloud/rio-uikit/useResizeObserver';\nimport { SCREEN_MD } from '@rio-cloud/rio-uikit/DeviceUtils';\n\nexport default () => {\n    const currentLocation = window.location.hash.replace('#', '/');\n    const navItems = [\n        { key: '1', route: <NavLink to={currentLocation}>Navigation 1</NavLink> },\n        {\n            key: '2',\n            route: (\n                <NavLink to='/2' onClick={event => event.preventDefault()}>\n                    Navigation 2\n                </NavLink>\n            ),\n        },\n        {\n            key: '3',\n            route: (\n                <NavLink to='/3' onClick={event => event.preventDefault()}>\n                    Navigation 3\n                </NavLink>\n            ),\n        },\n    ];\n\n    // Listen for resize changes of the target element defined by the ref\n    // Note: this is for demo purpose only when resizing the demo playground.\n    // The SubNavigation component handles this case internally\n    const { ref, isMobile } = useResizer();\n    const bodyNavigationClasses = isMobile ? '' : 'has-offset';\n\n    return (\n        <ApplicationLayout className='bg-lighter' layoutRef={ref}>\n            <ApplicationLayout.Header>\n                <ApplicationHeader label='RIO Service' navItems={navItems} />\n            </ApplicationLayout.Header>\n            <ApplicationLayout.Body\n                className='uikitDemo'\n                navigation={\n                    <ApplicationLayoutBodyNavigation className={bodyNavigationClasses}>\n                        <SubNavigation\n                            navItems={[\n                                {\n                                    key: '1',\n                                    route: <NavLink to={currentLocation}>Subnavigation 1</NavLink>,\n                                },\n                                {\n                                    key: '2',\n                                    route: (\n                                        <NavLink to='/2' onClick={event => event.preventDefault()}>\n                                            Subnavigation 2\n                                        </NavLink>\n                                    ),\n                                },\n                                {\n                                    key: '3',\n                                    route: (\n                                        <NavLink to='/3' onClick={event => event.preventDefault()}>\n                                            Subnavigation 3\n                                        </NavLink>\n                                    ),\n                                },\n                            ]}\n                        />\n                    </ApplicationLayoutBodyNavigation>\n                }\n            >\n                <div className='dummy-class' />\n            </ApplicationLayout.Body>\n        </ApplicationLayout>\n    );\n};\n\nconst useResizer = () => {\n    const [isMobile, setIsMobile] = useState(false);\n    const [ref, observerEntry] = useResizeObserver();\n    const contentRect = observerEntry?.contentRect;\n    useEffect(() => {\n        if (!contentRect) {\n            return;\n        }\n        const width = Math.round(contentRect.width);\n        if (width <= SCREEN_MD) {\n            setIsMobile(true);\n        } else {\n            setIsMobile(false);\n        }\n    }, [contentRect]);\n\n    return { ref, isMobile };\n};"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"ApplicationLayout bg-lighter\" style=\"--ApplicationLayoutBodyBottomBarHeight: 54px;\">\n    <div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\">\n        <nav class=\"ApplicationHeader user-select-none\">\n            <div class=\"navbar-header\">\n                <span class=\"navbar-brand home-icon\">\n                </span>\n            </div>\n            <ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\">\n                <li class=\"dropdown\">\n                    <a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\">\n                        <span>RIO Service</span>\n                    </a>\n                </li>\n            </ul>\n            <ul class=\"SubmoduleNavigation nav\">\n                <li class=\"submodule \" data-nav-item-key=\"1\">\n                    <a aria-current=\"page\" class=\"active\" href=\"#components/appLayout\">Navigation 1</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"2\">\n                    <a href=\"#2\">Navigation 2</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"3\">\n                    <a href=\"#3\">Navigation 3</a>\n                </li>\n            </ul>\n            <ul class=\"ApplicationActionBar nav navbar-nav navbar-right \">\n            </ul>\n        </nav>\n    </div>\n    <div class=\"ApplicationLayoutBody uikitDemo\">\n        <div class=\"module-content-wrapper\">\n            <div class=\"ApplicationLayoutBodyNavigation\">\n                <div class=\"SubNavigation width-100pct overflow-auto\">\n                    <ul class=\"SubmoduleNavigation nav\">\n                        <li class=\"submodule\" data-nav-item-key=\"1\">\n                            <a aria-current=\"page\" class=\"active\" href=\"#components/appLayout\">Subnavigation 1</a>\n                        </li>\n                        <li class=\"submodule\" data-nav-item-key=\"2\">\n                            <a href=\"#2\">Subnavigation 2</a>\n                        </li>\n                        <li class=\"submodule\" data-nav-item-key=\"3\">\n                            <a href=\"#3\">Subnavigation 3</a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n            <div class=\"module-content smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                    <div class=\"scrollbar-content-wrapper\">\n                        <div class=\"scrollbar-content\">\n                            <div class=\"dummy-class\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\">\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\">\n                    </div>\n                </div>\n            </div>\n        </div>\n        <span class=\"scroll-to-top\">\n            <button type=\"button\" class=\"btn btn-primary btn-icon-only\">\n                <span class=\"rioglyph rioglyph-arrow-up\">\n                </span>\n            </button>\n        </span>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "ApplicationLayout",
+                  "rows": [
+                    {
+                      "name": "layoutRef",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A React ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutHeader",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutSidebar",
+                  "rows": [
+                    {
+                      "name": "ref",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A React ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBody",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "innerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the inner module-content component."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any component given to the layout components will be rendered"
+                    },
+                    {
+                      "name": "navigation",
+                      "type": "any",
+                      "default": "",
+                      "description": "The ApplicationLayoutBodyNavigation component."
+                    },
+                    {
+                      "name": "enableScrollToTop",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Show scroll to top button after scrolling the content."
+                    },
+                    {
+                      "name": "forceScrollbar",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Always show vertical scrollbar to prevent the content from jumping."
+                    },
+                    {
+                      "name": "bottomBar",
+                      "type": "Node | String",
+                      "default": "",
+                      "description": "Optional bottom bar component or a simple string."
+                    },
+                    {
+                      "name": "bottomBarHeight",
+                      "type": "Number",
+                      "default": "54",
+                      "description": "Height of the bottomBar in pixel."
+                    },
+                    {
+                      "name": "banner",
+                      "type": "any",
+                      "default": "",
+                      "description": "The ApplicationLayoutBodyBanner component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyNavigation",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component. Example: \"has-offset\""
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyBottomBar",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "buttonAlignment",
+                      "type": "String",
+                      "default": "",
+                      "description": "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'"
+                    },
+                    {
+                      "name": "useBodyPaddings",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use same paddings (left and right) as the ApplicationLayoutBody."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyBanner",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "backgroundColor",
+                      "type": "String",
+                      "default": "bg-primary",
+                      "description": "One of our bg-color utility classes."
+                    },
+                    {
+                      "name": "textColor",
+                      "type": "string",
+                      "default": "text-color-white",
+                      "description": "One of our text-color utility classes."
+                    },
+                    {
+                      "name": "isSticky",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Sticky while scrolling."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Body banner example",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 3",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { NavLink } from 'react-router-dom';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\nimport ApplicationLayoutBodyBanner from '@rio-cloud/rio-uikit/ApplicationLayoutBodyBanner';\n\nconst navItems = [\n    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },\n    {\n        key: '2',\n        route: (\n            <NavLink to='/2' onClick={event => event.preventDefault()}>\n                Navigation 2\n            </NavLink>\n        ),\n    },\n    {\n        key: '3',\n        route: (\n            <NavLink to='/3' onClick={event => event.preventDefault()}>\n                Navigation 3\n            </NavLink>\n        ),\n    },\n];\n\nexport default () => (\n    <ApplicationLayout className='bg-lighter'>\n        <ApplicationLayout.Header>\n            <ApplicationHeader label='RIO Service' navItems={navItems} />\n        </ApplicationLayout.Header>\n        <ApplicationLayout.Body\n            className='uikitDemo'\n            banner={\n                <ApplicationLayoutBodyBanner>\n                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\n                </ApplicationLayoutBodyBanner>\n            }\n        >\n            <div className='dummy-class' />\n        </ApplicationLayout.Body>\n    </ApplicationLayout>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"ApplicationLayout bg-lighter\" style=\"--ApplicationLayoutBodyBottomBarHeight: 54px;\">\n    <div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\">\n        <nav class=\"ApplicationHeader user-select-none\">\n            <div class=\"navbar-header\">\n                <span class=\"navbar-brand home-icon\">\n                </span>\n            </div>\n            <ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\">\n                <li class=\"dropdown\">\n                    <a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\">\n                        <span>RIO Service</span>\n                    </a>\n                </li>\n            </ul>\n            <ul class=\"SubmoduleNavigation nav\">\n                <li class=\"submodule \" data-nav-item-key=\"1\">\n                    <a aria-current=\"page\" class=\"active\" href=\"#components/appLayout\">Navigation 1</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"2\">\n                    <a href=\"#2\">Navigation 2</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"3\">\n                    <a href=\"#3\">Navigation 3</a>\n                </li>\n            </ul>\n            <ul class=\"ApplicationActionBar nav navbar-nav navbar-right \">\n            </ul>\n        </nav>\n    </div>\n    <div class=\"ApplicationLayoutBody uikitDemo\">\n        <div class=\"module-content-wrapper\">\n            <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>\n            <div class=\"module-content smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                    <div class=\"scrollbar-content-wrapper\">\n                        <div class=\"scrollbar-content\">\n                            <div class=\"dummy-class\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\">\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\">\n                    </div>\n                </div>\n            </div>\n        </div>\n        <span class=\"scroll-to-top\">\n            <button type=\"button\" class=\"btn btn-primary btn-icon-only\">\n                <span class=\"rioglyph rioglyph-arrow-up\">\n                </span>\n            </button>\n        </span>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "ApplicationLayout",
+                  "rows": [
+                    {
+                      "name": "layoutRef",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A React ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutHeader",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutSidebar",
+                  "rows": [
+                    {
+                      "name": "ref",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A React ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBody",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "innerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the inner module-content component."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any component given to the layout components will be rendered"
+                    },
+                    {
+                      "name": "navigation",
+                      "type": "any",
+                      "default": "",
+                      "description": "The ApplicationLayoutBodyNavigation component."
+                    },
+                    {
+                      "name": "enableScrollToTop",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Show scroll to top button after scrolling the content."
+                    },
+                    {
+                      "name": "forceScrollbar",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Always show vertical scrollbar to prevent the content from jumping."
+                    },
+                    {
+                      "name": "bottomBar",
+                      "type": "Node | String",
+                      "default": "",
+                      "description": "Optional bottom bar component or a simple string."
+                    },
+                    {
+                      "name": "bottomBarHeight",
+                      "type": "Number",
+                      "default": "54",
+                      "description": "Height of the bottomBar in pixel."
+                    },
+                    {
+                      "name": "banner",
+                      "type": "any",
+                      "default": "",
+                      "description": "The ApplicationLayoutBodyBanner component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyNavigation",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component. Example: \"has-offset\""
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyBottomBar",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "buttonAlignment",
+                      "type": "String",
+                      "default": "",
+                      "description": "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'"
+                    },
+                    {
+                      "name": "useBodyPaddings",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use same paddings (left and right) as the ApplicationLayoutBody."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyBanner",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "backgroundColor",
+                      "type": "String",
+                      "default": "bg-primary",
+                      "description": "One of our bg-color utility classes."
+                    },
+                    {
+                      "name": "textColor",
+                      "type": "string",
+                      "default": "text-color-white",
+                      "description": "One of our text-color utility classes."
+                    },
+                    {
+                      "name": "isSticky",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Sticky while scrolling."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Bottom bar example",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 4",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { NavLink } from 'react-router-dom';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\nimport ApplicationLayoutBodyBottomBar from '@rio-cloud/rio-uikit/ApplicationLayoutBodyBottomBar';\n\nconst navItems = [\n    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },\n    {\n        key: '2',\n        route: (\n            <NavLink to='/2' onClick={event => event.preventDefault()}>\n                Navigation 2\n            </NavLink>\n        ),\n    },\n    {\n        key: '3',\n        route: (\n            <NavLink to='/3' onClick={event => event.preventDefault()}>\n                Navigation 3\n            </NavLink>\n        ),\n    },\n];\n\nexport default () => (\n    <ApplicationLayout className='bg-lighter'>\n        <ApplicationLayout.Header>\n            <ApplicationHeader label='RIO Service' navItems={navItems} />\n        </ApplicationLayout.Header>\n        <ApplicationLayout.Body\n            className='uikitDemo'\n            bottomBar={\n                <ApplicationLayoutBodyBottomBar>\n                    <button type='button' className='btn btn-primary'>\n                        Button\n                    </button>\n                </ApplicationLayoutBodyBottomBar>\n            }\n        >\n            <div className='dummy-class' />\n        </ApplicationLayout.Body>\n    </ApplicationLayout>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"ApplicationLayout bg-lighter\" style=\"--ApplicationLayoutBodyBottomBarHeight: 54px;\">\n    <div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\">\n        <nav class=\"ApplicationHeader user-select-none\">\n            <div class=\"navbar-header\">\n                <span class=\"navbar-brand home-icon\">\n                </span>\n            </div>\n            <ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\">\n                <li class=\"dropdown\">\n                    <a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\">\n                        <span>RIO Service</span>\n                    </a>\n                </li>\n            </ul>\n            <ul class=\"SubmoduleNavigation nav\">\n                <li class=\"submodule \" data-nav-item-key=\"1\">\n                    <a aria-current=\"page\" class=\"active\" href=\"#components/appLayout\">Navigation 1</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"2\">\n                    <a href=\"#2\">Navigation 2</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"3\">\n                    <a href=\"#3\">Navigation 3</a>\n                </li>\n            </ul>\n            <ul class=\"ApplicationActionBar nav navbar-nav navbar-right \">\n            </ul>\n        </nav>\n    </div>\n    <div class=\"ApplicationLayoutBody has-footer uikitDemo\">\n        <div class=\"module-content-wrapper\">\n            <div class=\"module-content smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                    <div class=\"scrollbar-content-wrapper\">\n                        <div class=\"scrollbar-content\">\n                            <div class=\"dummy-class\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\">\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\">\n                    </div>\n                </div>\n            </div>\n        </div>\n        <span class=\"scroll-to-top\">\n            <button type=\"button\" class=\"btn btn-primary btn-icon-only\">\n                <span class=\"rioglyph rioglyph-arrow-up\">\n                </span>\n            </button>\n        </span>\n    </div>\n    <div class=\"ApplicationLayoutBodyBottomBar justify-content-between\">\n        <button type=\"button\" class=\"btn btn-primary\">Button</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "ApplicationLayout",
+                  "rows": [
+                    {
+                      "name": "layoutRef",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A React ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutHeader",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutSidebar",
+                  "rows": [
+                    {
+                      "name": "ref",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A React ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBody",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "innerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the inner module-content component."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any component given to the layout components will be rendered"
+                    },
+                    {
+                      "name": "navigation",
+                      "type": "any",
+                      "default": "",
+                      "description": "The ApplicationLayoutBodyNavigation component."
+                    },
+                    {
+                      "name": "enableScrollToTop",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Show scroll to top button after scrolling the content."
+                    },
+                    {
+                      "name": "forceScrollbar",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Always show vertical scrollbar to prevent the content from jumping."
+                    },
+                    {
+                      "name": "bottomBar",
+                      "type": "Node | String",
+                      "default": "",
+                      "description": "Optional bottom bar component or a simple string."
+                    },
+                    {
+                      "name": "bottomBarHeight",
+                      "type": "Number",
+                      "default": "54",
+                      "description": "Height of the bottomBar in pixel."
+                    },
+                    {
+                      "name": "banner",
+                      "type": "any",
+                      "default": "",
+                      "description": "The ApplicationLayoutBodyBanner component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyNavigation",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component. Example: \"has-offset\""
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyBottomBar",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "buttonAlignment",
+                      "type": "String",
+                      "default": "",
+                      "description": "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'"
+                    },
+                    {
+                      "name": "useBodyPaddings",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use same paddings (left and right) as the ApplicationLayoutBody."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyBanner",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "backgroundColor",
+                      "type": "String",
+                      "default": "bg-primary",
+                      "description": "One of our bg-color utility classes."
+                    },
+                    {
+                      "name": "textColor",
+                      "type": "string",
+                      "default": "text-color-white",
+                      "description": "One of our text-color utility classes."
+                    },
+                    {
+                      "name": "isSticky",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Sticky while scrolling."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Sidebar Example",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 5",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { NavLink } from 'react-router-dom';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\nimport Sidebar from '@rio-cloud/rio-uikit/Sidebar';\n\nconst navItems = [\n    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },\n    {\n        key: '2',\n        route: (\n            <NavLink to='/2' onClick={event => event.preventDefault()}>\n                Navigation 2\n            </NavLink>\n        ),\n    },\n    {\n        key: '3',\n        route: (\n            <NavLink to='/3' onClick={event => event.preventDefault()}>\n                Navigation 3\n            </NavLink>\n        ),\n    },\n];\n\nexport default () => (\n    <ApplicationLayout className='bg-lighter'>\n        <ApplicationLayout.Header>\n            <ApplicationHeader label='RIO Service' navItems={navItems} />\n        </ApplicationLayout.Header>\n        <ApplicationLayout.Sidebar className='right bg-white'>\n            <Sidebar\n                title='Sidebar Right'\n                titleClassName='padding-left-10'\n                closed={false}\n                onClose={() => {}}\n                position={Sidebar.RIGHT}\n                resizable\n                minWidth={300}\n                maxWidth={600}\n                footer={\n                    <button className='btn btn-primary' type='button' onClick={() => {}}>\n                        Button\n                    </button>\n                }\n            >\n                <div className='padding-left-20 padding-right-20'>Sidebar components may be added here...</div>\n            </Sidebar>\n        </ApplicationLayout.Sidebar>\n        <ApplicationLayout.Body className='uikitDemo'>\n            <div className='dummy-class' />\n        </ApplicationLayout.Body>\n    </ApplicationLayout>\n);"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"ApplicationLayout bg-lighter\" style=\"--ApplicationLayoutBodyBottomBarHeight: 54px;\">\n    <div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\">\n        <nav class=\"ApplicationHeader user-select-none\">\n            <div class=\"navbar-header\">\n                <span class=\"navbar-brand home-icon\">\n                </span>\n            </div>\n            <ul class=\"ModuleNavigation AppMenu user-select-none pointer-events-none\">\n                <li class=\"dropdown\">\n                    <a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive\" role=\"button\" id=\"basic-nav-dropdown\">\n                        <span>RIO Service</span>\n                    </a>\n                </li>\n            </ul>\n            <ul class=\"SubmoduleNavigation nav\">\n                <li class=\"submodule \" data-nav-item-key=\"1\">\n                    <a aria-current=\"page\" class=\"active\" href=\"#components/appLayout\">Navigation 1</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"2\">\n                    <a href=\"#2\">Navigation 2</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"3\">\n                    <a href=\"#3\">Navigation 3</a>\n                </li>\n            </ul>\n            <ul class=\"ApplicationActionBar nav navbar-nav navbar-right \">\n            </ul>\n        </nav>\n    </div>\n    <div class=\"ApplicationLayoutSidebar right bg-white\">\n        <div class=\"Sidebar fluid\" style=\"width: 350px; opacity: 1; display: block; transform: none;\">\n            <div class=\"SidebarResizeLimit\" style=\"right: 600px;\">\n            </div>\n            <div class=\"SidebarContent\">\n                <div class=\"SidebarHeader\">\n                    <div class=\"SidebarTitle padding-left-10\">Sidebar Right</div>\n                    <div class=\"SidebarButtons non-printable close\">\n                        <button type=\"button\" data-testid=\"sidebarCloseButton\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-remove\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"SidebarBody\">\n                    <div class=\"padding-left-20 padding-right-20\">Sidebar components may be added here...</div>\n                </div>\n                <div class=\"SidebarFooter\">\n                    <button class=\"btn btn-primary\" type=\"button\">Button</button>\n                </div>\n            </div>\n            <div class=\"Resizer resize-horizontal resize-left\">\n            </div>\n        </div>\n    </div>\n    <div class=\"ApplicationLayoutBody uikitDemo\">\n        <div class=\"module-content-wrapper\">\n            <div class=\"module-content smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                    <div class=\"scrollbar-content-wrapper\">\n                        <div class=\"scrollbar-content\">\n                            <div class=\"dummy-class\">\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\">\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\">\n                    </div>\n                </div>\n            </div>\n        </div>\n        <span class=\"scroll-to-top\">\n            <button type=\"button\" class=\"btn btn-primary btn-icon-only\">\n                <span class=\"rioglyph rioglyph-arrow-up\">\n                </span>\n            </button>\n        </span>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "ApplicationLayout",
+                  "rows": [
+                    {
+                      "name": "layoutRef",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A React ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutHeader",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutSidebar",
+                  "rows": [
+                    {
+                      "name": "ref",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A React ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBody",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "innerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the inner module-content component."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any component given to the layout components will be rendered"
+                    },
+                    {
+                      "name": "navigation",
+                      "type": "any",
+                      "default": "",
+                      "description": "The ApplicationLayoutBodyNavigation component."
+                    },
+                    {
+                      "name": "enableScrollToTop",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Show scroll to top button after scrolling the content."
+                    },
+                    {
+                      "name": "forceScrollbar",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Always show vertical scrollbar to prevent the content from jumping."
+                    },
+                    {
+                      "name": "bottomBar",
+                      "type": "Node | String",
+                      "default": "",
+                      "description": "Optional bottom bar component or a simple string."
+                    },
+                    {
+                      "name": "bottomBarHeight",
+                      "type": "Number",
+                      "default": "54",
+                      "description": "Height of the bottomBar in pixel."
+                    },
+                    {
+                      "name": "banner",
+                      "type": "any",
+                      "default": "",
+                      "description": "The ApplicationLayoutBodyBanner component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyNavigation",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component. Example: \"has-offset\""
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyBottomBar",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "buttonAlignment",
+                      "type": "String",
+                      "default": "",
+                      "description": "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'"
+                    },
+                    {
+                      "name": "useBodyPaddings",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use same paddings (left and right) as the ApplicationLayoutBody."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyBanner",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "backgroundColor",
+                      "type": "String",
+                      "default": "bg-primary",
+                      "description": "One of our bg-color utility classes."
+                    },
+                    {
+                      "name": "textColor",
+                      "type": "string",
+                      "default": "text-color-white",
+                      "description": "One of our text-color utility classes."
+                    },
+                    {
+                      "name": "isSticky",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Sticky while scrolling."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "heading": "Complete example with all components",
+      "body": "",
+      "examples": [
+        {
+          "caption": "Example 6",
+          "rendered_html": "<div class=\"playground-content  bg-white padding-20 padding-bottom-25\" style=\"width: 100%;\"><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;\"></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-van text-size-16 margin-right-2\"></span><span class=\"TreeLabelCount label label-condensed label-muted label-filled\">1</span></div><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\">4</span></div><div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\"><span class=\"rioglyph rioglyph-truck 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-bus 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\">7</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-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-van\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-1014</span><span class=\"TreeLabelNameTextSubline\">Asset 1000</span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d974\"><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-2323</span><span class=\"TreeLabelNameTextSubline\">Asset 1004</span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d973\"><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-truck\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-3496</span><span class=\"TreeLabelNameTextSubline\">Asset 1003</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-trailer\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-4416</span><span class=\"TreeLabelNameTextSubline\">Asset 1001</span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d976\"><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-truck\"></span><span class=\"TreeLabelNameText\"><span class=\"TreeLabelNameTextHeadline\">Vehicle-6334</span><span class=\"TreeLabelNameTextSubline\">Asset 1006</span></span></span></div><div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d977\"><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-7674</span><span class=\"TreeLabelNameTextSubline\">Asset 1007</span></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-7793</span><span class=\"TreeLabelNameTextSubline\">Asset 1005</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\">1</span><span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \"></span></span></div></div><div class=\"TreeTreeNothingFound display-flex justify-content-center text-size-20\n                padding-top-25 margin-top-25 margin-bottom-25\" style=\"position: absolute; top: 25px; left: 0px; width: 300px; height: 105px; margin: 0px; pointer-events: none; transform-origin: center center; z-index: 100;\"><span class=\"rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light\"></span></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 class=\"TreeNodeContainer user-select-none overflow-hidden open\" style=\"position: absolute; top: 0px; left: 0px; width: 1280px; height: 155px; margin: 0px; pointer-events: none; transform-origin: center center; z-index: 100;\"><div class=\"TreeTreeNothingFound display-flex justify-content-center text-size-20\n                padding-top-25 margin-top-25 margin-bottom-25\"><span class=\"rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light\"></span></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\">\nLorem 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.\n\nIn 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;\n\nPraesent 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></div>",
+          "tabs": [
+            {
+              "label": "React",
+              "language": "tsx",
+              "code": "import { useState, useEffect } from 'react';\nimport { Link, NavLink } from 'react-router-dom';\nimport random from 'lodash/fp/random';\nimport faker from 'faker';\nimport IframeResizer from 'iframe-resizer-react';\n\nimport ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';\nimport ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';\nimport ActionBarItem from '@rio-cloud/rio-uikit/ActionBarItem';\nimport ApplicationLayoutBodyBanner from '@rio-cloud/rio-uikit/ApplicationLayoutBodyBanner';\nimport ApplicationLayoutBodyBottomBar from '@rio-cloud/rio-uikit/ApplicationLayoutBodyBottomBar';\nimport ApplicationLayoutBodyNavigation from '@rio-cloud/rio-uikit/ApplicationLayoutBodyNavigation';\nimport SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';\nimport useResizeObserver from '@rio-cloud/rio-uikit/useResizeObserver';\nimport { SCREEN_MD } from '@rio-cloud/rio-uikit/DeviceUtils';\nimport Sidebar from '@rio-cloud/rio-uikit/Sidebar';\nimport Button from '@rio-cloud/rio-uikit/Button';\nimport Notification from '@rio-cloud/rio-uikit/Notification';\nimport AssetTree from '@rio-cloud/rio-uikit/AssetTree';\nimport TreeCategory from '@rio-cloud/rio-uikit/TreeCategory';\nimport Tree, { type TreeGroup } from '@rio-cloud/rio-uikit/Tree';\n\nimport { dummyTextLong } from '../../../utils/data';\n\nconst CATEGORY_ASSETS = 'trucks';\nconst CATEGORY_DRIVER = 'driver';\n\nconst navItems = [\n    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },\n    {\n        key: '2',\n        route: (\n            <NavLink to='/2' onClick={event => event.preventDefault()}>\n                Navigation 2\n            </NavLink>\n        ),\n    },\n    {\n        key: '3',\n        route: (\n            <NavLink to='/3' onClick={event => event.preventDefault()}>\n                Navigation 3\n            </NavLink>\n        ),\n    },\n];\n\nconst ServiceInfo = () => (\n    <ActionBarItem.List>\n        <ActionBarItem.ListItem icon='rioglyph-hand-right' onClick={() => Notification.info('Show Welcome Dialog')}>\n            <div className='display-flex align-items-center gap-5'>\n                <span>Welcome</span>\n                <span className='badge badge-primary'>1</span>\n            </div>\n        </ActionBarItem.ListItem>\n        <ActionBarItem.ListItem\n            icon='rioglyph-exclamation-sign'\n            onClick={() => Notification.info(\"Show What's New Dialog\")}\n        >\n            What's new?\n        </ActionBarItem.ListItem>\n        <ActionBarItem.ListItem icon='rioglyph-question-sign' onClick={() => Notification.info('Show Features Dialog')}>\n            Features\n        </ActionBarItem.ListItem>\n        <ActionBarItem.ListItem icon='rioglyph-envelope' hasLink>\n            <Link to='/components/appHeader'>Feedback</Link>\n        </ActionBarItem.ListItem>\n    </ActionBarItem.List>\n);\n\nconst ServiceInfoComponent = (\n    <ActionBarItem id='serviceInfo' className='myItem'>\n        <ActionBarItem.Icon>\n            <span className='icon rioglyph rioglyph-info-sign' />\n        </ActionBarItem.Icon>\n        <ActionBarItem.Popover\n            className='myItemPopover'\n            title={\n                <div>\n                    <span>Service XYZ</span>\n                    <span className='text-color-gray margin-left-10'>v1.1.0</span>\n                </div>\n            }\n        >\n            <ServiceInfo />\n        </ActionBarItem.Popover>\n    </ActionBarItem>\n);\n\nconst AccountMenuComponent = (\n    <ActionBarItem id='accountMenu' hidePopoverOnClick={false}>\n        <ActionBarItem.Icon>\n            <span className='icon rioglyph rioglyph-user' />\n        </ActionBarItem.Icon>\n        <ActionBarItem.Popover>\n            <ActionBarItem.List>\n                <ActionBarItem.ListItem>\n                    <div>\n                        <div className='text-medium'>This is just an example</div>\n                        <div>The real account menu comes here...</div>\n                    </div>\n                </ActionBarItem.ListItem>\n                <ActionBarItem.ListSeparator />\n                <ActionBarItem.ListItem className='padding-0'>\n                    <iframe\n                        className='buyButton height-30 padding-top-5 padding-bottom-5'\n                        title='ContactForm'\n                        src='https://contact-form.rio.cloud/contact_link.html?opener=https%3A%2F%2Fhome.rio.cloud%2F&amp;locale=en-GB'\n                    />\n                </ActionBarItem.ListItem>\n                <ActionBarItem.ListSeparator />\n                <ActionBarItem.ListItem className='padding-0'>\n                    <button\n                        type='button'\n                        className='btn btn-link btn-link-inline text-color-dark'\n                        onClick={() => Notification.info('Logout')}\n                    >\n                        <span className='rioglyph rioglyph-off margin-right-5 text-size-16 text-color-dark' />\n                        <span>Logout</span>\n                    </button>\n                </ActionBarItem.ListItem>\n            </ActionBarItem.List>\n        </ActionBarItem.Popover>\n    </ActionBarItem>\n);\n\nconst Notifications = (\n    <ActionBarItem id='notifications'>\n        <ActionBarItem.Icon>\n            <span className='icon rioglyph rioglyph-notification' />\n            <span className='badge badge-primary badge-indicator badge-indicator-pinging'>4</span>\n        </ActionBarItem.Icon>\n    </ActionBarItem>\n);\n\nexport default () => {\n    const [showSidebar, setShowSidebar] = useState(true);\n    const [isTreeOpen, setIsTreeOpen] = useState(true);\n    const [currentCategoryId, setCurrentCategoryId] = useState(CATEGORY_ASSETS);\n    const [selectedGroupIds, setSelectedGroupIds] = useState([]);\n    const [selectedItemIds, setSelectedItemIds] = useState([]);\n    const [expandedGroups, setExpandedGroups] = useState([assetGroups[0].id]);\n\n    // Listen for resize changes of the target element defined by the ref\n    // Note: this is for demo purpose only when resizing the demo playground.\n    // The SubNavigation component handles this case internally\n    const { ref, isMobile } = useResizer();\n    const bodyNavigationClasses = ''; // isMobile ? '' : 'has-offset';\n\n    const handleCloseSidebar = () => setShowSidebar(false);\n    const handleOpenSidebar = () => setShowSidebar(true);\n    const handleToggleTree = (toggle: boolean) => setIsTreeOpen(toggle);\n    const handleChangeCategories = (categoryId: string) => setCurrentCategoryId(categoryId);\n    const handleExpandGroup = (newExpandedGroups: string[]) => setExpandedGroups(newExpandedGroups);\n    const handleSelection = ({ items, groups }: any) => {\n        setSelectedItemIds(items);\n        setSelectedGroupIds(groups);\n    };\n\n    return (\n        <ApplicationLayout className='bg-lighter height-500' layoutRef={ref}>\n            <ApplicationLayout.Header>\n                <ApplicationHeader\n                    label='RIO Service'\n                    appNavigator={\n                        <IframeResizer className='iFrameResizer' src='https://menu.rio.cloud' checkOrigin={false} />\n                    }\n                    navItems={navItems}\n                    actionBarItems={[ServiceInfoComponent, Notifications, AccountMenuComponent]}\n                />\n            </ApplicationLayout.Header>\n            <ApplicationLayout.Sidebar>\n                <AssetTree\n                    minWidth={300}\n                    maxWidth={450}\n                    currentCategoryId={currentCategoryId}\n                    onCategoryChange={handleChangeCategories}\n                    height={500}\n                    isOpen={isTreeOpen}\n                    onToggleTree={handleToggleTree}\n                    useOffscreen\n                >\n                    <TreeCategory key={CATEGORY_ASSETS} id={CATEGORY_ASSETS} label='Assets' icon='rioglyph-truck'>\n                        <Tree\n                            groups={assetGroups}\n                            items={assets}\n                            searchPlaceholder='Find asset'\n                            expandedGroups={expandedGroups}\n                            onExpandGroupsChange={handleExpandGroup}\n                            selectedGroups={selectedGroupIds}\n                            selectedItems={selectedItemIds}\n                            onSelectionChange={handleSelection}\n                        />\n                    </TreeCategory>\n                    <TreeCategory key={CATEGORY_DRIVER} id={CATEGORY_DRIVER} label='My Drivers' icon='rioglyph-driver'>\n                        <Tree items={randomDrivers} hasMultiselect={false} />\n                    </TreeCategory>\n                </AssetTree>\n            </ApplicationLayout.Sidebar>\n            <ApplicationLayout.Sidebar className='right bg-white height-450'>\n                <Sidebar\n                    title='Sidebar Right'\n                    titleClassName='padding-left-10'\n                    closed={!showSidebar}\n                    onClose={handleCloseSidebar}\n                    position={Sidebar.RIGHT}\n                    enableFullscreenToggle\n                    resizable\n                    minWidth={300}\n                    maxWidth={600}\n                    switchModeBreakpoint={1400}\n                    footer={\n                        <button className='btn btn-primary' type='button' onClick={handleCloseSidebar}>\n                            Close\n                        </button>\n                    }\n                >\n                    <div className='padding-left-20 padding-right-20'>Sidebar components may be added here...</div>\n                </Sidebar>\n            </ApplicationLayout.Sidebar>\n            <ApplicationLayout.Body\n                className='uikitDemo'\n                banner={\n                    <ApplicationLayoutBodyBanner>\n                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.\n                    </ApplicationLayoutBodyBanner>\n                }\n                navigation={\n                    <ApplicationLayoutBodyNavigation className={bodyNavigationClasses}>\n                        <SubNavigation\n                            navItems={[\n                                {\n                                    key: '1',\n                                    route: <NavLink to='/components/appLayout'>Subnavigation 1</NavLink>,\n                                },\n                                {\n                                    key: '2',\n                                    route: (\n                                        <NavLink to='/2' onClick={event => event.preventDefault()}>\n                                            Subnavigation 2\n                                        </NavLink>\n                                    ),\n                                },\n                                {\n                                    key: '3',\n                                    route: (\n                                        <NavLink to='/3' onClick={event => event.preventDefault()}>\n                                            Subnavigation 3\n                                        </NavLink>\n                                    ),\n                                },\n                            ]}\n                        />\n                    </ApplicationLayoutBodyNavigation>\n                }\n                bottomBar={\n                    <ApplicationLayoutBodyBottomBar>\n                        <button type='button' className='btn btn-primary'>\n                            Bottom Button\n                        </button>\n                    </ApplicationLayoutBodyBottomBar>\n                }\n            >\n                <div>\n                    <div className='panel panel-default shadow-default'>\n                        <div className='panel-heading'>Sample Service Content</div>\n                        <div className='panel-body overflow-auto'>\n                            <Button onClick={handleOpenSidebar}>Open Sidebar</Button>\n                            <div className='margin-top-15'>{dummyTextLong}</div>\n                        </div>\n                    </div>\n                </div>\n            </ApplicationLayout.Body>\n        </ApplicationLayout>\n    );\n};\n\nconst useResizer = () => {\n    const [isMobile, setIsMobile] = useState(false);\n    const [ref, observerEntry] = useResizeObserver();\n    const contentRect = observerEntry?.contentRect;\n    useEffect(() => {\n        if (!contentRect) {\n            return;\n        }\n        const width = Math.round(contentRect.width);\n        if (width <= SCREEN_MD) {\n            setIsMobile(true);\n        } else {\n            setIsMobile(false);\n        }\n    }, [contentRect]);\n\n    return { ref, isMobile };\n};\n\nconst assetGroups: TreeGroup[] = [\n    {\n        id: '0250a8aa-721e-40b4-b1ea-7908acddfdf4',\n        name: 'Asset Group',\n    },\n    {\n        id: 'unassigned',\n        name: 'Ungrouped',\n        position: 'last',\n    },\n];\n\nconst assets = Array.from({ length: random(5, 20) }, (_, index) => ({\n    id: `010191ac-d06d-4567-b13a-7b7fd85d97${index}`,\n    name: `Vehicle-${random(1000, 9999)}`,\n    info: `Asset 1${String(index).padStart(3, '0')}`,\n    type: faker.random.arrayElement(['truck', 'trailer', 'van', 'bus']),\n    groupIds: [faker.random.arrayElement(assetGroups).id],\n}));\n\nconst randomDrivers = Array.from({ length: 200 }, (_, index) => ({\n    id: `74e8eb86-18a1-4abe-90cb-aeee7909f85${index}`,\n    name: {\n        firstName: faker.internet.userName(),\n        lastName: faker.name.firstName(),\n    },\n    type: 'driver',\n}));"
+            },
+            {
+              "label": "HTML",
+              "language": "html",
+              "code": "<div class=\"ApplicationLayout bg-lighter height-500\" style=\"--ApplicationLayoutBodyBottomBarHeight: 54px;\">\n    <div class=\"ApplicationLayoutHeader\" id=\"ApplicationLayoutHeader\">\n        <nav class=\"ApplicationHeader user-select-none\">\n            <div class=\"navbar-header\">\n                <span class=\"navbar-brand home-icon\">\n                </span>\n            </div>\n            <ul class=\"ModuleNavigation AppMenu user-select-none hasModules\">\n                <li class=\"dropdown\">\n                    <a class=\"ModuleNavigation-dropdown dropdown-toggle justify-content-between\" role=\"button\" id=\"basic-nav-dropdown\">\n                        <span>RIO Service</span>\n                        <span class=\"caret\">\n                        </span>\n                    </a>\n                    <ul role=\"menu\" class=\"dropdown-menu ModuleNavigation-dropdown-menu\">\n                        <li role=\"presentation\">\n                            <iframe title=\"iframe\" class=\"iFrameResizer\" src=\"https://menu.rio.cloud\" id=\"iFrameResizer0\" scrolling=\"no\" style=\"overflow: hidden; height: 139px;\">\n                            </iframe>\n                        </li>\n                    </ul>\n                </li>\n            </ul>\n            <ul class=\"SubmoduleNavigation nav\">\n                <li class=\"submodule \" data-nav-item-key=\"1\">\n                    <a aria-current=\"page\" class=\"active\" href=\"#components/appLayout\">Navigation 1</a>\n                </li>\n                <li class=\"submodule \" data-nav-item-key=\"2\">\n                    <a href=\"#2\">Navigation 2</a>\n                </li>\n                <li class=\"CollapsedDropdown dropdown \">\n                    <a id=\"basic-nav-dropdown\" role=\"button\" class=\"dropdown-toggle text-color-gray\" aria-haspopup=\"true\" aria-expanded=\"true\">\n                        <span class=\"rioglyph rioglyph-option-horizontal\" aria-hidden=\"true\">\n                        </span>\n                    </a>\n                    <ul class=\"dropdown-menu\" role=\"menu\" aria-labelledby=\"basic-nav-dropdown\">\n                        <li class=\"submodule\" data-nav-item-key=\"3\">\n                            <a href=\"#3\">Navigation 3</a>\n                        </li>\n                    </ul>\n                </li>\n            </ul>\n            <ul class=\"ApplicationActionBar nav navbar-nav navbar-right \">\n                <li role=\"presentation\" class=\"navigationItem\">\n                    <div class=\"ActionBarItem myItem\">\n                        <div class=\"ActionBarItemIcon\">\n                            <span class=\"icon rioglyph rioglyph-info-sign\">\n                            </span>\n                        </div>\n                    </div>\n                </li>\n                <li role=\"presentation\" class=\"navigationItem\">\n                    <div class=\"ActionBarItem\">\n                        <div class=\"ActionBarItemIcon\">\n                            <span class=\"icon rioglyph rioglyph-notification\">\n                            </span>\n                            <span class=\"badge badge-primary badge-indicator badge-indicator-pinging\">4</span>\n                        </div>\n                    </div>\n                </li>\n                <li role=\"presentation\" class=\"navigationItem\">\n                    <div class=\"ActionBarItem\">\n                        <div class=\"ActionBarItemIcon\">\n                            <span class=\"icon rioglyph rioglyph-user\">\n                            </span>\n                        </div>\n                    </div>\n                </li>\n            </ul>\n        </nav>\n    </div>\n    <div class=\"ApplicationLayoutSidebar\">\n        <div class=\"AssetTree fluid\" style=\"width: 350px; height: 500px;\">\n            <div class=\"AssetTreeResizeLimit\" style=\"left: 450px;\">\n            </div>\n            <div class=\"AssetTreeContent\">\n                <div class=\"TreeSidebar\">\n                    <ul class=\"TreeSidebarNavigation\">\n                        <li class=\"active\">\n                            <div class=\"selection-bubble\">\n                                <span class=\"rioglyph rioglyph-truck\">\n                                </span>\n                            </div>\n                        </li>\n                        <li class=\"\">\n                            <div class=\"selection-bubble\">\n                                <span class=\"rioglyph rioglyph-driver\">\n                                </span>\n                            </div>\n                        </li>\n                    </ul>\n                    <div class=\"TreeSidebarToggle\">\n                        <span class=\"rioglyph rioglyph-chevron-left\">\n                        </span>\n                    </div>\n                </div>\n                <div class=\"AssetTreeBody scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                    <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                        <div class=\"scrollbar-content-wrapper\">\n                            <div class=\"TreeOffscreenWrapper\">\n                                <div class=\"Tree\">\n                                    <div class=\"TreeHeader\">\n                                        <div class=\"TreeSearch\">\n                                            <div class=\"input-group flex-1-0\">\n                                                <span class=\"input-group-addon\">\n                                                    <span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\">\n                                                    </span>\n                                                </span>\n                                                <div class=\"ClearableInput input-group\">\n                                                    <input placeholder=\"Find asset\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                                                    <span class=\"clearButton hide\">\n                                                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                                        </span>\n                                                    </span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"TreeHead display-flex gap-5 padding-15\">\n                                            <div class=\"border border-right-only hidden-empty padding-right-10 margin-right-2\">\n                                                <div class=\"TreeSelectAll display-flex align-items-center\">\n                                                    <label class=\"checkbox margin-top--1\" tabindex=\"0\">\n                                                        <input type=\"checkbox\" class=\"margin-top--1\">\n                                                        <span class=\"checkbox-text\">\n                                                        </span>\n                                                    </label>\n                                                </div>\n                                            </div>\n                                            <div class=\"display-flex justify-content-between align-items-start width-100pct\">\n                                                <div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\">\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                        <span class=\"rioglyph rioglyph-van text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">1</span>\n                                                    </div>\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                        <span class=\"rioglyph rioglyph-trailer text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">4</span>\n                                                    </div>\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                        <span class=\"rioglyph rioglyph-truck text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">2</span>\n                                                    </div>\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer\">\n                                                        <span class=\"rioglyph rioglyph-bus text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">1</span>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"TreeRoot user-select-none overflow-hidden\" style=\"position: relative;\">\n                                        <div class=\"TreeNodeContainer user-select-none overflow-hidden open\" data-id=\"0250a8aa-721e-40b4-b1ea-7908acddfdf4\">\n                                            <div class=\"TreeNode from-group\" data-key=\"0250a8aa-721e-40b4-b1ea-7908acddfdf4\">\n                                                <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                    <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                    <span class=\"checkbox-text\">\n                                                    </span>\n                                                </label>\n                                                <span class=\"TreeLabel TreeLabelName\">\n                                                    <span class=\"TreeLabelNameText\">\n                                                        <span class=\"TreeLabelNameTextHeadline\">Asset Group</span>\n                                                    </span>\n                                                    <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">7</span>\n                                                    <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                                    </span>\n                                                </span>\n                                            </div>\n                                            <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d970\">\n                                                <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                    <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                    <span class=\"checkbox-text\">\n                                                    </span>\n                                                </label>\n                                                <span class=\"TreeLabel TreeLabelName\">\n                                                    <span class=\"rioglyph rioglyph-van\">\n                                                    </span>\n                                                    <span class=\"TreeLabelNameText\">\n                                                        <span class=\"TreeLabelNameTextHeadline\">Vehicle-1014</span>\n                                                        <span class=\"TreeLabelNameTextSubline\">Asset 1000</span>\n                                                    </span>\n                                                </span>\n                                            </div>\n                                            <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d974\">\n                                                <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                    <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                    <span class=\"checkbox-text\">\n                                                    </span>\n                                                </label>\n                                                <span class=\"TreeLabel TreeLabelName\">\n                                                    <span class=\"rioglyph rioglyph-bus\">\n                                                    </span>\n                                                    <span class=\"TreeLabelNameText\">\n                                                        <span class=\"TreeLabelNameTextHeadline\">Vehicle-2323</span>\n                                                        <span class=\"TreeLabelNameTextSubline\">Asset 1004</span>\n                                                    </span>\n                                                </span>\n                                            </div>\n                                            <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d973\">\n                                                <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                    <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                    <span class=\"checkbox-text\">\n                                                    </span>\n                                                </label>\n                                                <span class=\"TreeLabel TreeLabelName\">\n                                                    <span class=\"rioglyph rioglyph-truck\">\n                                                    </span>\n                                                    <span class=\"TreeLabelNameText\">\n                                                        <span class=\"TreeLabelNameTextHeadline\">Vehicle-3496</span>\n                                                        <span class=\"TreeLabelNameTextSubline\">Asset 1003</span>\n                                                    </span>\n                                                </span>\n                                            </div>\n                                            <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d971\">\n                                                <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                    <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                    <span class=\"checkbox-text\">\n                                                    </span>\n                                                </label>\n                                                <span class=\"TreeLabel TreeLabelName\">\n                                                    <span class=\"rioglyph rioglyph-trailer\">\n                                                    </span>\n                                                    <span class=\"TreeLabelNameText\">\n                                                        <span class=\"TreeLabelNameTextHeadline\">Vehicle-4416</span>\n                                                        <span class=\"TreeLabelNameTextSubline\">Asset 1001</span>\n                                                    </span>\n                                                </span>\n                                            </div>\n                                            <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d976\">\n                                                <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                    <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                    <span class=\"checkbox-text\">\n                                                    </span>\n                                                </label>\n                                                <span class=\"TreeLabel TreeLabelName\">\n                                                    <span class=\"rioglyph rioglyph-truck\">\n                                                    </span>\n                                                    <span class=\"TreeLabelNameText\">\n                                                        <span class=\"TreeLabelNameTextHeadline\">Vehicle-6334</span>\n                                                        <span class=\"TreeLabelNameTextSubline\">Asset 1006</span>\n                                                    </span>\n                                                </span>\n                                            </div>\n                                            <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d977\">\n                                                <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                    <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                    <span class=\"checkbox-text\">\n                                                    </span>\n                                                </label>\n                                                <span class=\"TreeLabel TreeLabelName\">\n                                                    <span class=\"rioglyph rioglyph-trailer\">\n                                                    </span>\n                                                    <span class=\"TreeLabelNameText\">\n                                                        <span class=\"TreeLabelNameTextHeadline\">Vehicle-7674</span>\n                                                        <span class=\"TreeLabelNameTextSubline\">Asset 1007</span>\n                                                    </span>\n                                                </span>\n                                            </div>\n                                            <div class=\"TreeLeaf form-group margin-bottom-0\" data-key=\"010191ac-d06d-4567-b13a-7b7fd85d975\">\n                                                <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                    <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                    <span class=\"checkbox-text\">\n                                                    </span>\n                                                </label>\n                                                <span class=\"TreeLabel TreeLabelName\">\n                                                    <span class=\"rioglyph rioglyph-trailer\">\n                                                    </span>\n                                                    <span class=\"TreeLabelNameText\">\n                                                        <span class=\"TreeLabelNameTextHeadline\">Vehicle-7793</span>\n                                                        <span class=\"TreeLabelNameTextSubline\">Asset 1005</span>\n                                                    </span>\n                                                </span>\n                                            </div>\n                                        </div>\n                                        <div class=\"TreeNodeContainer user-select-none overflow-hidden\" data-id=\"unassigned\">\n                                            <div class=\"TreeNode from-group\" data-key=\"unassigned\">\n                                                <label class=\"checkbox TreeCheckbox\" tabindex=\"0\">\n                                                    <input type=\"checkbox\" class=\"TreeCheckbox\">\n                                                    <span class=\"checkbox-text\">\n                                                    </span>\n                                                </label>\n                                                <span class=\"TreeLabel TreeLabelName\">\n                                                    <span class=\"TreeLabelNameText\">\n                                                        <span class=\"TreeLabelNameTextHeadline\">Ungrouped</span>\n                                                    </span>\n                                                    <span class=\"TreeLabelCount label label-muted label-filled label-condensed\">1</span>\n                                                    <span class=\"TreeLabelExpander rioglyph rioglyph-chevron-down \">\n                                                    </span>\n                                                </span>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"TreeOffscreenWrapper position-offscreen pointer-events-none\">\n                                <div class=\"Tree\">\n                                    <div class=\"TreeHeader\">\n                                        <div class=\"TreeSearch\">\n                                            <div class=\"input-group flex-1-0\">\n                                                <span class=\"input-group-addon\">\n                                                    <span class=\"rioglyph rioglyph-search\" aria-hidden=\"true\">\n                                                    </span>\n                                                </span>\n                                                <div class=\"ClearableInput input-group\">\n                                                    <input placeholder=\"Type here to filter by name\" class=\"form-control\" type=\"text\" tabindex=\"0\" value=\"\">\n                                                    <span class=\"clearButton hide\">\n                                                        <span class=\"clearButtonIcon rioglyph rioglyph-remove-sign\">\n                                                        </span>\n                                                    </span>\n                                                </div>\n                                            </div>\n                                        </div>\n                                        <div class=\"TreeHead display-flex gap-5 padding-15\">\n                                            <div class=\"border border-right-only hidden-empty padding-right-10 margin-right-2\">\n                                            </div>\n                                            <div class=\"display-flex justify-content-between align-items-start width-100pct\">\n                                                <div class=\"TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3\">\n                                                    <div class=\"TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none\">\n                                                        <span class=\"rioglyph rioglyph-driver text-size-16 margin-right-2\">\n                                                        </span>\n                                                        <span class=\"TreeLabelCount label label-condensed label-muted label-filled\">200</span>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"TreeRoot user-select-none overflow-hidden\" style=\"position: relative;\">\n                                        <div class=\"tree-virtual-scrollbar scrollbar-fly-in smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                                            <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                                                <div class=\"scrollbar-content-wrapper\">\n                                                    <div class=\"flat-list\" style=\"height: 8200px; position: relative;\">\n                                                    </div>\n                                                </div>\n                                            </div>\n                                            <div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\">\n                                                <div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\">\n                                                </div>\n                                            </div>\n                                            <div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\">\n                                                <div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\">\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"scrollbar-track-horizontal\" style=\"position: absolute; height: 6px; display: none;\">\n                        <div class=\"scrollbar-thumb-horizontal\" style=\"position: relative; display: block; height: 100%;\">\n                        </div>\n                    </div>\n                    <div class=\"scrollbar-track-vertical\" style=\"position: absolute; width: 6px; display: none;\">\n                        <div class=\"scrollbar-thumb-vertical\" style=\"position: relative; display: block; width: 100%;\">\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div class=\"Resizer resize-horizontal resize-right\">\n            </div>\n        </div>\n    </div>\n    <div class=\"ApplicationLayoutSidebar right bg-white height-450\">\n        <div class=\"Sidebar fly\" style=\"width: 350px; opacity: 1; display: block; transform: none;\">\n            <div class=\"SidebarResizeLimit\" style=\"right: 600px;\">\n            </div>\n            <div class=\"SidebarContent\">\n                <div class=\"SidebarHeader\">\n                    <div class=\"SidebarTitle padding-left-10\">Sidebar Right</div>\n                    <div class=\"SidebarButtons non-printable close\">\n                        <button type=\"button\" data-testid=\"sidebarFullscreenToggle\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-resize-full\">\n                            </span>\n                        </button>\n                        <div class=\"SidebarButtons-spacer\">\n                        </div>\n                        <button type=\"button\" data-testid=\"sidebarCloseButton\" class=\"btn btn-muted btn-icon-only btn-component\" tabindex=\"0\">\n                            <span class=\"rioglyph rioglyph-remove\">\n                            </span>\n                        </button>\n                    </div>\n                </div>\n                <div class=\"SidebarBody\">\n                    <div class=\"padding-left-20 padding-right-20\">Sidebar components may be added here...</div>\n                </div>\n                <div class=\"SidebarFooter\">\n                    <button class=\"btn btn-primary\" type=\"button\">Close</button>\n                </div>\n            </div>\n            <div class=\"Resizer resize-horizontal resize-left\">\n            </div>\n        </div>\n    </div>\n    <div class=\"ApplicationLayoutBody has-footer uikitDemo\">\n        <div class=\"module-content-wrapper\">\n            <div class=\"ApplicationLayoutBodyNavigation\">\n                <div class=\"SubNavigation width-100pct overflow-auto\">\n                    <ul class=\"SubmoduleNavigation nav\">\n                        <li class=\"submodule\" data-nav-item-key=\"1\">\n                            <a aria-current=\"page\" class=\"active\" href=\"#components/appLayout\">Subnavigation 1</a>\n                        </li>\n                        <li class=\"submodule\" data-nav-item-key=\"2\">\n                            <a href=\"#2\">Subnavigation 2</a>\n                        </li>\n                        <li class=\"submodule\" data-nav-item-key=\"3\">\n                            <a href=\"#3\">Subnavigation 3</a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n            <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>\n            <div class=\"module-content smooth-scrollbar-wrapper\" style=\"position: relative; overflow: hidden; width: 100%; height: 100%;\">\n                <div class=\"scrollbar-view\" style=\"position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;\">\n                    <div class=\"scrollbar-content-wrapper\">\n                        <div class=\"scrollbar-content\">\n                            <div>\n                                <div class=\"panel panel-default shadow-default\">\n                                    <div class=\"panel-heading\">Sample Service Content</div>\n                                    <div class=\"panel-body overflow-auto\">\n                                        <button type=\"button\" class=\"btn btn-default btn-component\" tabindex=\"0\">Open Sidebar</button>\n                                        <div class=\"margin-top-15\">\n                                            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.\n\n                                            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;\n\n                                            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>\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; height: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-horizontal scrollbar-thumb-size-large\" style=\"position: relative; display: block; height: 100%;\">\n                    </div>\n                </div>\n                <div class=\"scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset\" style=\"position: absolute; width: 6px; display: none;\">\n                    <div class=\"scrollbar-thumb-vertical scrollbar-thumb-size-large\" style=\"position: relative; display: block; width: 100%;\">\n                    </div>\n                </div>\n            </div>\n        </div>\n        <span class=\"scroll-to-top\">\n            <button type=\"button\" class=\"btn btn-primary btn-icon-only\">\n                <span class=\"rioglyph rioglyph-arrow-up\">\n                </span>\n            </button>\n        </span>\n    </div>\n    <div class=\"ApplicationLayoutBodyBottomBar justify-content-between\">\n        <button type=\"button\" class=\"btn btn-primary\">Bottom Button</button>\n    </div>\n</div>"
+            },
+            {
+              "label": "Props",
+              "language": "json",
+              "code": null,
+              "props": [
+                {
+                  "heading": "ApplicationLayout",
+                  "rows": [
+                    {
+                      "name": "layoutRef",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A React ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutHeader",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutSidebar",
+                  "rows": [
+                    {
+                      "name": "ref",
+                      "type": "React.ref",
+                      "default": "",
+                      "description": "A React ref function assigned to the wrapper element."
+                    },
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBody",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "innerClassName",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the inner module-content component."
+                    },
+                    {
+                      "name": "children",
+                      "type": "any",
+                      "default": "",
+                      "description": "Any component given to the layout components will be rendered"
+                    },
+                    {
+                      "name": "navigation",
+                      "type": "any",
+                      "default": "",
+                      "description": "The ApplicationLayoutBodyNavigation component."
+                    },
+                    {
+                      "name": "enableScrollToTop",
+                      "type": "Boolean",
+                      "default": "true",
+                      "description": "Show scroll to top button after scrolling the content."
+                    },
+                    {
+                      "name": "forceScrollbar",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Always show vertical scrollbar to prevent the content from jumping."
+                    },
+                    {
+                      "name": "bottomBar",
+                      "type": "Node | String",
+                      "default": "",
+                      "description": "Optional bottom bar component or a simple string."
+                    },
+                    {
+                      "name": "bottomBarHeight",
+                      "type": "Number",
+                      "default": "54",
+                      "description": "Height of the bottomBar in pixel."
+                    },
+                    {
+                      "name": "banner",
+                      "type": "any",
+                      "default": "",
+                      "description": "The ApplicationLayoutBodyBanner component."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyNavigation",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component. Example: \"has-offset\""
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyBottomBar",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "buttonAlignment",
+                      "type": "String",
+                      "default": "",
+                      "description": "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'"
+                    },
+                    {
+                      "name": "useBodyPaddings",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Use same paddings (left and right) as the ApplicationLayoutBody."
+                    }
+                  ]
+                },
+                {
+                  "heading": "ApplicationLayoutBodyBanner",
+                  "rows": [
+                    {
+                      "name": "className",
+                      "type": "String",
+                      "default": "",
+                      "description": "Additional class names that are added to the respective component."
+                    },
+                    {
+                      "name": "backgroundColor",
+                      "type": "String",
+                      "default": "bg-primary",
+                      "description": "One of our bg-color utility classes."
+                    },
+                    {
+                      "name": "textColor",
+                      "type": "string",
+                      "default": "text-color-white",
+                      "description": "One of our text-color utility classes."
+                    },
+                    {
+                      "name": "isSticky",
+                      "type": "Boolean",
+                      "default": "false",
+                      "description": "Sticky while scrolling."
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "see_also": []
+}