@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
203 lines (202 loc) • 6.83 kB
HTML
<div
class="md-sidebar md-sidebar--global md-sidebar--indented md-sidebar--nested md-sidebar--expanded"
>
<div class="md-sidebar__body">
<div class="md-sidebar-nav">
<div
class="md-list md-list--vertical md-sidebar-nav__group md-sidebar-nav__group--primary"
role="list"
>
<a
class="md-list-item"
id="md-sidebar__nav-item-1-9"
role="listitem"
data-md-event-key="md-sidebar__nav-item-1-9"
href="javscript:void(0)"
>
<div class="md-list-item__left">
<i
class="md-icon icon icon-record_20"
style="font-size: 20px; color: inherit;"
></i>
</div>
<div class="md-list-item__center">Level 1</div>
</a>
<a
class="md-list-item"
id="md-sidebar__nav-item-1-11"
role="listitem"
data-md-event-key="md-sidebar__nav-item-1-11"
href="javscript:void(0)"
>
<div class="md-list-item__left">
<i
class="md-icon icon icon-record_20"
style="font-size: 20px; color: inherit;"
></i>
</div>
<div class="md-list-item__center">Level 1 Closed</div>
<div class="md-list-item__right">
<i
class="md-icon icon icon-arrow-down_12"
style="font-size: 12px; color: inherit;"
></i>
</div>
</a>
<div
class="md-sidebar-nav__group md-sidebar-nav__group--secondary md-sidebar-nav__group--collapsed"
></div>
<a
class="md-list-item"
id="md-sidebar__nav-item-1-1"
role="listitem"
data-md-event-key="md-sidebar__nav-item-1-1"
href="javscript:void(0)"
>
<div class="md-list-item__left">
<i
class="md-icon icon icon-record_20"
style="font-size: 20px; color: inherit;"
></i>
</div>
<div class="md-list-item__center">Level 1 Open</div>
<div class="md-list-item__right">
<i
class="md-icon icon icon-arrow-up_12"
style="font-size: 12px; color: inherit;"
></i>
</div>
</a>
<div
class="md-sidebar-nav__group md-sidebar-nav__group--secondary md-sidebar-nav__group--expanded"
>
<a
class="md-list-item"
id="md-sidebar__nav-item-1-3-1"
role="listitem"
data-md-event-key="md-sidebar__nav-item-1-3-1"
href="javascript:void(0)"
>
<div class="md-list-item__center">Level 2</div>
</a>
</div>
<a
class="md-list-item active"
id="md-sidebar__nav-item-1-5"
role="listitem"
data-md-event-key="md-sidebar__nav-item-1-5"
href="javascript:void(0)"
>
<div class="md-list-item__left">
<i
class="md-icon icon icon-record_20"
style="font-size: 20px; color: inherit;"
></i>
</div>
<div class="md-list-item__center">Level 1 Open</div>
<div class="md-list-item__right">
<i
class="md-icon icon icon-arrow-up_12"
style="font-size: 12px; color: inherit;"
></i>
</div>
</a>
<div
class="md-sidebar-nav__group md-sidebar-nav__group--secondary md-sidebar-nav__group--expanded"
>
<div
aria-current="true"
class="md-list-item"
id="md-sidebar__nav-item-1-7-1"
role="listitem"
data-md-event-key="md-sidebar__nav-item-1-7-1"
>
<div class="md-list-item__center">Level 2 Open</div>
<div class="md-list-item__right">
<i
class="md-icon icon icon-arrow-up_12"
style="font-size: 12px; color: inherit;"
></i>
</div>
</div>
<div
class="md-sidebar-nav__group md-sidebar-nav__group--tertiary md-sidebar-nav__group--expanded"
>
<div
class="md-list-item"
id="md-sidebar__nav-item-1-7-3-1"
role="listitem"
data-md-event-key="md-sidebar__nav-item-1-7-3-1"
>
<div class="md-list-item__center">Level 3</div>
</div>
<div
class="md-list-item active"
id="md-sidebar__nav-item-1-7-3-3"
role="listitem"
data-md-event-key="md-sidebar__nav-item-1-7-3-3"
>
<div class="md-list-item__center">Level 3</div>
</div>
<div
class="md-list-item"
id="md-sidebar__nav-item-1-7-3-5"
role="listitem"
data-md-event-key="md-sidebar__nav-item-1-7-3-5"
>
<div class="md-list-item__center">Level 3</div>
</div>
</div>
<div
class="md-list-item"
id="md-sidebar__nav-item-1-7-4"
role="listitem"
data-md-event-key="md-sidebar__nav-item-1-7-4"
>
<div class="md-list-item__center">Level 2 Closed</div>
<div class="md-list-item__right">
<i
class="md-icon icon icon-arrow-down_12"
style="font-size: 12px; color: inherit;"
></i>
</div>
</div>
<div
class="md-sidebar-nav__group md-sidebar-nav__group--tertiary md-sidebar-nav__group--collapsed"
></div>
<div
class="md-list-item active"
id="md-sidebar__nav-item-1-7-6"
role="listitem"
data-md-event-key="md-sidebar__nav-item-1-7-6"
>
<div class="md-list-item__center">Level 2</div>
</div>
</div>
</div>
</div>
<div class="md-sidebar-nav">
<div class="md-sidebar-nav__header">section header</div>
<div
class="md-list md-list--vertical md-sidebar-nav__group md-sidebar-nav__group--primary"
role="list"
>
<a
class="md-list-item"
id="md-sidebar__nav-item-2-1"
role="listitem"
data-md-event-key="md-sidebar__nav-item-2-1"
href="javscript:void(0)"
>
<div class="md-list-item__left">
<i
class="md-icon icon icon-record_20"
style="font-size: 20px; color: inherit;"
></i>
</div>
<div class="md-list-item__center">Level 1</div>
</a>
</div>
</div>
</div>
</div>