Skip to content

Commit 2370b48

Browse files
desig9steindesig9stein
committed
fix(navigation-drawer): change the div to nav
1 parent 22c1f57 commit 2370b48

File tree

2 files changed

+37
-41
lines changed

2 files changed

+37
-41
lines changed

‎projects/igniteui-angular/src/lib/navigation-drawer/navigation-drawer.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
[class.igx-nav-drawer--disable-animation]="disableAnimation"
1515
(click)="close()" #overlay>
1616
</div>
17-
<div
17+
<nav
1818
class="igx-nav-drawer__aside"
1919
[class.igx-nav-drawer__aside--collapsed]="!miniTemplate && !isOpen"
2020
[class.igx-nav-drawer__aside--mini]="miniTemplate && !isOpen"
@@ -24,5 +24,5 @@
2424
[class.igx-nav-drawer--disable-animation]="disableAnimation">
2525

2626
<ng-container *ngTemplateOutlet="template || defaultItemsTemplate"></ng-container>
27-
</div>
27+
</nav>
2828
<div class="igx-nav-drawer__style-dummy" #dummy></div>

‎src/app/app.component.html‎

Lines changed: 35 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,58 +5,54 @@
55
[(pin)]="drawerState.pin" [position]="drawerState.position">
66

77
<ng-template igxDrawer>
8-
<nav>
9-
<div class="nav-header"></div>
8+
<div class="nav-header"></div>
109

11-
<!-- Components -->
12-
<span igxDrawerItem [isHeader]="true">Components</span>
10+
<!-- Components -->
11+
<span igxDrawerItem [isHeader]="true">Components</span>
1312

14-
<span *ngFor="let item of componentLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
15-
<igx-icon>{{item.icon}}</igx-icon>
16-
<span class="navdrawer-ellipsis">{{item.name}}</span>
17-
</span>
13+
<span *ngFor="let item of componentLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
14+
<igx-icon>{{item.icon}}</igx-icon>
15+
<span class="navdrawer-ellipsis">{{item.name}}</span>
16+
</span>
1817

19-
<span igxDrawerItem [disabled]="true">
20-
<igx-icon>web</igx-icon>
21-
<span class="navdrawer-ellipsis">Disabled Item</span>
22-
</span>
18+
<span igxDrawerItem [disabled]="true">
19+
<igx-icon>web</igx-icon>
20+
<span class="navdrawer-ellipsis">Disabled Item</span>
21+
</span>
2322

24-
<!--Directives-->
25-
<span igxDrawerItem [isHeader]="true">Directives</span>
23+
<!--Directives-->
24+
<span igxDrawerItem [isHeader]="true">Directives</span>
2625

27-
<span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
28-
<igx-icon>{{item.icon}}</igx-icon>
29-
<span class="navdrawer-ellipsis">{{item.name}}</span>
30-
</span>
26+
<span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
27+
<igx-icon>{{item.icon}}</igx-icon>
28+
<span class="navdrawer-ellipsis">{{item.name}}</span>
29+
</span>
3130

32-
<!--Style guide-->
33-
<span igxDrawerItem [isHeader]="true">Style</span>
31+
<!--Style guide-->
32+
<span igxDrawerItem [isHeader]="true">Style</span>
3433

35-
<span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
36-
<igx-icon>{{item.icon}}</igx-icon>
37-
<span class="navdrawer-ellipsis">{{item.name}}</span>
38-
</span>
39-
</nav>
34+
<span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" routerLink="{{item.link}}">
35+
<igx-icon>{{item.icon}}</igx-icon>
36+
<span class="navdrawer-ellipsis">{{item.name}}</span>
37+
</span>
4038
</ng-template>
4139

4240
<ng-template *ngIf="drawerState.miniVariant" igxDrawerMini>
43-
<nav>
44-
<span *ngFor="let item of componentLinks" igxRipple igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
45-
<igx-icon>{{item.icon}}</igx-icon>
46-
</span>
41+
<span *ngFor="let item of componentLinks" igxRipple igxDrawerItem routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
42+
<igx-icon>{{item.icon}}</igx-icon>
43+
</span>
4744

48-
<span igxDrawerItem [disabled]="true">
49-
<igx-icon>web</igx-icon>
50-
</span>
45+
<span igxDrawerItem [disabled]="true">
46+
<igx-icon>web</igx-icon>
47+
</span>
5148

52-
<span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
53-
<igx-icon>{{item.icon}}</igx-icon>
54-
</span>
49+
<span *ngFor="let item of directiveLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
50+
<igx-icon>{{item.icon}}</igx-icon>
51+
</span>
5552

56-
<span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
57-
<igx-icon>{{item.icon}}</igx-icon>
58-
</span>
59-
</nav>
53+
<span *ngFor="let item of styleLinks" igxDrawerItem igxRipple routerLinkActive #rla="routerLinkActive" [active]="rla.isActive" routerLink="{{item.link}}">
54+
<igx-icon>{{item.icon}}</igx-icon>
55+
</span>
6056
</ng-template>
6157
</igx-nav-drawer>
6258

0 commit comments

Comments
 (0)