Сайдбары хороши в двух случаях: если на них расположено что-то настолько важное, что они должны всегда быть перед глазами (взять, к примеру, любой почтовый клиент, да хотя бы и Gmail) или если нужно иметь возможность это самое важное спрятать для экономии места (опять же, как в Gmail, но уже в мобильной версии). Браться за создание сайдбаров с нуля – задача не для средних умов, да и вообще бессмысленно. Для такой задачи лучше употребить соответствующий фреймворк. Об одном из таких примеров мы сегодня и поговорим.

Коротко о Webix

Прежде чем перейти непосредственно к коду, давайте обмолвимся коротко, что это за библиотека такая. Итак, Webix представляет из себя библиотеку UI компонентов разной сложности, от простой кнопки до Spreadsheet Widget, с помощью которого можно создавать онлайн таблицы в стиле Excel. Помимо собственно компонентов, в наличии механизм обработки событий, поддержка оффлайн-режима, интеграция с jQuery, AngularJS, Vue.js, Backbone.js, online инструменты: Skin builder, Form builder. Заявлена совместимость с Angular 2.

Узнать больше можно на странице документации, а мы плавно переходим к практической части.

Подключаем необходимые файлы

Если вы загрузите архив с библиотекой, внутри папки codebase вы обнаружите необходимые js и css файлы:

<link rel="stylesheet" href="./codebase/webix.css">
<script src="./codebase/webix.js"></script>

Также можно использовать CDN:

<link rel="stylesheet" href="http://cdn.webix.com/edge/webix.css">
<script src="http://cdn.webix.com/edge/webix.js"></script>

Или NPM:

npm install webix

Или даже NuGet:

nuget install Webix

Или если вы предпочитаете Bower:

bower install webix

Все вышеперечисленное относится непосредственно к Webix. Для того, чтобы получить возможность создавать сайдбары, нам понадобится еще парочка файлов. Доступ к ним же через CDN:

<script src="//cdn.webix.com/components/sidebar/sidebar.js"></script>
<link rel="stylesheet" href="//cdn.webix.com/components/sidebar/sidebar.css">

Сайдбар на примере e-mail клиента

Поскольку мы уже заговорили об e-mail клиентах, не будем отступать от этой темы и создадим в качестве примера именно такое приложение. С помощью компонента DataTable я взял вот такой вот просмотрщик имейлов, к которому мы и будем добавлять сайдбар:



Поскольку обзор DataTable не входит в наши планы, подробно останавливаться на нем я не буду, исходный код примера можно будет посмотреть ниже.

Начнем с основ. Для того, чтобы добавить в приложение определенный компонент, в Webix используется свойство view. Например, мы хотим создать кнопку:

view: "button"

Для инициализации Webix-приложения нам понадобится следующий код:

// опционально. код выполнится после загрузки страницы 
webix.ready(function(){
    // конструктор
    webix.ui({
        // описание приложения
        view: "button",
    });
});

Код выше создаст страницу, состоящую из одной кнопки. Поскольку наше приложение состоит из нескольких компонентов, нам нужно задуматься о создании лэйаута. Для этого используются свойства rows и cols, которые служат для создания рядов и колонок.

Например:

webix.ui({
    cols: [
        { view: "button"},
        { view: "button"}
    ]
});

Создаст уже две колонки, по одной кнопке в каждой. Комбинируя эти свойства, добавляя вложенные колонки и ряды, меняя их размеры, например, с помощью свойства gravity можно создать лэйаут необходимой сложности.

Теперь мы можем перейти к сайдбару. Он основан на компоненте Tree и также использует формат JSON для описания своей структуры. Для удобства лучше хранить такое описание в отдельной переменной.

Наш сайдбар будет состоять из следующих пунктов меню:

var menu_data = [
  {id: "inbox", icon: "envelope", value: "Inbox"},
  { /* прочие пункты */ },
  {id: "tags", icon: "tags", value:"Tags", data:[
      { id: "friends", value: "Friends"},
      { id: "work", value: "Work"},
      { id: "news", value: "News"}
  ]}
],

Каждый элемент должен иметь уникальный ID. value определяет, каким будет текст пункта меню, а icon – иконку. Webix использует набор иконок Font Awesome. Обратите внимание на пункт Tags. Он содержит вложенные подменю, которые будут открываться по клику.

Итак, суммируя все вышесказанное, мы можем перейти к нашему приложению:

webix.ui({
    cols:[
        /* первая колонка, сайдбар */
        { 
            view: "sidebar",
            data: menu_data,  
        },
        /* вторая колонка */
        { /* dataview component */ }
    ]
});

В принципе, это все, что требуется для создания базового сайдбара: указать, что именно этот компонент мы хотим создать, а также выбрать источник данных о его структуре.

В результате мы получили вот такой сайдбар:



Пример кода и демку можно посмотреть здесь.

Добавляем кнопку для скрытия сайдбара

Если мы хотим сэкономить немного места или просто не хотим, чтобы сайдбар мозолил глаза, можно добавить в приложение кнопку-гамбургер, знакомую нам по мобильным (и не только) приложениям. Для этого необходимо добавить к приложению верхний тулбар, что немного усложнит наш лэйаут. Теперь он будет состоять из двух рядов. В первый из них, верхний ряд мы и поместим тулбар. Второй, нижний, останется без изменений и будет состоять их просмотрщика с сайдбаром:

webix.ui({
    rows:[
        { /* здесь будет тулбар */},
        {cols:[
            { /* сайдбар */ },
            { /* наши имейлы */ }
        ]}
    ]
});

Давайте разберемся с кодом, который нам понадобится для создания заголовка. Как и было сказано, тип создаваемого компонента определяется значением свойства view. В данном случае этим значением будет toolbar. Его содержимое определяется значением свойства elements. В нашем случае мы поместим на тулбар следующие элементы: кнопку-гамбургер, заголовок и несколько иконок-уведомлений:

{view: "toolbar", elements: [
    /* кнопка-гамбургер */
    { view: "button", type: "icon", icon: "bars",
      width: 37, align: "left", css: "app_button", 
      click: function(){
          $$("$sidebar1").toggle()
      }
    },
    /* заголовок */
    { view: "label", label: "Webix E-Mail CLient"},
    { /* добавляем пустое пространство */ },
    /* уведомление 1 */
    { view: "button", type: "icon", icon: "envelope-o",
      width: 45, css: "app_button", badge:4},
    /* уведомление 2 */
    { view: "button", type: "icon", icon: "bell-o",
      width: 45, css: "app_button", badge:10}
    ]
},

Свойства type: "icon" и icon: «icon-name» создают кнопки-иконки. Свойство click позволяет определить функцию, которая будет вызываться по клику. В данном случае, она переключает состояния сайдбара. К двум последним кнопкам мы добавили свойство badge, которое позволяет использовать оранжевые бейджи с номерами, соответствующими значению свойства.

Вот что получилось в итоге:



В свернутом виде остаются видимыми иконки меню сайдбара. Наведя на них курсор, можно посмотреть содержимое меню и выбрать один из пунктов.

Раскрытый сайдбар имеет уже привычный нам вид:



И да, обратите внимание на значки уведомления справа вверху. Именно ради этих оранжевых кружочков мы и использовали свойство badge.

Попробовать этот пример и поиграть с кодом можно по этой ссылке.

Заключение

Приведенный пример не описывает всех возможностей данного компонента. Помимо прочего, вы можете задавать шаблоны для элементов сайдбара: указывать CSS-класс, который нужно к ним применить, менять внешний вид стрелок для многоуровневых меню и т.д. Sidebar наследует API компонента Tree, а также предоставляет набор уникальных для него методов. Более подробно о них вы можете прочитать на странице документации.