|
2 | 2 |
|
3 | 3 | <div class="header-title-wrapper">
|
4 | 4 | <button mat-mini-fab color="primary" class="header-button">
|
5 |
| - <mat-icon>menu</mat-icon> |
| 5 | + <mat-icon *ngIf="!isShowSidebar" (click)="sidenav.toggle(true)">menu</mat-icon> |
| 6 | + <mat-icon *ngIf="isShowSidebar" (click)="sidenav.toggle(false)">arrow_back</mat-icon> |
6 | 7 | </button>
|
7 | 8 | <h6 class="header-title">Angular Material Admin Full Documentation</h6>
|
8 | 9 | </div>
|
9 | 10 |
|
10 | 11 | <div class="header-toolbar-wrapper">
|
11 |
| - <a href="https://twitter.com/flatlogic"> |
12 |
| - <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-twitter"></mat-icon> |
13 |
| - </a> |
14 |
| - <a href="https://dribbble.com/flatlogic"> |
15 |
| - <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-dribbble"></mat-icon> |
16 |
| - </a> |
17 |
| - <a href="https://www.facebook.com/flatlogic"> |
18 |
| - <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-facebook"></mat-icon> |
19 |
| - </a> |
20 |
| - <a href="https://instagram.com/flatlogiccom/"> |
21 |
| - <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-instagram"></mat-icon> |
22 |
| - </a> |
23 |
| - <a href="https://www.linkedin.com/company/flatlogic/"> |
24 |
| - <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-linkedin"></mat-icon> |
25 |
| - </a> |
26 |
| - <a href="https://github.com/flatlogic"> |
27 |
| - <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-github"></mat-icon> |
28 |
| - </a> |
| 12 | + <div class="header-icons-wrapper"> |
| 13 | + <a href="https://twitter.com/flatlogic"> |
| 14 | + <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-twitter"></mat-icon> |
| 15 | + </a> |
| 16 | + <a href="https://dribbble.com/flatlogic"> |
| 17 | + <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-dribbble"></mat-icon> |
| 18 | + </a> |
| 19 | + <a href="https://www.facebook.com/flatlogic"> |
| 20 | + <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-facebook"></mat-icon> |
| 21 | + </a> |
| 22 | + <a href="https://instagram.com/flatlogiccom/"> |
| 23 | + <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-instagram"></mat-icon> |
| 24 | + </a> |
| 25 | + <a href="https://www.linkedin.com/company/flatlogic/"> |
| 26 | + <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-linkedin"></mat-icon> |
| 27 | + </a> |
| 28 | + <a href="https://github.com/flatlogic"> |
| 29 | + <mat-icon class="header-icon" fontSet="fa fa-fs" fontIcon="fa-github"></mat-icon> |
| 30 | + </a> |
| 31 | + </div> |
29 | 32 |
|
30 |
| - <button class="header-button" mat-flat-button color="primary">live preview</button> |
31 |
| - <button class="header-button" mat-stroked-button color="warn">buy</button> |
| 33 | + <div> |
| 34 | + <a href="https://demo.flatlogic.com/angular-material-admin-full"> |
| 35 | + <button class="header-button" mat-flat-button color="primary">live preview</button> |
| 36 | + </a> |
| 37 | + <a href="https://flatlogic.com/templates/angular"> |
| 38 | + <button class="header-button" mat-stroked-button color="warn">buy</button> |
| 39 | + </a> |
| 40 | + </div> |
32 | 41 | </div>
|
33 | 42 | </mat-toolbar>
|
34 | 43 |
|
35 |
| -<mat-sidenav-container class="sidebar-wrapper"> |
| 44 | +<mat-sidenav-container class="documentation-sidebar-wrapper"> |
36 | 45 | <mat-sidenav
|
37 | 46 | #sidenav
|
38 | 47 | mode="side"
|
39 | 48 | [(opened)]="isShowSidebar"
|
40 |
| - class="layout-sidebar" |
| 49 | + class="documentation-sidebar" |
41 | 50 | [mode]="mobileQuery.matches ? 'over' : 'side'"
|
42 | 51 | [fixedInViewport]="mobileQuery.matches"
|
43 | 52 | >
|
44 | 53 | <mat-list>
|
45 | 54 | <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
|
46 |
| - <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding routerLink="{{node.route}}" routerLinkActive="{{node.active}}"> |
47 |
| - <div class="sidebar-item-wrapper"> |
48 |
| - <p class="sidebar-text">{{node.name}}</p> |
| 55 | + <mat-tree-node class="mat-node" *matTreeNodeDef="let node" matTreeNodePadding routerLink="{{node.route}}" routerLinkActive="{{node.active}}"> |
| 56 | + <div class="documentation-sidebar-item-wrapper"> |
| 57 | + <div class="circle"></div> |
| 58 | + <p class="documentation-sidebar-text">{{node.name}}</p> |
49 | 59 | </div>
|
50 | 60 | </mat-tree-node>
|
51 | 61 |
|
52 | 62 | <mat-tree-node *matTreeNodeDef="let node; when: hasChild" class="mat-node">
|
53 |
| - <div *ngIf="node.name === 'Getting Started'" class="sidebar-item-wrapper" matTreeNodeToggle> |
54 |
| - <div class="sidebar-item-title"> |
55 |
| - <mat-icon class="sidebar-icon">inbox</mat-icon> |
56 |
| - <p class="sidebar-text">{{node.name}}</p> |
| 63 | + <div *ngIf="node.name === 'Getting Started'" class="documentation-sidebar-node-wrapper" matTreeNodeToggle> |
| 64 | + <div class="documentation-sidebar-item-title"> |
| 65 | + <mat-icon class="documentation-sidebar-icon">inbox</mat-icon> |
| 66 | + <p class="documentation-sidebar-text">{{node.name}}</p> |
57 | 67 | </div>
|
58 | 68 |
|
59 | 69 | <mat-icon
|
60 |
| - class="sidebar-icon" |
| 70 | + class="documentation-sidebar-icon" |
| 71 | + [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}" |
| 72 | + >keyboard_arrow_down |
| 73 | + </mat-icon> |
| 74 | + </div> |
| 75 | + |
| 76 | + <div *ngIf="node.name === 'Components'" class="documentation-sidebar-node-wrapper" matTreeNodeToggle> |
| 77 | + <div class="documentation-sidebar-item-title"> |
| 78 | + <mat-icon class="documentation-sidebar-icon">filter_none</mat-icon> |
| 79 | + <p class="documentation-sidebar-text">{{node.name}}</p> |
| 80 | + </div> |
| 81 | + |
| 82 | + <mat-icon |
| 83 | + class="documentation-sidebar-icon" |
61 | 84 | [ngClass]="{rotateUp: treeControl.isExpanded(node), rotateDown: !treeControl.isExpanded(node)}"
|
62 | 85 | >keyboard_arrow_down
|
63 | 86 | </mat-icon>
|
64 | 87 | </div>
|
65 | 88 | </mat-tree-node>
|
66 | 89 | </mat-tree>
|
67 | 90 |
|
68 |
| - <mat-list-item class="sidebar-item-wrapper" routerLink="{{routes.LIBS}}" routerLinkActive="active"> |
69 |
| - <mat-icon class="sidebar-icon">local_library</mat-icon> <p class="sidebar-text">Libs</p> |
| 91 | + <mat-list-item class="documentation-sidebar-item-wrapper" routerLink="{{routes.STRUCTURE}}" routerLinkActive="active"> |
| 92 | + <mat-icon class="documentation-sidebar-icon">article</mat-icon> <p class="documentation-sidebar-text">Structure</p> |
70 | 93 | </mat-list-item>
|
| 94 | + |
| 95 | + <mat-list-item class="documentation-sidebar-item-wrapper" routerLink="{{routes.LIBS}}" routerLinkActive="active"> |
| 96 | + <mat-icon class="documentation-sidebar-icon">local_library</mat-icon> <p class="documentation-sidebar-text">Libs</p> |
| 97 | + </mat-list-item> |
| 98 | + |
| 99 | + <a href="https://flatlogic.com/templates/angular"> |
| 100 | + <mat-list-item class="documentation-sidebar-item-wrapper"> |
| 101 | + <mat-icon class="documentation-sidebar-icon">shopping_cart</mat-icon> <p class="documentation-sidebar-text">Purchase</p> |
| 102 | + </mat-list-item> |
| 103 | + </a> |
71 | 104 | </mat-list>
|
72 | 105 | </mat-sidenav>
|
73 | 106 |
|
|
0 commit comments