# Customize Sidebar

## Content

DsDataViewer allows you to modify, show, and hide the sidebar using **sidebarLayout** property and **showSidebar** method. sidebarLayout property enables customizing the sidebar layout, whereas showSidebar method shows or hides the sidebar.

## Modify Sidebar Layout

* Refer to the following example code to modify the sidebar layout to exclude the Search Panel:

    ```javascript
    // Initialize DsDataViewer.
    var viewer = new DsDataViewer(selector, {});
    
    // Display an empty sidebar without the Search Panel.
    viewer.sidebarLayout = [''];
    ```

    ![sidebar-without-searchpanel](https://cdn.mescius.io/document-site-files/images/89a1cb8f-2854-488e-9ea1-36fdf71d8fcb/sidebar-without-searchpanel.50294e.png)
<br>
* Refer to the following example code to modify the sidebar layout to include the Search Panel:

    ```javascript
    // Initialize DsDataViewer.
    var viewer = new DsDataViewer(selector, {});
    
    // Display Search Panel.
    viewer.sidebarLayout = ['SearchPanel'];
    ```

    ![sidebar-with-searchpanel](https://cdn.mescius.io/document-site-files/images/89a1cb8f-2854-488e-9ea1-36fdf71d8fcb/sidebar-with-searchpanel.4d632b.png)
<br>
* Refer to the following example code to display the default sidebar layout:

    ```javascript
    // Initialize DsDataViewer.
    var viewer = new DsDataViewer(selector, {});
    
    // Display default sidebar layout.
    viewer.sidebarLayout = [];
    ```

    ![sidebar-with-default-layout](https://cdn.mescius.io/document-site-files/images/89a1cb8f-2854-488e-9ea1-36fdf71d8fcb/sidebar-with-default-layout.b636d8.png)

## Show/Hide Sidebar

* Refer to the following example code to show the sidebar:

    ```javascript
    // Initialize DsDataViewer.
    var viewer = new DsDataViewer(selector, {});
    
    // Show sidebar.
    viewer.showSidebar(true);
    ```

    ![show-sidebar](https://cdn.mescius.io/document-site-files/images/89a1cb8f-2854-488e-9ea1-36fdf71d8fcb/show-sidebar.cbeb55.png)
<br>
* Refer to the following example code to hide the sidebar:

    ```javascript
    // Initialize DsDataViewer.
    var viewer = new DsDataViewer(selector, {});
    
    // Hide sidebar.
    viewer.showSidebar(false);
    ```
    ![hide-sidebar](https://cdn.mescius.io/document-site-files/images/89a1cb8f-2854-488e-9ea1-36fdf71d8fcb/hide-sidebar.4d538e.png)