Sidebar Ng

Provides an Angular wrapper for Sidebar.
To make sidebar have fixed positioning under some other element (e.g. toolbar),
a selector for that element should be passed as placeUnderSibling parameter.

Example

<div ng-app="Ring.sidebar" ng-strict-di ng-init="isShowSideBar = true"
  style="position: relative;">
  <rg-sidebar
    show="isShowSideBar"
    place-under-sibling=".some-toolbar"
    top-offset="1">
    <div>

      <img class="ring-sidebar__avatar"
           ng-src="http://via.placeholder.com/64x64"/>

      <h3 class="ring-sidebar__title">
        <a class="ring-link" href="#">User Link</a>
      </h3>

      <div class="ring-sidebar__section">
        <span class="ring-sidebar__section-title" translate>Full Name</span>

        <div class="ring-sidebar__section-text">Value</div>
      </div>
    </div>
  </rg-sidebar>
  <div class="some-toolbar">
    Toolbar to place before sidebar
    <rg-sidebar-toggle-button model="isShowSideBar">Toggle sidebar
    </rg-sidebar-toggle-button>
  </div>
</div>

import angular from 'angular';
import '@jetbrains/ring-ui/components/sidebar-ng/sidebar-ng';
import '@jetbrains/ring-ui/components/link/link__legacy.css';

Sidebar Ng with a lot of content

Example

<div id="content-before">
  <div>Lorem</div>
  <div>Ipsum</div>
  <div>Lorem</div>
  <div>Lorem</div>
  <div>Lorem</div>
</div>
<div ng-app="foo" ng-strict-di ng-init="isShowSideBar = true"
  style="position: relative;">
  <rg-sidebar show="isShowSideBar" place-under-sibling=".some-toolbar"
    top-offset="1">
    <div id="big-content">===== The start of sidebar =====
      <rg-select options="item in []"></rg-select>
      <br/></div>
  </rg-sidebar>
  <div class="some-toolbar">
    Toolbar to place before sidebar
    <rg-sidebar-toggle-button model="isShowSideBar">Toggle sidebar
    </rg-sidebar-toggle-button>
  </div>
</div>
<div id="content-after"></div>

import angular from 'angular';
import SidebarNG from '@jetbrains/ring-ui/components/sidebar-ng/sidebar-ng';
import SelectNG from '@jetbrains/ring-ui/components/select-ng/select-ng';

angular.module('foo', [SidebarNG, SelectNG]);

var bigContent = document.getElementById('big-content');
var after = document.getElementById('content-after');

for (var i=0; i< 100; i++) {
  bigContent.innerHTML += ' ' + Math.random() + '<br/>';
  after.innerHTML += ' ' + Math.random() + '<br/>';
}

bigContent.innerHTML += '===== The end of sidebar =====';