further docs changes

- removed CardRefresh from menu while not exist
- removed data-accordion="true" from sidebar nav
- updated assets
- created javascript/layout
- finished javascript/push-menu
- created javascript/treeview
- created javascript/widget
- finished javascript/control-sidebar
- created javascript/direct-chat
- created javascript/todo-list

docs/_config.yml

@@ -64,8 +64,8 @@ navigation:
       url: javascript/treeview.html
     - title: Widget
       url: javascript/widget.html
-    - title: CardRefresh
-      url: javascript/card-refresh.html
+    # - title: CardRefresh
+    #   url: javascript/card-refresh.html
     - title: Control Sidebar
       url: javascript/control-sidebar.html
     - title: Direct Chat

docs/_includes/sidebar.html

@@ -5,7 +5,7 @@
     </a>
     <div class="sidebar">
       <nav class="mt-2">
-        <ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu" data-accordion="true">
+        <ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
          {% for item in site.navigation %}
             {% assign subitem_active = 'false' %}
             {% for subitem in item.subitems %}

docs/assets/js/adminlte.js

@@ -1051,7 +1051,7 @@
             $(this).data(DATA_KEY, typeof config === 'string' ? data : config);
           }
 
-          if (typeof config === 'string' && config.match(/remove|toggle/)) {
+          if (typeof config === 'string' && config.match(/remove|toggle|toggleMaximize/)) {
             data[config]();
           } else if (typeof config === 'object') {
             data._init($(this));

docs/components/control-sidebar.md

@@ -38,5 +38,5 @@ The following code should be placed within the `.wrapper` div. I prefer to place
 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" data-slide="true" href="#">Toggle Control Sidebar</a>
+<a class="nav-link" data-widget="control-sidebar" href="#">Toggle Control Sidebar</a>
 ```

docs/javascript/control-sidebar.md

@@ -2,3 +2,59 @@
 layout: page
 title: Control Sidebar Plugin
 ---
+
+The control sidebar component is part of AdminLTE's layout as the right sidebar. 
+
+##### Usage
+This plugin can be activated as a jQuery plugin or using the data api. To activate the plugin, you must first add the HTML markup to your layout, then create the toggle button as shown below. 
+
+###### HTML Markup
+{: .text-bold }
+```html
+<!-- Control Sidebar -->
+<aside class="control-sidebar control-sidebar-dark">
+  <!-- Control sidebar content goes here -->
+</aside>
+<!-- /.control-sidebar -->
+```
+
+###### Data api
+{: .text-bold }
+Add `data-widget="control-sidebar"` to any button or a element to activate the plugin.
+
+```html
+<a href="#" data-widget="control-sidebar">Toggle Control Sidebar</a>
+```
+
+###### jQuery
+{: .text-bold }
+Just like all other AdminLTE plugins, you can also activate the toggle button using jQuery by running the following example. 
+```js
+$("#my-toggle-button").ControlSidebar('toggle');
+```
+
+##### Options
+
+|---
+| Name | Type | Default | Description
+|-|-|-|-
+|slide | Boolean | TRUE | Whether the sidebar should slide over the content or push the content to make space for itself.
+{: .table .table-bordered .bg-light}
+
+> ##### Tip!
+> You can use any option via the data-attributes like this to enable auto collapse sidebar on 768 pixels width.
+> ```html
+> <a href="#" data-widget="control-sidebar" data-slide="false">Toggle Control Sidebar</a>
+> ```
+{: .quote-info}
+
+##### Events
+{: .mt-4}
+
+|---
+| Event Type | Description
+|-|-
+|  | 
+{: .table .table-bordered .bg-light}
+
+Example: `$('#toggle-button').on('shown.lte.control.sidebar', handleExpandedEvent)`

docs/javascript/direct-chat.md

@@ -0,0 +1,35 @@
+---
+layout: page
+title: Direct Chat Plugin
+---
+
+The direct chat plugin provides simple functionality to the direct chat component. 
+
+##### Usage
+This plugin can be activated as a jQuery plugin or using the data api. 
+
+###### Data API
+{: .text-bold }
+Add `data-widget="chat-pane-toggle"` to a button to activate the plugin. 
+```html
+<button class="btn btn-primary" data-widget="chat-pane-toggle">Toggle Chat Pane</button>
+``` 
+
+###### jQuery
+{: .text-bold }
+The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events. 
+```js
+$('#chat-pane-toggle').DirectChat('toggle')
+```
+
+
+##### Methods
+{: .mt-4}
+
+|---
+| Method | Description
+|-|-
+|toggle | Toggles the state of the chat pane between hidden and visible.
+{: .table .table-bordered .bg-light}
+
+Example: `$('#chat-pane-toggle').DirectChat('toggle')`

docs/javascript/layout.md

@@ -0,0 +1,38 @@
+---
+layout: page
+title: Layout Plugin
+---
+
+The layout plugin manages the layout in case of css failure to reset the height or width of the content. 
+
+##### Usage
+This plugin is activated automatically upon window load. 
+
+##### Options
+{: .mt-4}
+
+|---
+| Name | Type | Default | Description
+|-|-|-|-
+|scrollbarTheme | Boolean | `os-theme-light` | Scrollbar Theme used while SideBar Fixed
+|scrollbarAutoHide | Boolean | `l` | Scrollbar auto-hide trigger
+|---
+{: .table .table-bordered .bg-light}
+
+> ##### Tip!
+> You can use any option via the data-attributes like this.
+> ```html
+> <body data-scrollbar-auto-hide="n">...</body>
+> ```
+{: .quote-info}
+
+##### Methods
+{: .mt-4}
+
+|---
+| Method | Description
+|-|-
+|fixLayoutHeight | Fix the content / control sidebar height and activates OverlayScrollbars for sidebar / control sidebar
+{: .table .table-bordered .bg-light}
+
+Example: `$('body').Layout('fixLayoutHeight')`

docs/javascript/push-menu.md

@@ -2,3 +2,63 @@
 layout: page
 title: Push Menu Plugin
 ---
+
+The PushMenu plugin controls the toggle button of the main sidebar. 
+
+##### Usage
+This plugin can be activated as a jQuery plugin or using the data api. 
+
+###### Data API
+{: .text-bold }
+Add `data-widget="pushmenu"` to a button to activate the plugin. 
+```html
+<button class="btn btn-primary" data-widget="pushmenu">Toggle Sidebar</button>
+```
+
+###### jQuery
+{: .text-bold }
+```js
+$('.sidebar-toggle-btn').PushMenu(options)
+```
+
+##### Options
+{: .mt-4}
+
+|---
+| Name | Type | Default | Description
+|-|-|-|-
+|autoCollapseSize | Boolean/Number | FALSE | Screen width in pixels to trigger auto collapse sidebar
+|screenCollapseSize | Number | 768 | Screen width in pixels for small screens.
+{: .table .table-bordered .bg-light}
+
+> ##### Tip!
+> You can use any option via the data-attributes like this to enable auto collapse sidebar on 768 pixels width.
+> ```html
+> <button class="btn btn-primary" data-widget="pushmenu" data-auto-collapse-size="768">Toggle Sidebar</button>
+> ```
+{: .quote-info}
+
+
+##### Events
+{: .mt-4}
+
+|---
+| Event Type | Description
+|-|-
+|collapsed.lte.pushmenu | Fired when the sidebar collapsed.
+|shown.lte.pushmenu | Fired when the sidebar shown.
+{: .table .table-bordered .bg-light}
+
+Example: `$(document).on('shown.lte.pushmenu', handleExpandedEvent)`
+
+
+##### Methods
+{: .mt-4}
+
+|---
+| Method | Description
+|-|-
+|toggle | Toggles the state of the menu between expanded and collapsed.
+{: .table .table-bordered .bg-light}
+
+Example: `$('[data-widget="pushmenu"]').PushMenu('toggle')`

docs/javascript/todo-list.md

@@ -0,0 +1,39 @@
+---
+layout: page
+title: Todo List Plugin
+---
+
+The todo list plugin provides simple functionality to the todo list component. 
+
+##### Usage
+This plugin can be activated as a jQuery plugin or using the data api. 
+
+###### Data API
+{: .text-bold }
+Activate the plugin by adding `data-widget="todo-list"` to the ul element. If you need to provide onCheck and onUncheck methods, please use the jQuery API. 
+
+###### jQuery
+{: .text-bold }
+The jQuery API provides more customizable options that allows the developer to handle checking and unchecking the todo list checkbox events. 
+```js
+$('#my-todo-list').TodoList({
+  onCheck: function(checkbox) {
+    // Do something when the checkbox is checked
+  },
+  onUnCheck: function(checkbox) {
+    // Do something after the checkbox has been unchecked
+  }
+})
+```
+
+
+##### Options
+{: .mt-4}
+
+|---
+| Name | Type | Default | Description
+|-|-|-|-
+|onCheck | Function | Anonymous Function | Handle checkbox onCheck event. The checkbox is passed as parameter to the function.
+|onUnCheck | Function | Anonymous Function | Handle checkbox onUnCheck event. The checkbox is passed as parameter to the function.
+|---
+{: .table .table-bordered .bg-light}

docs/javascript/treeview.md

@@ -0,0 +1,64 @@
+---
+layout: page
+title: Treeview Plugin
+---
+
+The Treeview plugin converts a nested list into a tree view where sub menus can be expanded. 
+
+##### Usage
+This plugin can be activated as a jQuery plugin or using the data api. 
+
+###### Data API
+{: .text-bold }
+
+Add `data-widget="treeview"` to any `ul` or `ol` element to activate the plugin. 
+
+```html
+<ul data-widget="treeview">
+  <li><a href="#">One Level</a></li>
+  <li class="treeview">
+    <a href="#">Multilevel</a>
+    <ul class="treeview-menu">
+      <li><a href="#">Level 2</a></li>
+    </ul>
+  </li>
+</ul>
+```
+
+###### jQuery
+{: .text-bold }
+```js
+$('ul').Treeview(options)
+```
+
+##### Options
+{: .mt-4}
+
+|---
+| Name | Type | Default | Description
+|-|-|-|-
+|animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds.
+|accordion | Boolean | TRUE | Whether to collapse the open menu when expanding another.
+|trigger | String | `[data-widget="treeview"] .nav-link` |  Selector of the element that should respond to the click and result in expanding or collapsing it sibling sub menu. 
+{: .table .table-bordered .bg-light}
+
+> ##### Tip!
+> You can use any option via the data-attributes like this.
+> ```html
+> <ul data-widget="treeview" data-accordion="false">...</ul>
+> ```
+{: .quote-info}
+
+##### Events
+{: .mt-4}
+
+|---
+| Event Type | Description
+|-|-
+|expanded.lte.treeview | Triggered after a sub menu expands.
+|collapsed.lte.treeview | Triggered after a sub menu collapses.
+|load.lte.treeview | Triggered after the plugin initialized via data api.
+{: .table .table-bordered .bg-light}
+
+Example: `$('ul').on('expanded.lte.treeview', handleExpandedEvent)`
+

docs/javascript/widget.md

@@ -0,0 +1,192 @@
+---
+layout: page
+title: Widget Plugin
+---
+
+The widget plugin provides the functionality for collapsing, expanding and removing a card. 
+
+##### Usage
+This plugin can be activated as a jQuery plugin or using the data api. 
+
+###### Data API
+{: .text-bold }
+
+This plugin provides two data-api attributes. Any element using one of the following attributes should be placed within the `.card-tools` div, which is usually in the card header. For more information about the [card HTML structure]({% link components/cards.md %}), visit the card component documentation 
+
+`data-widget="collapse"`
+<br />
+This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked. 
+<div class="row">
+  <div class="col-12 col-md-4">
+     <div class="card">
+      <div class="card-header">
+        <h3 class="card-title">Collapsible Card Example</h3>
+        <div class="card-tools">
+          <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
+        </div>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-12 col-md-8" markdown="1">
+```html
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Collapsible Card Example</h3>
+    <div class="card-tools">
+      <!-- Collapse Button -->
+      <button type="button" class="btn btn-tool" data-widget="collapse"><i class="fas fa-minus"></i></button>
+    </div>
+    <!-- /.card-tools -->
+  </div>
+  <!-- /.card-header -->
+  <div class="card-body">
+    The body of the card
+  </div>
+  <!-- /.card-body -->
+</div>
+<!-- /.card -->
+```
+{: .max-height-300}
+  </div>
+</div>
+
+`data-widget="remove"`
+<br />
+This attribute, when attached to a button, allows the box to be removed when clicked. 
+<div class="row">
+  <div class="col-12 col-md-4">
+     <div class="card">
+      <div class="card-header">
+        <h3 class="card-title">Removable Card Example</h3>
+        <div class="card-tools">
+          <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
+        </div>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-12 col-md-8" markdown="1">
+```html
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Removable Card Example</h3>
+    <div class="card-tools">
+      <!-- Remove Button -->
+      <button type="button" class="btn btn-tool" data-widget="remove"><i class="fas fa-times"></i></button>
+    </div>
+    <!-- /.card-tools -->
+  </div>
+  <!-- /.card-header -->
+  <div class="card-body">
+    The body of the card
+  </div>
+  <!-- /.card-body -->
+</div>
+<!-- /.card -->
+```
+{: .max-height-300}
+  </div>
+</div>
+
+`data-widget="maximize"`
+<br />
+This attribute, when attached to a button, allows the box to be maximize/minimize when clicked. 
+<div class="row">
+  <div class="col-12 col-md-4">
+     <div class="card">
+      <div class="card-header">
+        <h3 class="card-title">Maximizable Card Example</h3>
+        <div class="card-tools">
+          <button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i></button>
+        </div>
+      </div>
+      <div class="card-body">
+        The body of the card
+      </div>
+    </div>
+  </div>
+  <div class="col-12 col-md-8" markdown="1">
+```html
+<div class="card">
+  <div class="card-header">
+    <h3 class="card-title">Maximizable Card Example</h3>
+    <div class="card-tools">
+      <!-- Maximize Button -->
+      <button type="button" class="btn btn-tool" data-widget="maximize"><i class="fas fa-expand"></i></button>
+    </div>
+    <!-- /.card-tools -->
+  </div>
+  <!-- /.card-header -->
+  <div class="card-body">
+    The body of the card
+  </div>
+  <!-- /.card-body -->
+</div>
+<!-- /.card -->
+```
+{: .max-height-300}
+  </div>
+</div>
+
+
+###### jQuery
+{: .text-bold }
+To activate any button using jQuery, you must provide the removeTrigger and collapseTrigger options. Otherwise, the plugin will assume the default `data-widget` selectors. 
+
+```js
+$('#my-card').Widget(options)
+```
+
+##### Options
+{: .mt-4}
+
+|---
+| Name | Type | Default | Description
+|-|-|-|-
+|animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds.
+|collapseTrigger | String | `[data-widget="remove"]` | jQuery selector to the element responsible for collapsing the box.
+|removeTrigger | String | `[data-widget="collapse"]` | jQuery selector to the element responsible for removing the box.
+{: .table .table-bordered .bg-light}
+
+> ##### Tip!
+> You can use any option via the data-attributes like this.
+> ```html
+> <button type="button" class="btn btn-tool" data-widget="collapse" data-animation-speed="1000"><i class="fas fa-minus"></i></button>
+> ```
+{: .quote-info}
+
+##### Events
+{: .mt-4}
+
+|---
+| Event Type | Description
+|-|-
+|expanded.lte.widget | Triggered after a card expanded.
+|collapsed.lte.widget | Triggered after a card collapsed.
+|maximized.lte.widget | Triggered after a card maximized.
+|minimized.lte.widget | Triggered after a card minimized.
+|removed.lte.widget | Triggered after a card removed.
+{: .table .table-bordered .bg-light}
+
+Example: `$('#my-card').on('expanded.lte.widget', handleExpandedEvent)`
+
+
+##### Methods
+{: .mt-4}
+
+|---
+| Method | Description
+|-|-
+|collapse | Collapses the card
+|expand | Expands the card
+|remove | Removes the card
+|toggle | Toggles the state of the card between expanded and collapsed
+|toggleMaximize | Toggles the state of the card between maximized and minimized
+{: .table .table-bordered .bg-light}
+
+Example: `$('#my-card-widget').Widget('toggle')`