Docking Sidebar in EJ2 TypeScript Sidebar control

3 Mar 202512 minutes to read

The Dock state of the Sidebar reserves some space on the page that always remains visible when the Sidebar is collapsed. It is used to show a concise form of content, such as icons alone instead of lengthy text. To achieve this, set enableDock to true along with the required dockSize.

In the following example, each list item includes an icon along with accompanying text. The visibility of the text is dynamically controlled through CSS rules based on the Sidebar’s state. When the enableDock property is enabled, the e-dock class is applied, adjusting the text visibility accordingly.

To show the icons alone in a docked (closed) state, the following CSS is applied:

.e-dock.e-close span.e-text {
  display: none;
}

To show the text along with icons when the Sidebar is open, this CSS is used:

.e-dock.e-open span.e-text {
  display: inline-block;
}

In the docked state, only icons in the list are visible, hinting at the hidden text content.

import { Sidebar } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(false);

//Sidebar initialization
let dockBar: Sidebar = new Sidebar({
    width: '220px',
    dockSize: '72px',
    enableDock: true
});

dockBar.appendTo('#dockSidebar');
//end of Sidebar initialization

let toggleEle: HTMLElement = document.querySelector("#toggle") as HTMLElement;
if(toggleEle) {
    toggleEle.addEventListener('click', () => {
        dockBar.toggle();
    }); 
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Sidebar</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <!-- Sidebar element declaration -->
        <aside id="dockSidebar">
            <div class="dock">
                <ul>
                    <li class="sidebar-item" id="toggle">
                        <span class="e-icons e-chevron-right"></span>
                        <span class="e-text" title="menu">Menu</span>
                    </li>
                    <li class="sidebar-item">
                        <span class="e-icons e-home"></span>
                        <span class="e-text" title="home">Home</span>
                    </li>
                    <li class="sidebar-item">
                        <span class="e-icons e-user"></span>
                        <span class="e-text" title="profile">Profile</span>
                    </li>
                    <li class="sidebar-item">
                        <span class="e-icons e-circle-info"></span>
                        <span class="e-text" title="info">Info</span>
                    </li>
                    <li class="sidebar-item">
                        <span class="e-icons e-settings"></span>
                        <span class="e-text" title="settings">Settings</span>
                    </li>
                </ul>
            </div>
        </aside>
        <!-- end of Sidebar element -->
        <!-- main content declaration -->
        <div id="main-content container-fluid col-md-12 ">
            <div class="title">Main content</div>
            <div class="sub-title"> Click the expand icon to open and collapse icons to close the Sidebar.</div>
        </div>
        <!--end of main content -->
    </div>
    <style>
        .title {
            text-align: center;
            font-size: 20px;
            padding: 15px;
        }

        .sub-title {
            text-align: center;
            font-size: 16px;
            padding: 10px;
        }

        #dockSidebar .e-icons::before {
            font-size: 25px;
        }

        #dockSidebar.e-close .sidebar-item {
            padding: 5px 20px;
        }

        #dockSidebar {
            visibility: hidden;
        }

        #dockSidebar.e-sidebar {
            visibility: visible;
        }

        .e-dock.e-close span.e-text {
            /* csslint allow: adjoining-classes*/
            display: none;
        }

        .e-dock.e-open span.e-text {
            /* csslint allow: adjoining-classes*/
            display: inline-block
        }

        #dockSidebar li {
            list-style-type: none;
            cursor: pointer;
        }

        #dockSidebar ul {
            padding: 0;
        }

        #dockSidebar.e-sidebar ul li:hover span {
            color: white
        }

        span.e-icons {
            color: #c0c2c5;
            line-height: 2
        }

        .e-open .e-icons {
            margin-right: 16px;
        }

        .e-open .e-text {
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 23px;
            font-size: 15px;
        }

        .sidebar-item {
            text-align: center;
            border-bottom: 1px #e5e5e58a solid;
        }

        .e-sidebar.e-open .sidebar-item {
            /* csslint allow: adjoining-classes*/
            text-align: left;
            padding-left: 15px;
            color: #c0c2c5;
        }

        #dockSidebar.e-sidebar {
            background: #2d323e;
            overflow: hidden;
        }
    </style>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
}

See Also