refactor(navigation-drawer): remove nav tag since it is added from th…

…e component itself
IgniteUI · Nov 4, 2024 · 714ba82 · 714ba82
1 parent e3f4262
commit 714ba82
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 84 deletions.
diff --git a/projects/app-lob/src/app/index/index.component.html b/projects/app-lob/src/app/index/index.component.html
@@ -2,47 +2,45 @@
     <igx-nav-drawer #navdrawer [enableGestures]="drawerState.enableGestures" [isOpen]="drawerState.open" [(pin)]="drawerState.pin"
         [position]="drawerState.position" [width]="drawerState.width" (opened)="refresh()" (closed)="refresh()">
         <ng-template igxDrawer>
-            <nav>
-                <div class="nav-header">
-                    <img class="logo" src="assets/images/rsrcs/igniteui-angular_logo.svg" alt="Ignite UI for Angular Logo">
-                </div>
+            <div class="nav-header">
+                <img class="logo" src="assets/images/rsrcs/igniteui-angular_logo.svg" alt="Ignite UI for Angular Logo">
+            </div>
 
-                <!-- Home -->
-                <span igxDrawerItem igxRipple routerLink="{{homeRouteItem.path}}" routerLinkActive="igx-nav-drawer__item--active">
-                    <button igxIconButton="flat" igxRipple [igxRippleCentered]="true">
-                        <igx-icon family="material">home</igx-icon>
-                    </button>
-                    {{homeRouteItem.displayName}}
-                </span>
+            <!-- Home -->
+            <span igxDrawerItem igxRipple routerLink="{{homeRouteItem.path}}" routerLinkActive="igx-nav-drawer__item--active">
+                <button igxIconButton="flat" igxRipple [igxRippleCentered]="true">
+                    <igx-icon family="material">home</igx-icon>
+                </button>
+                {{homeRouteItem.displayName}}
+            </span>
 
-                <!-- Search -->
-                <igx-input-group type="search" class="searchGroup">
-                    <igx-prefix>
-                        <igx-icon>search</igx-icon>
-                    </igx-prefix>
-                    <input #search igxInput placeholder="Search samples" [(ngModel)]="searchValue" (ngModelChange)="searchValueChanged()">
-                    <igx-suffix *ngIf="search.value.length > 0" (click)="clearSearchValue()">
-                        <igx-icon>clear</igx-icon>
-                    </igx-suffix>
-                </igx-input-group>
+            <!-- Search -->
+            <igx-input-group type="search" class="searchGroup">
+                <igx-prefix>
+                    <igx-icon>search</igx-icon>
+                </igx-prefix>
+                <input #search igxInput placeholder="Search samples" [(ngModel)]="searchValue" (ngModelChange)="searchValueChanged()">
+                <igx-suffix *ngIf="search.value.length > 0" (click)="clearSearchValue()">
+                    <igx-icon>clear</igx-icon>
+                </igx-suffix>
+            </igx-input-group>
 
-                <span *ngFor="let navItem of currentNavItems">
-                    <!-- Header -->
-                    <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" (click)="toggleParent('header' + navItem.name)">
-                        <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" style="vertical-align: middle">
-                            <igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
-                        </button>
-                        <span style="vertical-align: middle">{{navItem.name}}</span>
-                    </span>
-                    <!-- Children -->
-                    <span [id]="'header' + navItem.name" style="display:none">
-                        <span [id]="'child' + routeItem.displayName" class="innerItem" *ngFor="let routeItem of navItem.children" igxDrawerItem igxRipple
-                            routerLink="{{routeItem.path}}" routerLinkActive="igx-nav-drawer__item--active">
-                            {{routeItem.displayName}}
-                        </span>
+            <span *ngFor="let navItem of currentNavItems">
+                <!-- Header -->
+                <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" (click)="toggleParent('header' + navItem.name)">
+                    <button igxIconButton="flat" igxRipple [igxRippleCentered]="true" style="vertical-align: middle">
+                        <igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
+                    </button>
+                    <span style="vertical-align: middle">{{navItem.name}}</span>
+                </span>
+                <!-- Children -->
+                <span [id]="'header' + navItem.name" style="display:none">
+                    <span [id]="'child' + routeItem.displayName" class="innerItem" *ngFor="let routeItem of navItem.children" igxDrawerItem igxRipple
+                        routerLink="{{routeItem.path}}" routerLinkActive="igx-nav-drawer__item--active">
+                        {{routeItem.displayName}}
                     </span>
                 </span>
-            </nav>
+            </span>
         </ng-template>
     </igx-nav-drawer>
 

diff --git a/src/app/index/index.component.html b/src/app/index/index.component.html
@@ -2,52 +2,50 @@
     <igx-nav-drawer #navdrawer [enableGestures]="drawerState.enableGestures" [isOpen]="drawerState.open" [(pin)]="drawerState.pin"
         [position]="drawerState.position" [width]="drawerState.width" (opened)="refresh()" (closed)="refresh()">
         <ng-template igxDrawer>
-            <nav>
-                <div class="nav-header">
-                    <img class="logo" src="assets/images/rsrcs/igniteui-angular_logo.svg" alt="Ignite UI for Angular Logo">
-                </div>
+            <div class="nav-header">
+                <img class="logo" src="assets/images/rsrcs/igniteui-angular_logo.svg" alt="Ignite UI for Angular Logo">
+            </div>
 
-                <!-- Home -->
-                <span igxDrawerItem igxRipple [routerLink]="homeRouteItem.path" routerLinkActive="igx-nav-drawer__item--active">
-                    <igx-icon family="material">home</igx-icon>
-                    <span>{{homeRouteItem.displayName}}</span>
-                </span>
+            <!-- Home -->
+            <span igxDrawerItem igxRipple [routerLink]="homeRouteItem.path" routerLinkActive="igx-nav-drawer__item--active">
+                <igx-icon family="material">home</igx-icon>
+                <span>{{homeRouteItem.displayName}}</span>
+            </span>
 
-                <!-- Search -->
-                <igx-input-group type="search" class="searchGroup">
-                    <igx-prefix>
-                        <igx-icon>search</igx-icon>
-                    </igx-prefix>
-                    <input #search igxInput placeholder="Search samples" (focus)="createSearchSub(search)" [(ngModel)]="searchValue">
-                    <igx-suffix *ngIf="search.value.length > 0" (click)="clearSearchValue()">
-                        <igx-icon>clear</igx-icon>
-                    </igx-suffix>
-                </igx-input-group>
+            <!-- Search -->
+            <igx-input-group type="search" class="searchGroup">
+                <igx-prefix>
+                    <igx-icon>search</igx-icon>
+                </igx-prefix>
+                <input #search igxInput placeholder="Search samples" (focus)="createSearchSub(search)" [(ngModel)]="searchValue">
+                <igx-suffix *ngIf="search.value.length > 0" (click)="clearSearchValue()">
+                    <igx-icon>clear</igx-icon>
+                </igx-suffix>
+            </igx-input-group>
 
-                <igx-tree #tree>
-                    <igx-tree-node [data]="item.name" *ngFor="let item of currentNavItems">
-                        {{ item.name }}
-                        <igx-tree-node [data]="route.displayName" *ngFor="let route of item.children">
-                            <a igxTreeNodeLink [routerLink]="route.path">{{ route.displayName }}</a>
-                        </igx-tree-node>
+            <igx-tree #tree>
+                <igx-tree-node [data]="item.name" *ngFor="let item of currentNavItems">
+                    {{ item.name }}
+                    <igx-tree-node [data]="route.displayName" *ngFor="let route of item.children">
+                        <a igxTreeNodeLink [routerLink]="route.path">{{ route.displayName }}</a>
                     </igx-tree-node>
-                </igx-tree>
+                </igx-tree-node>
+            </igx-tree>
 
-                <!-- <span *ngFor="let navItem of currentNavItems">
+            <!-- <span *ngFor="let navItem of currentNavItems">
 
-                    <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active navdrawer-ellipsis" (click)="toggleParent('header' + navItem.name)">
-                        <igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
-                        <span class="navdrawer-ellipsis" style="vertical-align: middle">{{navItem.name}}</span>
-                    </span>
+                <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active navdrawer-ellipsis" (click)="toggleParent('header' + navItem.name)">
+                    <igx-icon family="material">{{convertNodeStateToIcon('header' + navItem.name)}}</igx-icon>
+                    <span class="navdrawer-ellipsis" style="vertical-align: middle">{{navItem.name}}</span>
+                </span>
 
-                    <span [id]="'header' + navItem.name" style="display:none">
-                        <span [id]="'child' + routeItem.displayName" class="innerItem navdrawer-ellipsis" *ngFor="let routeItem of navItem.children" igxDrawerItem igxRipple
-                            [routerLink]="routeItem.path" routerLinkActive="igx-nav-drawer__item--active">
-                            {{routeItem.displayName}}
-                        </span>
+                <span [id]="'header' + navItem.name" style="display:none">
+                    <span [id]="'child' + routeItem.displayName" class="innerItem navdrawer-ellipsis" *ngFor="let routeItem of navItem.children" igxDrawerItem igxRipple
+                        [routerLink]="routeItem.path" routerLinkActive="igx-nav-drawer__item--active">
+                        {{routeItem.displayName}}
                     </span>
-                </span> -->
-            </nav>
+                </span>
+            </span> -->
         </ng-template>
     </igx-nav-drawer>
 

diff --git a/src/app/menus/navdrawer/nav-drawer-pin/nav-drawer-pin.component.html b/src/app/menus/navdrawer/nav-drawer-pin/nav-drawer-pin.component.html
@@ -1,14 +1,11 @@
 <div class="content-wrap" igxLayout>
     <igx-nav-drawer id="navigation" #drawer [isOpen]="true" [pin]="true" [pinThreshold]="0">
       <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 family="material">{{ item.name }}</igx-icon>
             <span>{{ item.text }}</span>
           </span>
-        </nav>
       </ng-template>
     </igx-nav-drawer>
 
@@ -20,4 +17,4 @@
 
       <h5>{{selected}} content.</h5>
     </main>
-  </div>
+</div>
diff --git a/src/app/menus/navdrawer/nav-drawer-routing/nav-drawer-routing.component.html b/src/app/menus/navdrawer/nav-drawer-routing/nav-drawer-routing.component.html
@@ -1,9 +1,7 @@
 <div class="content-wrap">
     <igx-nav-drawer id="navigation" #drawer [isOpen]="true">
       <ng-template igxDrawer>
-        <nav>
           <span igxDrawerItem [isHeader]="true">Components</span>
-
           <span
               igxDrawerItem
               igxRipple
@@ -14,7 +12,6 @@
           >
           {{item.name}}
           </span>
-        </nav>
       </ng-template>
     </igx-nav-drawer>
 
@@ -23,4 +20,4 @@
             <igx-icon family="material">menu</igx-icon>
         </span>
     </main>
-  </div>
+</div>
diff --git a/src/app/menus/navdrawer/nav-drawer-simple/nav-drawer-simple.component.html b/src/app/menus/navdrawer/nav-drawer-simple/nav-drawer-simple.component.html
@@ -1,14 +1,12 @@
 <div class="content-wrap">
   <igx-nav-drawer id="navigation" #drawer [isOpen]="true" [pinThreshold]="5000">
     <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 family="material">{{ item.name }}</igx-icon>
           <span>{{ item.text }}</span>
         </span>
-      </nav>
     </ng-template>
   </igx-nav-drawer>