<!--
PLEASE ADD USAGE DOCS AND EXAMPLES FOR THE `<Sidebar/>` ELEMENT.
-->

```jsx
import Flex from '@ui/components/Flex';
import data from './local.json';

<Flex id="STYLED-EXAMPLE--SIDEBAR" justify="center">
  <div id="hub-container">
    <div className="hub-container">
      <div id="hub-sidebar-parent">
        <nav id="hub-sidebar">
          <div id="hub-sidebar-content">
            <SideBar activeDoc={'uip'} categories={data} />
          </div>
        </nav>
      </div>
    </div>
  </div>
</Flex>;
```

<style>
#STYLED-EXAMPLE--SIDEBAR #hub-sidebar{max-height:100%;overflow:hidden;position:relative;font-size:13px}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-parent{width:246px;left:auto;top:0;max-height:100vh;z-index:10}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content{background:#fff;border:1px solid #eee;border-width:.9px;border-radius:4px;padding:1px 15px 21px 25px}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content h3{margin:25px auto 8px;font-size:inherit;text-transform:uppercase}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul{list-style:none;padding:0;margin:0 -10px 5px}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li>a{display:-ms-flexbox;display:box;display:flex;flex-flow:nowrap row;align-items:center;max-width:calc(100% - 10px);width:100%;box-sizing:border-box;padding:5px 10px;color:#666;transition:.3s ease-out;border-radius:2.5px;text-decoration:none}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li>a:active{pointer-events:none}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li>a .link-title{display:block;overflow:hidden;text-overflow:ellipsis}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li>a>.fa{order:1;margin-left:auto;font-size:.8em;transform:rotate(0);transition:transform .3s 0s ease-out;color:inherit;padding:2px;cursor:default}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li>a>.fa:hover{transform:rotate(0) scale(1.33)}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li a.sidebar-link>.link-title{display:-ms-flexbox;display:box;display:flex;justify-content:space-between;align-items:center;width:100%}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li a.sidebar-link>.link-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li a.active>.fa{pointer-events:none}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li a:hover:not(.active){background:#f6f6f6;color:#048ef5}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li a.active,#hub-sidebar-content ul>li.subnav-expanded>a{background:#048ef5;color:#fff;font-weight:600}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li.subnav-expanded>a:not(.active){background:#f3f3f3;color:#048ef5}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li.subnav-expanded>a>.fa{transform:rotate(90deg)}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li.subnav-soft-toggle>a>.fa:hover{transform:rotate(90deg) scale(1.25)}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li.subnav-expanded:not(.subnav-soft-toggle)>a>.fa{pointer-events:none}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li:not(.subnav-expanded)>.subpages{display:none}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul>li>li+li{margin-top:5px}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul.subpages{position:relative;margin:5px 0 5px 10px;border-left:none!important}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul.subpages:after{content:' ';position:absolute;top:0;left:0;height:100%;width:3px;border-radius:6px;background:#048ef5}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul.subpages:empty{display:none!important}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul.subpages>li>a{display:block;border-radius:0 2.5px 2.5px 0}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul.subpages>li>a.active{background:#048ef5;color:#fff}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul.subpages>li:first-child>a{border-top-left-radius:2.5px}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar-content ul.subpages>li:last-child>a{border-bottom-left-radius:2.5px}#STYLED-EXAMPLE--SIDEBAR #hub-sidebar .scrollable-parent{height:100%;width:100%}
</style>
