Gecko [ www.jdcpatala.org ]

Name	Size	Permission
boxes.md	10.42 KB	-rw-r--r--
cards.md	16.94 KB	-rw-r--r--
control-sidebar.md	1.79 KB	-rw-r--r--
direct-chat.md	34.52 KB	-rw-r--r--
main-header.md	24.19 KB	-rw-r--r--
main-sidebar.md	3.99 KB	-rw-r--r--
miscellaneous.md	949 B	-rw-r--r--
plugins.md	1.83 KB	-rw-r--r--
ribbons.md	4.29 KB	-rw-r--r--
timeline.md	1.73 KB	-rw-r--r--

Code Editor : control-sidebar.md

---
layout: page
title: Control Sidebar Component
---

Control sidebar is the right sidebar. It can be used for many purposes and is extremely easy to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to slide over the content. The second pushes the content to make space for the sidebar. Either of these methods can be set through the [Javascript options]({% link javascript/control-sidebar.md %}).

The following code should be placed within the `.wrapper` div. I prefer to place it right after the footer.

##### Control Sidebar Push
{: .text-bold .text-dark}
By adding the `.control-sidebar-push` to `body`, the sidebar pushes the content away instead of overlaying the content.
You can also add `.control-sidebar-push-slide` to `body`, to push the content away with an transition.

##### Dark Sidebar Markup
{: .text-bold .text-dark}
```html
  
  <aside class="control-sidebar control-sidebar-dark">
    
    <div class="p-3">
      
    </div>
  </aside>
  
```

##### Light Sidebar Markup
{: .text-bold .text-dark .mt-5}
```html
  
  <aside class="control-sidebar control-sidebar-light">
    
    <div class="p-3">
      
    </div>
  </aside>
  
```

##### Control Sidebar Toggle Markup
{: .text-bold .text-dark .mt-5}
Once you create the sidebar, you will need a toggle button to open/close it. By adding the attribute data-toggle="control-sidebar" to any button, it will automatically act as the toggle button.

```html
<a class="nav-link" data-widget="control-sidebar" href="#">Toggle Control Sidebar</a>
```

${this.title}

Code Editor : control-sidebar.md