f2d810febc
- Make the left bar gray (instead of blue). - Show gray dot when hovering over an element. - Hide left bar and dots in embedded mode.
32 lines
1.3 KiB
HTML
32 lines
1.3 KiB
HTML
<div *ngIf="type !== 'None'" class="toc-inner" [class.collapsed]="isCollapsed">
|
|
|
|
<div *ngIf="type === 'EmbeddedSimple'" class="toc-heading embedded">
|
|
Contents
|
|
</div>
|
|
|
|
<button *ngIf="type === 'EmbeddedExpandable'" type="button" (click)="toggle(false)"
|
|
class="toc-heading embedded secondary"
|
|
title="Expand/collapse contents"
|
|
aria-label="Expand/collapse contents"
|
|
[attr.aria-pressed]="!isCollapsed">
|
|
Contents
|
|
<md-icon class="rotating-icon" svgIcon="keyboard_arrow_right" [class.collapsed]="isCollapsed"></md-icon>
|
|
</button>
|
|
|
|
<ul class="toc-list" [class.embedded]="type !== 'Floating'">
|
|
<ng-container *ngFor="let toc of tocList; let i = index">
|
|
<li #tocItem title="{{toc.title}}" *ngIf="type === 'Floating' || toc.level !== 'h1'"
|
|
class="{{toc.level}}" [class.secondary]="type === 'EmbeddedExpandable' && i >= primaryMax" [class.active]="i === activeIndex">
|
|
<a [href]="toc.href" [innerHTML]="toc.content"></a>
|
|
</li>
|
|
</ng-container>
|
|
</ul>
|
|
|
|
<button *ngIf="type === 'EmbeddedExpandable'" type="button" (click)="toggle()"
|
|
class="toc-more-items embedded material-icons" [class.collapsed]="isCollapsed"
|
|
title="Expand/collapse contents"
|
|
aria-label="Expand/collapse contents"
|
|
[attr.aria-pressed]="!isCollapsed">
|
|
</button>
|
|
</div>
|