Merge pull request #5989 from IgniteUI/mpopov/update-navdrawer-docs

docs(navigation-drawer): remove nav tag since it is added from the component itself

Author: kdinev

en/components/navdrawer.md

@@ -70,7 +70,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
     <div class="content-wrap">
       <igx-nav-drawer [isOpen]="true">
         <ng-template igxDrawer>
-          <nav>
             <span igxDrawerItem [isHeader]="true">Components</span>
             <span
               *ngFor="let item of navItems"
@@ -82,7 +81,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
               <igx-icon fontSet="material">{{ item.name }}</igx-icon>
               <span>{{ item.text }}</span>
             </span>
-          </nav>
         </ng-template>
       </igx-nav-drawer>
       <main>
@@ -126,13 +124,11 @@ The [`igxRipple`](ripple.md) directive completes the look and feel:
 <div class="content-wrap">
   <igx-nav-drawer id="navigation" #drawer [isOpen]="true">
     <ng-template igxDrawer>
-      <nav>
         <span igxDrawerItem [isHeader]="true">Components</span>
         <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
           <igx-icon fontSet="material">{{ item.name }}</igx-icon>
           <span>{{ item.text }}</span>
         </span>
-      </nav>
     </ng-template>
   </igx-nav-drawer>
   <main>

jp/components/navdrawer.md

@@ -71,7 +71,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
     <div class="content-wrap">
       <igx-nav-drawer [isOpen]="true">
         <ng-template igxDrawer>
-          <nav>
             <span igxDrawerItem [isHeader]="true">Components</span>
             <span
               *ngFor="let item of navItems"
@@ -83,7 +82,6 @@ import { IgxIconComponent } from 'igniteui-angular/icon';
               <igx-icon fontSet="material">{{ item.name }}</igx-icon>
               <span>{{ item.text }}</span>
             </span>
-          </nav>
         </ng-template>
       </igx-nav-drawer>
       <main>
@@ -127,13 +125,11 @@ Drawer のコンテンツを `igxDrawer` ディレクティブでデコレート
 <div class="content-wrap">
   <igx-nav-drawer id="navigation" #drawer [isOpen]="true">
     <ng-template igxDrawer>
-      <nav>
         <span igxDrawerItem [isHeader]="true">Components</span>
         <span *ngFor="let item of navItems" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
           <igx-icon fontSet="material">{{ item.name }}</igx-icon>
           <span>{{ item.text }}</span>
         </span>
-      </nav>
     </ng-template>
   </igx-nav-drawer>
   <main>
@@ -349,7 +345,6 @@ export class AppComponent {
 
 <!-- ... -->
 <ng-template igxDrawer>
-  <nav>
     <span igxDrawerItem [isHeader]="true">Components</span>
 
     <span
@@ -362,7 +357,6 @@ export class AppComponent {
       [active]="rla.isActive">
        {{item.name}}
     </span>
-  </nav>
 </ng-template>
 <!-- ... -->
 ```
@@ -508,4 +502,4 @@ $custom-theme: navdrawer-theme(
 ## API とスタイル リファレンス
 
 - [IgxNavigationDrawerComponent API]({environment:angularApiUrl}/classes/igxnavigationdrawercomponent.html)
-- [IgxNavigationDrawerComponent スタイル]({environment:sassApiUrl}/themes#function-navdrawer-theme)
+- [IgxNavigationDrawerComponent スタイル]({environment:sassApiUrl}/themes#function-navdrawer-theme)

kr/components/navdrawer.md

@@ -51,15 +51,13 @@ While any content can be provided in the template, the [`igxDrawerItem`]({enviro
 <div class="content-wrap">
   <igx-nav-drawer id="navigation" #drawer [isOpen]="true">
     <ng-template igxDrawer>
-      <nav>
         <span igxDrawerItem [isHeader]="true"> Email Account </span>
         <span igxDrawerItem igxRipple> Inbox </span>
         <span igxDrawerItem igxRipple [active]="true"> Drafts </span>
         <span igxDrawerItem igxRipple> Sent </span>
         <span igxDrawerItem [isHeader]="true"> Folders </span>
         <span igxDrawerItem igxRipple> Deleted </span>
         <span igxDrawerItem igxRipple> Archive </span>
-      </nav>
     </ng-template>
   </igx-nav-drawer>
   <main>
@@ -237,27 +235,23 @@ One way to tie in the active state is to directly use the [`routerLinkActive`](h
 ```html
 <!-- ... -->
 <ng-template igxDrawer>
-    <nav>
-        <span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
-            igxDrawerItem igxRipple 
-            routerLinkActive="igx-nav-drawer__item--active" >
-                {{item.name}}
-        </span>
-    </nav>
+    <span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
+        igxDrawerItem igxRipple 
+        routerLinkActive="igx-nav-drawer__item--active" >
+            {{item.name}}
+    </span>
 </ng-template>
 <!-- ... -->
 ```
 This approach, of course, does not affect the actual directive active state and could be affected by styling changes. An alternative would be the more advanced use of `routerLinkActive` where it's assigned to a template variable and the `isActive` can be used for binding:
 ```html
 <!-- ... -->
 <ng-template igxDrawer>
-    <nav>
-        <span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
-            routerLinkActive #rla="routerLinkActive"
-            igxDrawerItem igxRipple [active]="rla.isActive">
-                {{item.name}}
-        </span>
-    </nav>
+    <span *ngFor="let item of componentLinks" routerLink="{{item.link}}"
+        routerLinkActive #rla="routerLinkActive"
+        igxDrawerItem igxRipple [active]="rla.isActive">
+            {{item.name}}
+    </span>
 </ng-template>
 <!-- ... -->
 ```