Sidebar Dropdown

En este aprtado vamos a ver el sidebar dropdown, una barra lateral en la cual cada uno de sus elementos internos despliga un submenu de opciones. La muestra de este componente puede apreciarse a su izquirda en el sidebar de esta documentación.

Inicialización

Al igual que los demás módulos dinámicos existe dos formas de iniciaclización. Si el sideber y labarra de navegación principal (NAV) se encuentran en el HTML (Estático) vamos a utilizar la primera forma de inicialización en caso contrario, si la navegación y el sidebar se agregar a través de JS (Dinámico) inicializaremos el módulo de la segunda forma. 

    /** LA PRIMERA FORMA **/

    // Un Objeto JSON con dos atributos
    // El primero: es el ID del la barra de navegación principal 
    // El Segundo: El ID del sidebar que contendrá todos los menues
    BS.SidebarDropInit({idNav: "#nav", idSidebar: "#sidebar"})

    /** LA SEGUNDA FORMA **/

    // Igual a la primera pero se le aplica un retraso
    // a la inicialización del elemento para encontrar, unavez inicializado 
    // los elementos dentro del HTML
    window.onload = () => setTimeout(() => BS.SidebarDropInit({idNav: "#nav", idSidebar: "#sidebar"}), 100)
Notese que se envía por parámetro el ID del nav y el ID del sidebar, por esta razón es obligatorio identificar a cada elemento para que funcione adecuadamente el conjunto de componentes.

Muestra

Antes de comenzar la explicación es bueno ver un ejemplo y su código HTML asociado para entender la explicación posterior.

Muestra Default
Si hace pruebas con el ejemplo anterior notará que en dispositivos menores a 1030px el sidebar se ocultará, mientras que en dispositivos con un tamaño de pantalla mayor al mencionado anteriomente el sidebardrop se mostrará automáticamente, permitiendo así la correcta distribución de los elementos.
Cuando la pantalla es más pequeña que 1030px es posible ocultar el sidebardrop haciendo click en cualquier parte de la pantalla para mejorar la experiencia de usuario.

Temas

Anteriomente vimos un sidebardrop de tema claro, bodystyle provee el mismo elemento pero de tema oscuro solamente cambiando la clase .bs-sidebar-drop-light por .bs-sidebar-drop-dark.

Tema Oscuro
Notese que la personalización puede continuar, los estilos de colores de fondo pueden modificarse de tal manera de ajustar el diseño a nuestras necesidades. Recomensación:

Submenu Abierto

En muchas oportunidades queremos que el usuario, cuando ingresa a la página vea un submenú ya desplegado para situarlo y que la experiencia de usuario sea mayor, para esta tarea se inicializa el módulo con un atributo mas submenu que contendra el ID del submenú que queramos que aparezca desplegado.

Despliegue Muestra 
        BS.SidebarDropInit({idNav: "#idNav", idSidebar:"#idSidebar", submenu: "#idSubmenu"})
`r`n