# ApplicationLayout

*Category:* Components
*Section:* Application
*Source:* https://uikit.developers.rio.cloud/#/components/appLayout
*Captured:* 2026-04-27T14:57:12.347Z

The ApplicationLayout components consists of three sub-components: ApplicationHeader, ApplicationBody, ApplicationSidebar

## ApplicationLayout

The ApplicationHeader and ApplicationSidebar components are optional. The Body component is dedicated to the actual service content.

> Note: Do not wrap direct children of ApplicationLayout, due to css height calculations. If you really need to wrap your children, use<React.Fragment> instead

> Note: If you remove the ApplicationHeader from you SPA, other elements, for example the ApplicationBody, will resize the height to fill the <body> node.

## Default example

### Example: Example 1

RIO Service

Navigation 1
Navigation 2
Navigation 3

#### React (tsx)

```tsx
import { NavLink } from 'react-router-dom';

import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';

const navItems = [
    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },
    {
        key: '2',
        route: (
            <NavLink to='/2' onClick={event => event.preventDefault()}>
                Navigation 2
            </NavLink>
        ),
    },
    {
        key: '3',
        route: (
            <NavLink to='/3' onClick={event => event.preventDefault()}>
                Navigation 3
            </NavLink>
        ),
    },
];

export default () => (
    <ApplicationLayout className='bg-lighter'>
        <ApplicationLayout.Header>
            <ApplicationHeader label='RIO Service' navItems={navItems} />
        </ApplicationLayout.Header>
        <ApplicationLayout.Body className='uikitDemo'>
            <div className='dummy-class' />
        </ApplicationLayout.Body>
    </ApplicationLayout>
);
```

#### HTML (html)

```html
<div class="ApplicationLayout bg-lighter" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
        <nav class="ApplicationHeader user-select-none">
            <div class="navbar-header">
                <span class="navbar-brand home-icon">
                </span>
            </div>
            <ul class="ModuleNavigation AppMenu user-select-none pointer-events-none">
                <li class="dropdown">
                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive" role="button" id="basic-nav-dropdown">
                        <span>RIO Service</span>
                    </a>
                </li>
            </ul>
            <ul class="SubmoduleNavigation nav">
                <li class="submodule " data-nav-item-key="1">
                    <a aria-current="page" class="active" href="#/components/appLayout" data-discover="true">Navigation 1</a>
                </li>
                <li class="submodule " data-nav-item-key="2">
                    <a class="" href="#/2" data-discover="true">Navigation 2</a>
                </li>
                <li class="submodule " data-nav-item-key="3">
                    <a class="" href="#/3" data-discover="true">Navigation 3</a>
                </li>
            </ul>
            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
            </ul>
        </nav>
    </div>
    <div class="ApplicationLayoutBody uikitDemo">
        <div class="module-content-wrapper">
            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
                    <div class="scrollbar-content-wrapper">
                        <div class="scrollbar-content">
                            <div class="dummy-class">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
                    </div>
                </div>
                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
                    </div>
                </div>
            </div>
        </div>
        <span class="scroll-to-top">
            <button type="button" class="btn btn-primary btn-icon-only">
                <span class="rioglyph rioglyph-arrow-up">
                </span>
            </button>
        </span>
    </div>
</div>
```

#### Props: ApplicationLayout

### ApplicationLayout

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
| className | string | — | Additional class names that are added to the respective component |

#### Props: ApplicationLayoutHeader

### ApplicationLayoutHeader

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component. |

#### Props: ApplicationLayoutSidebar

### ApplicationLayoutSidebar

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component |

#### Props: ApplicationLayoutBody

### ApplicationLayoutBody

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
| className | string | — | Additional class names that are added to the respective component. |

#### Props: ApplicationLayoutBodyNavigation

### ApplicationLayoutBodyNavigation

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |

#### Props: ApplicationLayoutBodyBottomBar

### ApplicationLayoutBodyBottomBar

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component |
| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |

#### Props: ApplicationLayoutBodyBanner

### ApplicationLayoutBodyBanner

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| textColor | string | `text-color-white` | One of the text-color utility classes. |
| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
| isSticky | boolean | false | Allows sticky banner while scrolling. |
| className | string | — | Additional class names that are added to the respective component. |

## SubNavigation example

### Example: Example 2

RIO Service

Navigation 1
Navigation 2
Navigation 3

Subnavigation 1
Subnavigation 2
Subnavigation 3

#### React (tsx)

```tsx
import { useState, useEffect } from 'react';
import { NavLink } from 'react-router-dom';

import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
import ApplicationLayoutBodyNavigation from '@rio-cloud/rio-uikit/ApplicationLayoutBodyNavigation';
import SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';
import useResizeObserver from '@rio-cloud/rio-uikit/useResizeObserver';
import { SCREEN_MD } from '@rio-cloud/rio-uikit/DeviceUtils';

export default () => {
    const currentLocation = window.location.hash.replace('#', '/');
    const navItems = [
        { key: '1', route: <NavLink to={currentLocation}>Navigation 1</NavLink> },
        {
            key: '2',
            route: (
                <NavLink to='/2' onClick={event => event.preventDefault()}>
                    Navigation 2
                </NavLink>
            ),
        },
        {
            key: '3',
            route: (
                <NavLink to='/3' onClick={event => event.preventDefault()}>
                    Navigation 3
                </NavLink>
            ),
        },
    ];

    // Listen for resize changes of the target element defined by the ref
    // Note: this is for demo purpose only when resizing the demo playground.
    // The SubNavigation component handles this case internally
    const { ref, isMobile } = useResizer();
    const bodyNavigationClasses = isMobile ? '' : 'has-offset';

    return (
        <ApplicationLayout className='bg-lighter' layoutRef={ref}>
            <ApplicationLayout.Header>
                <ApplicationHeader label='RIO Service' navItems={navItems} />
            </ApplicationLayout.Header>
            <ApplicationLayout.Body
                className='uikitDemo'
                navigation={
                    <ApplicationLayoutBodyNavigation className={bodyNavigationClasses}>
                        <SubNavigation
                            navItems={[
                                {
                                    key: '1',
                                    route: <NavLink to={currentLocation}>Subnavigation 1</NavLink>,
                                },
                                {
                                    key: '2',
                                    route: (
                                        <NavLink to='/2' onClick={event => event.preventDefault()}>
                                            Subnavigation 2
                                        </NavLink>
                                    ),
                                },
                                {
                                    key: '3',
                                    route: (
                                        <NavLink to='/3' onClick={event => event.preventDefault()}>
                                            Subnavigation 3
                                        </NavLink>
                                    ),
                                },
                            ]}
                        />
                    </ApplicationLayoutBodyNavigation>
                }
            >
                <div className='dummy-class' />
            </ApplicationLayout.Body>
        </ApplicationLayout>
    );
};

const useResizer = () => {
    const [isMobile, setIsMobile] = useState(false);
    const [ref, observerEntry] = useResizeObserver();
    const contentRect = observerEntry?.contentRect;
    useEffect(() => {
        if (!contentRect) {
            return;
        }
        const width = Math.round(contentRect.width);
        if (width <= SCREEN_MD) {
            setIsMobile(true);
        } else {
            setIsMobile(false);
        }
    }, [contentRect]);

    return { ref, isMobile };
};
```

#### HTML (html)

```html
<div class="ApplicationLayout bg-lighter" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
        <nav class="ApplicationHeader user-select-none">
            <div class="navbar-header">
                <span class="navbar-brand home-icon">
                </span>
            </div>
            <ul class="ModuleNavigation AppMenu user-select-none pointer-events-none">
                <li class="dropdown">
                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive" role="button" id="basic-nav-dropdown">
                        <span>RIO Service</span>
                    </a>
                </li>
            </ul>
            <ul class="SubmoduleNavigation nav">
                <li class="submodule " data-nav-item-key="1">
                    <a aria-current="page" class="active" href="//components/appLayout">Navigation 1</a>
                </li>
                <li class="submodule " data-nav-item-key="2">
                    <a class="" href="#/2" data-discover="true">Navigation 2</a>
                </li>
                <li class="submodule " data-nav-item-key="3">
                    <a class="" href="#/3" data-discover="true">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 class="" href="#/2" data-discover="true">Subnavigation 2</a>
                        </li>
                        <li class="submodule" data-nav-item-key="3">
                            <a class="" href="#/3" data-discover="true">Subnavigation 3</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
                    <div class="scrollbar-content-wrapper">
                        <div class="scrollbar-content">
                            <div class="dummy-class">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
                    </div>
                </div>
                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
                    </div>
                </div>
            </div>
        </div>
        <span class="scroll-to-top">
            <button type="button" class="btn btn-primary btn-icon-only">
                <span class="rioglyph rioglyph-arrow-up">
                </span>
            </button>
        </span>
    </div>
</div>
```

#### Props: ApplicationLayout

### ApplicationLayout

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
| className | string | — | Additional class names that are added to the respective component |

#### Props: ApplicationLayoutHeader

### ApplicationLayoutHeader

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component. |

#### Props: ApplicationLayoutSidebar

### ApplicationLayoutSidebar

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component |

#### Props: ApplicationLayoutBody

### ApplicationLayoutBody

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
| className | string | — | Additional class names that are added to the respective component. |

#### Props: ApplicationLayoutBodyNavigation

### ApplicationLayoutBodyNavigation

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |

#### Props: ApplicationLayoutBodyBottomBar

### ApplicationLayoutBodyBottomBar

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component |
| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |

#### Props: ApplicationLayoutBodyBanner

### ApplicationLayoutBodyBanner

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| textColor | string | `text-color-white` | One of the text-color utility classes. |
| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
| isSticky | boolean | false | Allows sticky banner while scrolling. |
| className | string | — | Additional class names that are added to the respective component. |

## Body banner example

### Example: Example 3

RIO Service

Navigation 1
Navigation 2
Navigation 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.

#### React (tsx)

```tsx
import { NavLink } from 'react-router-dom';

import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
import ApplicationLayoutBodyBanner from '@rio-cloud/rio-uikit/ApplicationLayoutBodyBanner';

const navItems = [
    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },
    {
        key: '2',
        route: (
            <NavLink to='/2' onClick={event => event.preventDefault()}>
                Navigation 2
            </NavLink>
        ),
    },
    {
        key: '3',
        route: (
            <NavLink to='/3' onClick={event => event.preventDefault()}>
                Navigation 3
            </NavLink>
        ),
    },
];

export default () => (
    <ApplicationLayout className='bg-lighter'>
        <ApplicationLayout.Header>
            <ApplicationHeader label='RIO Service' navItems={navItems} />
        </ApplicationLayout.Header>
        <ApplicationLayout.Body
            className='uikitDemo'
            banner={
                <ApplicationLayoutBodyBanner>
                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.
                </ApplicationLayoutBodyBanner>
            }
        >
            <div className='dummy-class' />
        </ApplicationLayout.Body>
    </ApplicationLayout>
);
```

#### HTML (html)

```html
<div class="ApplicationLayout bg-lighter" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
        <nav class="ApplicationHeader user-select-none">
            <div class="navbar-header">
                <span class="navbar-brand home-icon">
                </span>
            </div>
            <ul class="ModuleNavigation AppMenu user-select-none pointer-events-none">
                <li class="dropdown">
                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive" role="button" id="basic-nav-dropdown">
                        <span>RIO Service</span>
                    </a>
                </li>
            </ul>
            <ul class="SubmoduleNavigation nav">
                <li class="submodule " data-nav-item-key="1">
                    <a aria-current="page" class="active" href="#/components/appLayout" data-discover="true">Navigation 1</a>
                </li>
                <li class="submodule " data-nav-item-key="2">
                    <a class="" href="#/2" data-discover="true">Navigation 2</a>
                </li>
                <li class="submodule " data-nav-item-key="3">
                    <a class="" href="#/3" data-discover="true">Navigation 3</a>
                </li>
            </ul>
            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
            </ul>
        </nav>
    </div>
    <div class="ApplicationLayoutBody uikitDemo">
        <div class="module-content-wrapper">
            <div class="ApplicationLayoutBodyBanner text-color-white bg-primary position-sticky top-0 z-index-3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.</div>
            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
                    <div class="scrollbar-content-wrapper">
                        <div class="scrollbar-content">
                            <div class="dummy-class">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
                    </div>
                </div>
                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
                    </div>
                </div>
            </div>
        </div>
        <span class="scroll-to-top">
            <button type="button" class="btn btn-primary btn-icon-only">
                <span class="rioglyph rioglyph-arrow-up">
                </span>
            </button>
        </span>
    </div>
</div>
```

#### Props: ApplicationLayout

### ApplicationLayout

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
| className | string | — | Additional class names that are added to the respective component |

#### Props: ApplicationLayoutHeader

### ApplicationLayoutHeader

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component. |

#### Props: ApplicationLayoutSidebar

### ApplicationLayoutSidebar

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component |

#### Props: ApplicationLayoutBody

### ApplicationLayoutBody

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
| className | string | — | Additional class names that are added to the respective component. |

#### Props: ApplicationLayoutBodyNavigation

### ApplicationLayoutBodyNavigation

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |

#### Props: ApplicationLayoutBodyBottomBar

### ApplicationLayoutBodyBottomBar

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component |
| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |

#### Props: ApplicationLayoutBodyBanner

### ApplicationLayoutBodyBanner

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| textColor | string | `text-color-white` | One of the text-color utility classes. |
| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
| isSticky | boolean | false | Allows sticky banner while scrolling. |
| className | string | — | Additional class names that are added to the respective component. |

## Bottom bar example

### Example: Example 4

RIO Service

Navigation 1
Navigation 2
Navigation 3

Button

#### React (tsx)

```tsx
import { NavLink } from 'react-router-dom';

import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
import ApplicationLayoutBodyBottomBar from '@rio-cloud/rio-uikit/ApplicationLayoutBodyBottomBar';

const navItems = [
    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },
    {
        key: '2',
        route: (
            <NavLink to='/2' onClick={event => event.preventDefault()}>
                Navigation 2
            </NavLink>
        ),
    },
    {
        key: '3',
        route: (
            <NavLink to='/3' onClick={event => event.preventDefault()}>
                Navigation 3
            </NavLink>
        ),
    },
];

export default () => (
    <ApplicationLayout className='bg-lighter'>
        <ApplicationLayout.Header>
            <ApplicationHeader label='RIO Service' navItems={navItems} />
        </ApplicationLayout.Header>
        <ApplicationLayout.Body
            className='uikitDemo'
            bottomBar={
                <ApplicationLayoutBodyBottomBar>
                    <button type='button' className='btn btn-primary'>
                        Button
                    </button>
                </ApplicationLayoutBodyBottomBar>
            }
        >
            <div className='dummy-class' />
        </ApplicationLayout.Body>
    </ApplicationLayout>
);
```

#### HTML (html)

```html
<div class="ApplicationLayout bg-lighter" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
        <nav class="ApplicationHeader user-select-none">
            <div class="navbar-header">
                <span class="navbar-brand home-icon">
                </span>
            </div>
            <ul class="ModuleNavigation AppMenu user-select-none pointer-events-none">
                <li class="dropdown">
                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive" role="button" id="basic-nav-dropdown">
                        <span>RIO Service</span>
                    </a>
                </li>
            </ul>
            <ul class="SubmoduleNavigation nav">
                <li class="submodule " data-nav-item-key="1">
                    <a aria-current="page" class="active" href="#/components/appLayout" data-discover="true">Navigation 1</a>
                </li>
                <li class="submodule " data-nav-item-key="2">
                    <a class="" href="#/2" data-discover="true">Navigation 2</a>
                </li>
                <li class="submodule " data-nav-item-key="3">
                    <a class="" href="#/3" data-discover="true">Navigation 3</a>
                </li>
            </ul>
            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
            </ul>
        </nav>
    </div>
    <div class="ApplicationLayoutBody has-footer uikitDemo">
        <div class="module-content-wrapper">
            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
                    <div class="scrollbar-content-wrapper">
                        <div class="scrollbar-content">
                            <div class="dummy-class">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
                    </div>
                </div>
                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
                    </div>
                </div>
            </div>
        </div>
        <span class="scroll-to-top">
            <button type="button" class="btn btn-primary btn-icon-only">
                <span class="rioglyph rioglyph-arrow-up">
                </span>
            </button>
        </span>
    </div>
    <div class="ApplicationLayoutBodyBottomBar justify-content-between">
        <button type="button" class="btn btn-primary">Button</button>
    </div>
</div>
```

#### Props: ApplicationLayout

### ApplicationLayout

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
| className | string | — | Additional class names that are added to the respective component |

#### Props: ApplicationLayoutHeader

### ApplicationLayoutHeader

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component. |

#### Props: ApplicationLayoutSidebar

### ApplicationLayoutSidebar

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component |

#### Props: ApplicationLayoutBody

### ApplicationLayoutBody

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
| className | string | — | Additional class names that are added to the respective component. |

#### Props: ApplicationLayoutBodyNavigation

### ApplicationLayoutBodyNavigation

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |

#### Props: ApplicationLayoutBodyBottomBar

### ApplicationLayoutBodyBottomBar

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component |
| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |

#### Props: ApplicationLayoutBodyBanner

### ApplicationLayoutBodyBanner

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| textColor | string | `text-color-white` | One of the text-color utility classes. |
| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
| isSticky | boolean | false | Allows sticky banner while scrolling. |
| className | string | — | Additional class names that are added to the respective component. |

## Sidebar Example

### Example: Example 5

RIO Service

Navigation 1
Navigation 2
Navigation 3

Sidebar Right

Sidebar components may be added here...

Button

#### React (tsx)

```tsx
import { NavLink } from 'react-router-dom';

import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
import Sidebar from '@rio-cloud/rio-uikit/Sidebar';

const navItems = [
    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },
    {
        key: '2',
        route: (
            <NavLink to='/2' onClick={event => event.preventDefault()}>
                Navigation 2
            </NavLink>
        ),
    },
    {
        key: '3',
        route: (
            <NavLink to='/3' onClick={event => event.preventDefault()}>
                Navigation 3
            </NavLink>
        ),
    },
];

export default () => (
    <ApplicationLayout className='bg-lighter'>
        <ApplicationLayout.Header>
            <ApplicationHeader label='RIO Service' navItems={navItems} />
        </ApplicationLayout.Header>
        <ApplicationLayout.Sidebar className='right bg-white'>
            <Sidebar
                title='Sidebar Right'
                titleClassName='padding-left-10'
                closed={false}
                onClose={() => {}}
                position={Sidebar.RIGHT}
                resizable
                minWidth={300}
                maxWidth={600}
                footer={
                    <button className='btn btn-primary' type='button' onClick={() => {}}>
                        Button
                    </button>
                }
            >
                <div className='padding-left-20 padding-right-20'>Sidebar components may be added here...</div>
            </Sidebar>
        </ApplicationLayout.Sidebar>
        <ApplicationLayout.Body className='uikitDemo'>
            <div className='dummy-class' />
        </ApplicationLayout.Body>
    </ApplicationLayout>
);
```

#### HTML (html)

```html
<div class="ApplicationLayout bg-lighter" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
        <nav class="ApplicationHeader user-select-none">
            <div class="navbar-header">
                <span class="navbar-brand home-icon">
                </span>
            </div>
            <ul class="ModuleNavigation AppMenu user-select-none pointer-events-none">
                <li class="dropdown">
                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between inactive" role="button" id="basic-nav-dropdown">
                        <span>RIO Service</span>
                    </a>
                </li>
            </ul>
            <ul class="SubmoduleNavigation nav">
                <li class="submodule " data-nav-item-key="1">
                    <a aria-current="page" class="active" href="#/components/appLayout" data-discover="true">Navigation 1</a>
                </li>
                <li class="submodule " data-nav-item-key="2">
                    <a class="" href="#/2" data-discover="true">Navigation 2</a>
                </li>
                <li class="submodule " data-nav-item-key="3">
                    <a class="" href="#/3" data-discover="true">Navigation 3</a>
                </li>
            </ul>
            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
            </ul>
        </nav>
    </div>
    <div class="ApplicationLayoutSidebar right bg-white">
        <div class="Sidebar fluid" style="width: 350px; opacity: 1; display: block; transform: none;">
            <div class="SidebarResizeLimit" style="right: 600px;">
            </div>
            <div class="SidebarContent">
                <div class="SidebarHeader">
                    <div class="SidebarTitle padding-left-10">Sidebar Right</div>
                    <div class="SidebarButtons non-printable close">
                        <button type="button" data-testid="sidebarCloseButton" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-remove">
                            </span>
                        </button>
                    </div>
                </div>
                <div class="SidebarBody">
                    <div class="padding-left-20 padding-right-20">Sidebar components may be added here...</div>
                </div>
                <div class="SidebarFooter">
                    <button class="btn btn-primary" type="button">Button</button>
                </div>
            </div>
            <div class="Resizer resize-horizontal resize-left">
            </div>
        </div>
    </div>
    <div class="ApplicationLayoutBody uikitDemo">
        <div class="module-content-wrapper">
            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
                    <div class="scrollbar-content-wrapper">
                        <div class="scrollbar-content">
                            <div class="dummy-class">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
                    </div>
                </div>
                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
                    </div>
                </div>
            </div>
        </div>
        <span class="scroll-to-top">
            <button type="button" class="btn btn-primary btn-icon-only">
                <span class="rioglyph rioglyph-arrow-up">
                </span>
            </button>
        </span>
    </div>
</div>
```

#### Props: ApplicationLayout

### ApplicationLayout

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
| className | string | — | Additional class names that are added to the respective component |

#### Props: ApplicationLayoutHeader

### ApplicationLayoutHeader

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component. |

#### Props: ApplicationLayoutSidebar

### ApplicationLayoutSidebar

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component |

#### Props: ApplicationLayoutBody

### ApplicationLayoutBody

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
| className | string | — | Additional class names that are added to the respective component. |

#### Props: ApplicationLayoutBodyNavigation

### ApplicationLayoutBodyNavigation

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |

#### Props: ApplicationLayoutBodyBottomBar

### ApplicationLayoutBodyBottomBar

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component |
| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |

#### Props: ApplicationLayoutBodyBanner

### ApplicationLayoutBodyBanner

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| textColor | string | `text-color-white` | One of the text-color utility classes. |
| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
| isSticky | boolean | false | Allows sticky banner while scrolling. |
| className | string | — | Additional class names that are added to the respective component. |

## Complete example with all components

### Example: Example 6

RIO Service

Navigation 1
Navigation 2
Navigation 3

4

5
4
2

Asset Group 3
Vehicle-6700 Asset 1001
Vehicle-7557 Asset 1009
Vehicle-7869 Asset 1000

Ungrouped 8

200

Sidebar Right

Sidebar components may be added here...

Close

Subnavigation 1
Subnavigation 2
Subnavigation 3

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.
Sample Service Content
Open Sidebar
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.

Bottom Button

#### React (tsx)

```tsx
import { useState, useEffect } from 'react';
import { Link, NavLink } from 'react-router-dom';
import { random } from 'es-toolkit/compat';
import { faker } from '@faker-js/faker';
import IframeResizer from 'iframe-resizer-react';

import ApplicationLayout from '@rio-cloud/rio-uikit/ApplicationLayout';
import ApplicationHeader from '@rio-cloud/rio-uikit/ApplicationHeader';
import ActionBarItem from '@rio-cloud/rio-uikit/ActionBarItem';
import ApplicationLayoutBodyBanner from '@rio-cloud/rio-uikit/ApplicationLayoutBodyBanner';
import ApplicationLayoutBodyBottomBar from '@rio-cloud/rio-uikit/ApplicationLayoutBodyBottomBar';
import ApplicationLayoutBodyNavigation from '@rio-cloud/rio-uikit/ApplicationLayoutBodyNavigation';
import SubNavigation from '@rio-cloud/rio-uikit/SubNavigation';
import useResizeObserver from '@rio-cloud/rio-uikit/useResizeObserver';
import { SCREEN_MD } from '@rio-cloud/rio-uikit/DeviceUtils';
import Sidebar from '@rio-cloud/rio-uikit/Sidebar';
import Button from '@rio-cloud/rio-uikit/Button';
import Notification from '@rio-cloud/rio-uikit/Notification';
import AssetTree from '@rio-cloud/rio-uikit/AssetTree';
import TreeCategory from '@rio-cloud/rio-uikit/TreeCategory';
import Tree, { type TreeGroup } from '@rio-cloud/rio-uikit/Tree';

import { dummyTextLong } from '../../../utils/data';

const CATEGORY_ASSETS = 'trucks';
const CATEGORY_DRIVER = 'driver';

const navItems = [
    { key: '1', route: <NavLink to='/components/appLayout'>Navigation 1</NavLink> },
    {
        key: '2',
        route: (
            <NavLink to='/2' onClick={event => event.preventDefault()}>
                Navigation 2
            </NavLink>
        ),
    },
    {
        key: '3',
        route: (
            <NavLink to='/3' onClick={event => event.preventDefault()}>
                Navigation 3
            </NavLink>
        ),
    },
];

const ServiceInfo = () => (
    <ActionBarItem.List>
        <ActionBarItem.ListItem icon='rioglyph-hand-right' onClick={() => Notification.info('Show Welcome Dialog')}>
            <div className='display-flex align-items-center gap-5'>
                <span>Welcome</span>
                <span className='badge badge-primary'>1</span>
            </div>
        </ActionBarItem.ListItem>
        <ActionBarItem.ListItem
            icon='rioglyph-exclamation-sign'
            onClick={() => Notification.info("Show What's New Dialog")}
        >
            What's new?
        </ActionBarItem.ListItem>
        <ActionBarItem.ListItem icon='rioglyph-question-sign' onClick={() => Notification.info('Show Features Dialog')}>
            Features
        </ActionBarItem.ListItem>
        <ActionBarItem.ListItem icon='rioglyph-envelope' hasLink>
            <Link to='/components/appHeader'>Feedback</Link>
        </ActionBarItem.ListItem>
    </ActionBarItem.List>
);

const ServiceInfoComponent = (
    <ActionBarItem id='serviceInfo' className='myItem'>
        <ActionBarItem.Icon>
            <span className='icon rioglyph rioglyph-info-sign' />
        </ActionBarItem.Icon>
        <ActionBarItem.Popover
            className='myItemPopover'
            title={
                <div>
                    <span>Service XYZ</span>
                    <span className='text-color-gray margin-left-10'>v1.1.0</span>
                </div>
            }
        >
            <ServiceInfo />
        </ActionBarItem.Popover>
    </ActionBarItem>
);

const AccountMenuComponent = (
    <ActionBarItem id='accountMenu' hidePopoverOnClick={false}>
        <ActionBarItem.Icon>
            <span className='icon rioglyph rioglyph-user' />
        </ActionBarItem.Icon>
        <ActionBarItem.Popover>
            <ActionBarItem.List>
                <ActionBarItem.ListItem>
                    <div>
                        <div className='text-medium'>This is just an example</div>
                        <div>The real account menu comes here...</div>
                    </div>
                </ActionBarItem.ListItem>
                <ActionBarItem.ListSeparator />
                <ActionBarItem.ListItem className='padding-0'>
                    <iframe
                        className='buyButton height-30 padding-top-5 padding-bottom-5'
                        title='ContactForm'
                        src='https://contact-form.rio.cloud/contact_link.html?opener=https%3A%2F%2Fhome.rio.cloud%2F&amp;locale=en-GB'
                    />
                </ActionBarItem.ListItem>
                <ActionBarItem.ListSeparator />
                <ActionBarItem.ListItem className='padding-0'>
                    <button
                        type='button'
                        className='btn btn-link btn-link-inline text-color-dark'
                        onClick={() => Notification.info('Logout')}
                    >
                        <span className='rioglyph rioglyph-off margin-right-5 text-size-16 text-color-dark' />
                        <span>Logout</span>
                    </button>
                </ActionBarItem.ListItem>
            </ActionBarItem.List>
        </ActionBarItem.Popover>
    </ActionBarItem>
);

const Notifications = (
    <ActionBarItem id='notifications'>
        <ActionBarItem.Icon>
            <span className='icon rioglyph rioglyph-notification' />
            <span className='badge badge-primary badge-indicator badge-indicator-pinging'>4</span>
        </ActionBarItem.Icon>
    </ActionBarItem>
);

export default () => {
    const [showSidebar, setShowSidebar] = useState(true);
    const [isTreeOpen, setIsTreeOpen] = useState(true);
    const [currentCategoryId, setCurrentCategoryId] = useState(CATEGORY_ASSETS);
    const [selectedGroupIds, setSelectedGroupIds] = useState([]);
    const [selectedItemIds, setSelectedItemIds] = useState([]);
    const [expandedGroups, setExpandedGroups] = useState([assetGroups[0].id]);

    // Listen for resize changes of the target element defined by the ref
    // Note: this is for demo purpose only when resizing the demo playground.
    // The SubNavigation component handles this case internally
    const { ref, isMobile } = useResizer();
    const bodyNavigationClasses = ''; // isMobile ? '' : 'has-offset';

    const handleCloseSidebar = () => setShowSidebar(false);
    const handleOpenSidebar = () => setShowSidebar(true);
    const handleToggleTree = (toggle: boolean) => setIsTreeOpen(toggle);
    const handleChangeCategories = (categoryId: string) => setCurrentCategoryId(categoryId);
    const handleExpandGroup = (newExpandedGroups: string[]) => setExpandedGroups(newExpandedGroups);
    const handleSelection = ({ items, groups }: any) => {
        setSelectedItemIds(items);
        setSelectedGroupIds(groups);
    };

    return (
        <ApplicationLayout className='bg-lighter height-500' layoutRef={ref}>
            <ApplicationLayout.Header>
                <ApplicationHeader
                    label='RIO Service'
                    appNavigator={
                        <IframeResizer className='iFrameResizer' src='https://menu.rio.cloud' checkOrigin={false} />
                    }
                    navItems={navItems}
                    actionBarItems={[ServiceInfoComponent, Notifications, AccountMenuComponent]}
                />
            </ApplicationLayout.Header>
            <ApplicationLayout.Sidebar>
                <AssetTree
                    minWidth={300}
                    maxWidth={450}
                    currentCategoryId={currentCategoryId}
                    onCategoryChange={handleChangeCategories}
                    height={500}
                    isOpen={isTreeOpen}
                    onToggleTree={handleToggleTree}
                    useOffscreen
                >
                    <TreeCategory key={CATEGORY_ASSETS} id={CATEGORY_ASSETS} label='Assets' icon='rioglyph-truck'>
                        <Tree
                            groups={assetGroups}
                            items={assets}
                            searchPlaceholder='Find asset'
                            expandedGroups={expandedGroups}
                            onExpandGroupsChange={handleExpandGroup}
                            selectedGroups={selectedGroupIds}
                            selectedItems={selectedItemIds}
                            onSelectionChange={handleSelection}
                        />
                    </TreeCategory>
                    <TreeCategory key={CATEGORY_DRIVER} id={CATEGORY_DRIVER} label='My Drivers' icon='rioglyph-driver'>
                        <Tree items={randomDrivers} hasMultiselect={false} />
                    </TreeCategory>
                </AssetTree>
            </ApplicationLayout.Sidebar>
            <ApplicationLayout.Sidebar className='right bg-white height-450'>
                <Sidebar
                    title='Sidebar Right'
                    titleClassName='padding-left-10'
                    closed={!showSidebar}
                    onClose={handleCloseSidebar}
                    position={Sidebar.RIGHT}
                    enableFullscreenToggle
                    resizable
                    minWidth={300}
                    maxWidth={600}
                    switchModeBreakpoint={1400}
                    footer={
                        <button className='btn btn-primary' type='button' onClick={handleCloseSidebar}>
                            Close
                        </button>
                    }
                >
                    <div className='padding-left-20 padding-right-20'>Sidebar components may be added here...</div>
                </Sidebar>
            </ApplicationLayout.Sidebar>
            <ApplicationLayout.Body
                className='uikitDemo'
                banner={
                    <ApplicationLayoutBodyBanner>
                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.
                    </ApplicationLayoutBodyBanner>
                }
                navigation={
                    <ApplicationLayoutBodyNavigation className={bodyNavigationClasses}>
                        <SubNavigation
                            navItems={[
                                {
                                    key: '1',
                                    route: <NavLink to='/components/appLayout'>Subnavigation 1</NavLink>,
                                },
                                {
                                    key: '2',
                                    route: (
                                        <NavLink to='/2' onClick={event => event.preventDefault()}>
                                            Subnavigation 2
                                        </NavLink>
                                    ),
                                },
                                {
                                    key: '3',
                                    route: (
                                        <NavLink to='/3' onClick={event => event.preventDefault()}>
                                            Subnavigation 3
                                        </NavLink>
                                    ),
                                },
                            ]}
                        />
                    </ApplicationLayoutBodyNavigation>
                }
                bottomBar={
                    <ApplicationLayoutBodyBottomBar>
                        <button type='button' className='btn btn-primary'>
                            Bottom Button
                        </button>
                    </ApplicationLayoutBodyBottomBar>
                }
            >
                <div>
                    <div className='panel panel-default shadow-default'>
                        <div className='panel-heading'>Sample Service Content</div>
                        <div className='panel-body overflow-auto'>
                            <Button onClick={handleOpenSidebar}>Open Sidebar</Button>
                            <div className='margin-top-15'>{dummyTextLong}</div>
                        </div>
                    </div>
                </div>
            </ApplicationLayout.Body>
        </ApplicationLayout>
    );
};

const useResizer = () => {
    const [isMobile, setIsMobile] = useState(false);
    const [ref, observerEntry] = useResizeObserver();
    const contentRect = observerEntry?.contentRect;
    useEffect(() => {
        if (!contentRect) {
            return;
        }
        const width = Math.round(contentRect.width);
        if (width <= SCREEN_MD) {
            setIsMobile(true);
        } else {
            setIsMobile(false);
        }
    }, [contentRect]);

    return { ref, isMobile };
};

const assetGroups: TreeGroup[] = [
    {
        id: '0250a8aa-721e-40b4-b1ea-7908acddfdf4',
        name: 'Asset Group',
    },
    {
        id: 'unassigned',
        name: 'Ungrouped',
        position: 'last',
    },
];

const assets = Array.from({ length: random(5, 20) }, (_, index) => ({
    id: `010191ac-d06d-4567-b13a-7b7fd85d97${index}`,
    name: `Vehicle-${random(1000, 9999)}`,
    info: `Asset 1${String(index).padStart(3, '0')}`,
    type: faker.helpers.arrayElement(['truck', 'trailer', 'van', 'bus']),
    groupIds: [faker.helpers.arrayElement(assetGroups).id],
}));

const randomDrivers = Array.from({ length: 200 }, (_, index) => ({
    id: `74e8eb86-18a1-4abe-90cb-aeee7909f85${index}`,
    name: {
        firstName: faker.internet.username(),
        lastName: faker.person.firstName(),
    },
    type: 'driver',
}));
```

#### HTML (html)

```html
<div class="ApplicationLayout bg-lighter height-500" style="--ApplicationLayoutBodyBottomBarHeight: 54px;">
    <div class="ApplicationLayoutHeader" id="ApplicationLayoutHeader">
        <nav class="ApplicationHeader user-select-none">
            <div class="navbar-header">
                <span class="navbar-brand home-icon">
                </span>
            </div>
            <ul class="ModuleNavigation AppMenu user-select-none hasModules">
                <li class="dropdown">
                    <a class="ModuleNavigation-dropdown dropdown-toggle justify-content-between" role="button" id="basic-nav-dropdown">
                        <span>RIO Service</span>
                        <span class="caret">
                        </span>
                    </a>
                    <ul role="menu" class="dropdown-menu ModuleNavigation-dropdown-menu">
                        <li role="presentation">
                            <iframe title="iframe" class="iFrameResizer" src="https://menu.rio.cloud" id="iFrameResizer0" scrolling="no" style="overflow: hidden; height: 0px;">
                            </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" data-discover="true">Navigation 1</a>
                </li>
                <li class="submodule " data-nav-item-key="2">
                    <a class="" href="#/2" data-discover="true">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 class="" href="#/3" data-discover="true">Navigation 3</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="ApplicationActionBar nav navbar-nav navbar-right ">
                <li role="presentation" class="navigationItem">
                    <div class="ActionBarItem myItem">
                        <div class="ActionBarItemIcon">
                            <span class="icon rioglyph rioglyph-info-sign">
                            </span>
                        </div>
                    </div>
                </li>
                <li role="presentation" class="navigationItem">
                    <div class="ActionBarItem">
                        <div class="ActionBarItemIcon">
                            <span class="icon rioglyph rioglyph-notification">
                            </span>
                            <span class="badge badge-primary badge-indicator badge-indicator-pinging">4</span>
                        </div>
                    </div>
                </li>
                <li role="presentation" class="navigationItem">
                    <div class="ActionBarItem">
                        <div class="ActionBarItemIcon">
                            <span class="icon rioglyph rioglyph-user">
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
        </nav>
    </div>
    <div class="ApplicationLayoutSidebar">
        <div class="AssetTree fluid" style="width: 350px; height: 500px;">
            <div class="AssetTreeResizeLimit" style="left: 450px;">
            </div>
            <div class="AssetTreeContent">
                <div class="TreeSidebar">
                    <ul class="TreeSidebarNavigation">
                        <li class="active">
                            <div class="selection-bubble">
                                <span class="rioglyph rioglyph-truck">
                                </span>
                            </div>
                        </li>
                        <li class="">
                            <div class="selection-bubble">
                                <span class="rioglyph rioglyph-driver">
                                </span>
                            </div>
                        </li>
                    </ul>
                    <div class="TreeSidebarToggle">
                        <span class="rioglyph rioglyph-chevron-left">
                        </span>
                    </div>
                </div>
                <div class="AssetTreeBody scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
                    <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
                        <div class="scrollbar-content-wrapper">
                            <div class="TreeOffscreenWrapper">
                                <div class="Tree">
                                    <div class="TreeHeader">
                                        <div class="TreeSearch">
                                            <div class="input-group flex-1-0">
                                                <span class="input-group-addon">
                                                    <span class="rioglyph rioglyph-search" aria-hidden="true">
                                                    </span>
                                                </span>
                                                <div class="ClearableInput input-group">
                                                    <input placeholder="Find asset" class="form-control" type="text" tabindex="0" value="">
                                                    <span class="clearButton hide">
                                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                                        </span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="TreeHead display-flex gap-5 padding-15">
                                            <div class="border border-right-only hidden-empty padding-right-10 margin-right-2">
                                                <div class="TreeSelectAll display-flex align-items-center">
                                                    <label class="checkbox margin-top--1" tabindex="0">
                                                        <input type="checkbox" class="margin-top--1">
                                                        <span class="checkbox-text">
                                                        </span>
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="display-flex justify-content-between align-items-start width-100pct">
                                                <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
                                                    <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                        <span class="rioglyph rioglyph-trailer text-size-16 margin-right-2">
                                                        </span>
                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">5</span>
                                                    </div>
                                                    <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 cursor-pointer">
                                                        <span class="rioglyph rioglyph-bus text-size-16 margin-right-2">
                                                        </span>
                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">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>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="TreeRoot user-select-none overflow-hidden" style="position: relative;">
                                        <div class="TreeNodeContainer user-select-none overflow-hidden open" data-id="0250a8aa-721e-40b4-b1ea-7908acddfdf4">
                                            <div class="TreeNode from-group" data-key="0250a8aa-721e-40b4-b1ea-7908acddfdf4">
                                                <label class="checkbox TreeCheckbox" tabindex="0">
                                                    <input type="checkbox" class="TreeCheckbox">
                                                    <span class="checkbox-text">
                                                    </span>
                                                </label>
                                                <span class="TreeLabel TreeLabelName">
                                                    <span class="TreeLabelNameText">
                                                        <span class="TreeLabelNameTextHeadline">Asset Group</span>
                                                    </span>
                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">3</span>
                                                    <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d971">
                                                <label class="checkbox TreeCheckbox" tabindex="0">
                                                    <input type="checkbox" class="TreeCheckbox">
                                                    <span class="checkbox-text">
                                                    </span>
                                                </label>
                                                <span class="TreeLabel TreeLabelName">
                                                    <span class="rioglyph rioglyph-bus">
                                                    </span>
                                                    <span class="TreeLabelNameText">
                                                        <span class="TreeLabelNameTextHeadline">Vehicle-6700</span>
                                                        <span class="TreeLabelNameTextSubline">Asset 1001</span>
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d979">
                                                <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-7557</span>
                                                        <span class="TreeLabelNameTextSubline">Asset 1009</span>
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="TreeLeaf form-group margin-bottom-0" data-key="010191ac-d06d-4567-b13a-7b7fd85d970">
                                                <label class="checkbox TreeCheckbox" tabindex="0">
                                                    <input type="checkbox" class="TreeCheckbox">
                                                    <span class="checkbox-text">
                                                    </span>
                                                </label>
                                                <span class="TreeLabel TreeLabelName">
                                                    <span class="rioglyph rioglyph-trailer">
                                                    </span>
                                                    <span class="TreeLabelNameText">
                                                        <span class="TreeLabelNameTextHeadline">Vehicle-7869</span>
                                                        <span class="TreeLabelNameTextSubline">Asset 1000</span>
                                                    </span>
                                                </span>
                                            </div>
                                        </div>
                                        <div class="TreeNodeContainer user-select-none overflow-hidden" data-id="unassigned">
                                            <div class="TreeNode from-group" data-key="unassigned">
                                                <label class="checkbox TreeCheckbox" tabindex="0">
                                                    <input type="checkbox" class="TreeCheckbox">
                                                    <span class="checkbox-text">
                                                    </span>
                                                </label>
                                                <span class="TreeLabel TreeLabelName">
                                                    <span class="TreeLabelNameText">
                                                        <span class="TreeLabelNameTextHeadline">Ungrouped</span>
                                                    </span>
                                                    <span class="TreeLabelCount label label-muted label-filled label-condensed">8</span>
                                                    <span class="TreeLabelExpander rioglyph rioglyph-chevron-down ">
                                                    </span>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="TreeOffscreenWrapper position-offscreen pointer-events-none">
                                <div class="Tree">
                                    <div class="TreeHeader">
                                        <div class="TreeSearch">
                                            <div class="input-group flex-1-0">
                                                <span class="input-group-addon">
                                                    <span class="rioglyph rioglyph-search" aria-hidden="true">
                                                    </span>
                                                </span>
                                                <div class="ClearableInput input-group">
                                                    <input placeholder="Type here to filter by name" class="form-control" type="text" tabindex="0" value="">
                                                    <span class="clearButton hide">
                                                        <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                                                        </span>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="TreeHead display-flex gap-5 padding-15">
                                            <div class="border border-right-only hidden-empty padding-right-10 margin-right-2">
                                            </div>
                                            <div class="display-flex justify-content-between align-items-start width-100pct">
                                                <div class="TreeSummary display-flex flex-wrap align-items-center gap-10 padding-left-3">
                                                    <div class="TypeCounter display-flex align-items-center user-select-none margin-right-2 pointer-events-none">
                                                        <span class="rioglyph rioglyph-driver text-size-16 margin-right-2">
                                                        </span>
                                                        <span class="TreeLabelCount label label-condensed label-muted label-filled">200</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="TreeRoot user-select-none overflow-hidden" style="position: relative;">
                                        <div class="tree-virtual-scrollbar scrollbar-fly-in smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
                                            <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
                                                <div class="scrollbar-content-wrapper">
                                                    <div class="flat-list" style="height: 8200px; position: relative;">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
                                                <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
                                                </div>
                                            </div>
                                            <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
                                                <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="scrollbar-track-horizontal" style="position: absolute; height: 6px; display: none;">
                        <div class="scrollbar-thumb-horizontal" style="position: relative; display: block; height: 100%;">
                        </div>
                    </div>
                    <div class="scrollbar-track-vertical" style="position: absolute; width: 6px; display: none;">
                        <div class="scrollbar-thumb-vertical" style="position: relative; display: block; width: 100%;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="Resizer resize-horizontal resize-right">
            </div>
        </div>
    </div>
    <div class="ApplicationLayoutSidebar right bg-white height-450">
        <div class="Sidebar fly" style="width: 350px; opacity: 1; display: block; transform: none;">
            <div class="SidebarResizeLimit" style="right: 600px;">
            </div>
            <div class="SidebarContent">
                <div class="SidebarHeader">
                    <div class="SidebarTitle padding-left-10">Sidebar Right</div>
                    <div class="SidebarButtons non-printable close">
                        <button type="button" data-testid="sidebarFullscreenToggle" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-resize-full">
                            </span>
                        </button>
                        <div class="SidebarButtons-spacer">
                        </div>
                        <button type="button" data-testid="sidebarCloseButton" class="btn btn-muted btn-icon-only btn-component" tabindex="0">
                            <span class="rioglyph rioglyph-remove">
                            </span>
                        </button>
                    </div>
                </div>
                <div class="SidebarBody">
                    <div class="padding-left-20 padding-right-20">Sidebar components may be added here...</div>
                </div>
                <div class="SidebarFooter">
                    <button class="btn btn-primary" type="button">Close</button>
                </div>
            </div>
            <div class="Resizer resize-horizontal resize-left">
            </div>
        </div>
    </div>
    <div class="ApplicationLayoutBody has-footer uikitDemo">
        <div class="module-content-wrapper">
            <div class="ApplicationLayoutBodyNavigation">
                <div class="SubNavigation width-100pct overflow-auto">
                    <ul class="SubmoduleNavigation nav">
                        <li class="submodule" data-nav-item-key="1">
                            <a aria-current="page" class="active" href="#/components/appLayout" data-discover="true">Subnavigation 1</a>
                        </li>
                        <li class="submodule" data-nav-item-key="2">
                            <a class="" href="#/2" data-discover="true">Subnavigation 2</a>
                        </li>
                        <li class="submodule" data-nav-item-key="3">
                            <a class="" href="#/3" data-discover="true">Subnavigation 3</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="ApplicationLayoutBodyBanner text-color-white bg-primary position-sticky top-0 z-index-3">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, diam nonumy eirmod tempor invidunt.</div>
            <div class="module-content smooth-scrollbar-wrapper" style="position: relative; overflow: hidden; width: 100%; height: 100%;">
                <div class="scrollbar-view" style="position: absolute; inset: 0px; overflow: scroll; margin-right: 0px; margin-bottom: 0px;">
                    <div class="scrollbar-content-wrapper">
                        <div class="scrollbar-content">
                            <div>
                                <div class="panel panel-default shadow-default">
                                    <div class="panel-heading">Sample Service Content</div>
                                    <div class="panel-body overflow-auto">
                                        <button type="button" class="btn btn-default btn-component" tabindex="0">Open Sidebar</button>
                                        <div class="margin-top-15">
                                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra dui eget massa efficitur aliquam condimentum in felis. Integer eget metus vel nunc efficitur iaculis. Vivamus elementum ante et est sagittis semper. Ut consectetur enim nec tortor scelerisque tincidunt. Fusce ac ligula bibendum, rutrum libero quis, viverra sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis ut hendrerit massa, in molestie elit. Sed vitae orci ac purus volutpat posuere ac ut neque. Mauris ante orci, semper finibus lorem in, fringilla pretium velit.

                                            In mattis massa a tellus laoreet volutpat. Integer placerat convallis tempor. Quisque id diam nec ex iaculis pulvinar. Nunc urna dui, varius at tempus sit amet, euismod id risus. Cras placerat imperdiet mattis. Etiam vehicula finibus magna. Nullam ornare diam at molestie faucibus. Aenean dictum magna a ipsum scelerisque, a vehicula massa vehicula. Suspendisse blandit tellus vulputate enim ullamcorper tincidunt. Vivamus enim justo, sollicitudin sit amet pulvinar vitae, vehicula sed leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

                                            Praesent mattis purus et velit maximus hendrerit. Aenean vehicula tempus dapibus. Mauris convallis pharetra purus, non vulputate erat rutrum quis. Sed in tincidunt justo. Ut eu venenatis augue. Aliquam ullamcorper vitae tellus et egestas. Integer eget metus quis odio elementum auctor quis et ipsum. Duis lobortis eros lacinia sapien rutrum egestas. Phasellus ornare, elit non efficitur fringilla, arcu risus molestie enim, sit amet blandit lorem ex in lectus. Vestibulum quis tempor nisi, at pretium erat.</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="scrollbar-track-horizontal scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; height: 6px; display: none;">
                    <div class="scrollbar-thumb-horizontal scrollbar-thumb-size-large" style="position: relative; display: block; height: 100%;">
                    </div>
                </div>
                <div class="scrollbar-track-vertical scrollbar-track-size-large scrollbar-track-offset" style="position: absolute; width: 6px; display: none;">
                    <div class="scrollbar-thumb-vertical scrollbar-thumb-size-large" style="position: relative; display: block; width: 100%;">
                    </div>
                </div>
            </div>
        </div>
        <span class="scroll-to-top">
            <button type="button" class="btn btn-primary btn-icon-only">
                <span class="rioglyph rioglyph-arrow-up">
                </span>
            </button>
        </span>
    </div>
    <div class="ApplicationLayoutBodyBottomBar justify-content-between">
        <button type="button" class="btn btn-primary">Bottom Button</button>
    </div>
</div>
```

#### Props: ApplicationLayout

### ApplicationLayout

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| layoutRef | MutableRefObject<HTMLDivElement \| null> | — | A React ref function assigned to the wrapper element. |
| className | string | — | Additional class names that are added to the respective component |

#### Props: ApplicationLayoutHeader

### ApplicationLayoutHeader

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component. |

#### Props: ApplicationLayoutSidebar

### ApplicationLayoutSidebar

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component |

#### Props: ApplicationLayoutBody

### ApplicationLayoutBody

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| enableScrollToTop | boolean | true | Show scroll to top button after scrolling the content. |
| forceScrollbar | boolean | true | Always show vertical scrollbar to prevent the content from jumping. |
| scrollResetTrigger | any | — | Prop to trigger scroll reset from outside. This comes in handy when changing the body content and to reset the scrolling like when the pathname changes from an body internal menu. |
| banner | React.ReactNode | — | The ApplicationLayoutBodyBanner component. |
| navigation | React.ReactNode | — | The ApplicationLayoutBodyNavigation component. |
| bottomBar | React.ReactNode | — | Optional bottom bar component or a simple string. |
| bottomBarHeight | number | 54 | Height of the bottomBar in pixel. |
| innerClassName | string | — | Additional class names that are added to the inner module-content component. |
| className | string | — | Additional class names that are added to the respective component. |

#### Props: ApplicationLayoutBodyNavigation

### ApplicationLayoutBodyNavigation

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component. Example: has-offset. |

#### Props: ApplicationLayoutBodyBottomBar

### ApplicationLayoutBodyBottomBar

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| className | string | — | Additional class names that are added to the respective component |
| useBodyPaddings | boolean | false | Use same paddings (left and right) as the ApplicationLayoutBody. |
| buttonAlignment | ButtonAlignmentLeft \| ButtonAlignmentRight | — | Tells the buttons if they are left or right aligned. Default behavior is: 1st button left and 2nd button right. Possible values are: ApplicationLayoutBodyBottomBar.LEFT, ApplicationLayoutBodyBottomBar.RIGHT or left, right |

#### Props: ApplicationLayoutBodyBanner

### ApplicationLayoutBodyBanner

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| textColor | string | `text-color-white` | One of the text-color utility classes. |
| backgroundColor | string | `bg-primary` | One of the bg-color utility classes. |
| isSticky | boolean | false | Allows sticky banner while scrolling. |
| className | string | — | Additional class names that are added to the respective component. |