Docking sidebar in EJ2 TypeScript Sidebar control

2 May 20236 minutes to read

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

In the following sample, the list item has icon with text representation. On dock state, only icons in list will be visible to represent the hint of 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

document.getElementById('toggle').onclick = (): void => {
    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.1.33/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.1.33/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 expand"></span>
                        <span class="e-text" title="menu">Menu</span>
                    </li>
                    <li class="sidebar-item">
                        <span class="e-icons home"></span>
                        <span class="e-text" title="home">Home</span>
                    </li>
                    <li class="sidebar-item">
                        <span class="e-icons profile"></span>
                        <span class="e-text" title="profile">Profile</span>
                    </li>
                    <li class="sidebar-item">
                        <span class="e-icons info"></span>
                        <span class="e-text" title="info">Info</span>
                    </li>
                    <li class="sidebar-item">
                        <span class="e-icons 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>
</body>

</html>

See Also