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

…mponent itself
IgniteUI · Nov 4, 2024 · 14eb267 · 14eb267
1 parent bdc9b91
commit 14eb267
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 50 deletions.
diff --git a/en/components/navdrawer.md b/en/components/navdrawer.md
@@ -69,13 +69,11 @@ import { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent
     <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" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
-                        <igx-icon fontSet="material">{{ item.name }}</igx-icon>
-                        <span>{{ item.text }}</span>
-                    </span>
-                </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>
             </ng-template>
         </igx-nav-drawer>
         <main>
@@ -117,14 +115,12 @@ 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>
@@ -334,15 +330,13 @@ export class AppComponent {
 
 <!-- ... -->
 <ng-template igxDrawer>
-    <nav>
-        <span igxDrawerItem [isHeader]="true">Components</span>
+    <span igxDrawerItem [isHeader]="true">Components</span>
 
-        <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>
 <!-- ... -->
 ```

diff --git a/jp/components/navdrawer.md b/jp/components/navdrawer.md
@@ -69,13 +69,11 @@ import { IGX_NAVIGATION_DRAWER_DIRECTIVES, IgxRippleDirective, IgxIconComponent
     <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" igxDrawerItem [active]="item.text === selected" igxRipple (click)="navigate(item)">
-                        <igx-icon fontSet="material">{{ item.name }}</igx-icon>
-                        <span>{{ item.text }}</span>
-                    </span>
-                </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>
             </ng-template>
         </igx-nav-drawer>
         <main>
@@ -117,14 +115,12 @@ 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>
@@ -333,15 +329,13 @@ export class AppComponent {
 
 <!-- ... -->
 <ng-template igxDrawer>
-    <nav>
-        <span igxDrawerItem [isHeader]="true">Components</span>
+    <span igxDrawerItem [isHeader]="true">Components</span>
 
-        <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>
 <!-- ... -->
 ```

diff --git a/kr/components/navdrawer.md b/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>
 <!-- ... -->
 ```