Merge pull request #2598 from Akshat55/navigation-fix

fix: Update css classes

Author: zvonimirfras

src/ui-shell/sidenav/sidenav-item.component.ts

@@ -19,7 +19,7 @@ import { Router } from "@angular/router";
 		<a
 			class="cds--side-nav__link"
 			[ngClass]="{
-				'cds--side-nav__link--current': active
+				'cds--side-nav__item--active': active
 			}"
 			[href]="href"
 			[attr.aria-current]="(active ? 'page' : null)"

src/ui-shell/sidenav/sidenav.component.ts

@@ -15,11 +15,10 @@ import { NavigationItem } from "../header/header-navigation-items.interface";
 @Component({
 	selector: "cds-sidenav, ibm-sidenav",
 	template: `
-		<nav class="cds--side-nav__navigation" [attr.aria-label]="ariaLabel">
+		<nav class="cds--side-nav__items" [attr.aria-label]="ariaLabel">
 			<ng-content select="cds-sidenav-header"></ng-content>
-			<div class="cds--side-nav__items" role="list">
-				<div
-					class="cds--side-nav__header-navigation cds--side-nav__header-divider">
+			<div role="list">
+				<div class="cds--side-nav__header-navigation cds--side-nav__header-divider">
 					<ng-container *ngFor="let navigationItem of navigationItems">
 						<cds-sidenav-item
 							*ngIf="navigationItem.type === 'item'"
@@ -82,7 +81,7 @@ import { NavigationItem } from "../header/header-navigation-items.interface";
 })
 export class SideNav {
 	@HostBinding("class.cds--side-nav") hostClass = true;
-	@HostBinding("attr.aria-label") @Input() ariaLabel = "Side navigation";
+	@Input() ariaLabel = "Side navigation";
 	/**
 	 * Controls the expanded (`true`) or collapsed (`false`) state when on a small screen.
 	 */
@@ -92,7 +91,7 @@ export class SideNav {
 	 */
 	@HostBinding("class.cds--side-nav--hidden") @Input() hidden = false;
 	@HostBinding("class.cds--side-nav--rail") @Input() rail = false;
-	@HostBinding("class.cds--side-nav--ux") ux = true;
+	@HostBinding("class.cds--side-nav__navigation") ux = true;
 	@Input() allowExpansion = false;
 
 	/**

src/ui-shell/ui-shell.stories.ts

@@ -227,8 +227,7 @@ const SideNavigationTemplate: Story = (args) => ({
 	template: `
 		<div [cdsTheme]="theme">
 			<cds-sidenav>
-				<cds-sidenav-item>
-					<svg cdsIcon="fade" size="16"></svg>
+				<cds-sidenav-item [active]="true">
 					Link
 				</cds-sidenav-item>
 				<cds-sidenav-item>