From d925a89eb9d0cdcf87dedc7a118f86bd95622f0e Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Fri, 11 Mar 2022 20:22:44 +0530
Subject: [PATCH 01/16] made changes in side navigation revamp

---
 assets/scss/shared-ui/_sidenav.scss | 26 +++++++++++++++++++++++---
 page-sidenav.html                   | 28 ++++++++++++++++++++++++----
 2 files changed, 47 insertions(+), 7 deletions(-)

diff --git a/assets/scss/shared-ui/_sidenav.scss b/assets/scss/shared-ui/_sidenav.scss
index 810ea952..61fb9454 100644
--- a/assets/scss/shared-ui/_sidenav.scss
+++ b/assets/scss/shared-ui/_sidenav.scss
@@ -29,7 +29,8 @@
 						background-color: $sidenav-tab-active-bg-color;
 						border-radius: 20px;
 
-						a {
+						a, 
+						button {
 							color: $sidenav-tab-active-color;
 						}
 					}
@@ -54,7 +55,8 @@
 					}
 				}
 
-				a {
+				a, 
+				button {
 					display: block;
 					color: $sidenav-tab-color;
 					font-weight: 500;
@@ -66,6 +68,23 @@
 					}
 				}
 
+				button {
+					font-size: 15px;
+					line-height: 1.5em;
+					text-align: left;
+					width: 100%;
+					cursor: pointer;
+					border: 0;
+					padding: 0;
+					background: 0 0;
+					outline: 0;
+
+					&:hover,
+					&:focus {
+						color: $sidenav-tab-color-hover;
+					}
+				}
+
 				&.sui-alt-design {
 
 					.sui-vertical-tab {
@@ -74,7 +93,8 @@
 						background-color: transparent;
 						line-height: auto;
 
-						a {
+						a, 
+						button {
 							padding: 5px 15px;
 							border-radius: 20px;
 							background-color: transparent;
diff --git a/page-sidenav.html b/page-sidenav.html
index 903e9b6b..d5440593 100644
--- a/page-sidenav.html
+++ b/page-sidenav.html
@@ -10,7 +10,7 @@
 	<div class="sui-row-with-sidenav">
 
 		<!-- Navigation -->
-		<div class="sui-sidenav" role="navigation">
+		<!-- <div class="sui-sidenav" role="navigation">
 
 			<ul class="sui-vertical-tabs sui-sidenav-hide-md">
 
@@ -50,10 +50,30 @@
 
 			</div>
 
+		</div> -->
+
+		<div class="sui-sidenav" role="navigation">
+			<ul class="sui-vertical-tabs sui-sidenav-hide-md">
+
+				<li class="sui-vertical-tab current">
+					<button data-tab="section-1" role="tab" aria-selected="true" aria-controls="section-content-1" tabindex="0" id="section-1">Section 1</button>
+				</li>
+
+				<li class="sui-vertical-tab">
+					<button data-tab="section-2" role="tab" aria-selected="false" aria-controls="section-content-2" tabindex="-1" id="section-2">Section 2</button>
+					<span class="sui-tag sui-tag-warning">4</span>
+				</li>
+
+				<li class="sui-vertical-tab">
+					<button data-tab="section-3" role="tab" aria-selected="false" aria-controls="section-content-3" tabindex="-1" id="section-3">Section 3</button>
+					<span class="sui-icon-check-tick" aria-hidden="true"></span>
+				</li>
+
+			</ul>
 		</div>
 
 		<!-- SECTION: 1 -->
-		<div class="sui-box" data-tab="section-1">
+		<div class="sui-box" data-tab="section-1" tabindex="0" id="section-1-content" aria-labelledby="section-1">
 
 			<div class="sui-box-header">
 				<h1 class="sui-box-title">Section 1</h1>
@@ -68,7 +88,7 @@ <h1 class="sui-box-title">Section 1</h1>
 		</div>
 
 		<!-- SECTION: 2 -->
-		<div class="sui-box" data-tab="section-2" style="display: none;">
+		<div class="sui-box" data-tab="section-2" style="display: none;" tabindex="0" id="section-2-content" aria-labelledby="section-2">
 
 			<div class="sui-box-header">
 				<h1 class="sui-box-title">Section 2</h1>
@@ -83,7 +103,7 @@ <h1 class="sui-box-title">Section 2</h1>
 		</div>
 
 		<!-- SECTION: 3 -->
-		<div class="sui-box" data-tab="section-3" style="display: none;">
+		<div class="sui-box" data-tab="section-3" style="display: none;" tabindex="0" role="tabpanel" id="section-2-content" aria-labelledby="section-3">
 
 			<div class="sui-box-header">
 				<h1 class="sui-box-title">Section 3</h1>

From c566755308a2460c093a39e98d3d567592e0f4d5 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Fri, 11 Mar 2022 20:26:21 +0530
Subject: [PATCH 02/16] made changes in side navigation revamp

---
 page-sidenav.html | 42 ------------------------------------------
 1 file changed, 42 deletions(-)

diff --git a/page-sidenav.html b/page-sidenav.html
index d5440593..0d871918 100644
--- a/page-sidenav.html
+++ b/page-sidenav.html
@@ -10,48 +10,6 @@
 	<div class="sui-row-with-sidenav">
 
 		<!-- Navigation -->
-		<!-- <div class="sui-sidenav" role="navigation">
-
-			<ul class="sui-vertical-tabs sui-sidenav-hide-md">
-
-				<li class="sui-vertical-tab current">
-					<a href="#" role="button" data-tab="section-1">Section 1</a>
-				</li>
-
-				<li class="sui-vertical-tab">
-					<a href="#" role="button" data-tab="section-2">Section 2</a>
-					<span class="sui-tag sui-tag-warning">4</span>
-				</li>
-
-				<li class="sui-vertical-tab">
-					<a href="#" role="button" data-tab="section-3">Section 3</a>
-					<span class="sui-icon-check-tick" aria-hidden="true"></span>
-				</li>
-
-			</ul>
-
-			<div class="sui-sidenav-settings">
-
-				<div class="sui-form-field sui-with-floating-input" style="top: 0;">
-					<input type="text" placeholder="Name your form" class="sui-form-control" value="" />
-				</div>
-
-				<div class="sui-form-field sui-sidenav-hide-lg">
-
-					<label class="sui-label">Navigate</label>
-
-					<select class="sui-select">
-						<option value="#section-1">Section 1</option>
-						<option value="#section-2">Section 2</option>
-						<option value="#section-3">Section 3</option>
-					</select>
-
-				</div>
-
-			</div>
-
-		</div> -->
-
 		<div class="sui-sidenav" role="navigation">
 			<ul class="sui-vertical-tabs sui-sidenav-hide-md">
 

From 17d7a2fb960d3d6e810baa5d6c77aed8b9328f63 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Fri, 11 Mar 2022 20:55:02 +0530
Subject: [PATCH 03/16] made changes in side navigation revamp

---
 page-sidenav.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/page-sidenav.html b/page-sidenav.html
index 0d871918..849d9be0 100644
--- a/page-sidenav.html
+++ b/page-sidenav.html
@@ -14,16 +14,16 @@
 			<ul class="sui-vertical-tabs sui-sidenav-hide-md">
 
 				<li class="sui-vertical-tab current">
-					<button data-tab="section-1" role="tab" aria-selected="true" aria-controls="section-content-1" tabindex="0" id="section-1">Section 1</button>
+					<button data-tab="section-1" aria-selected="true" aria-controls="section-content-1" id="section-1">Section 1</button>
 				</li>
 
 				<li class="sui-vertical-tab">
-					<button data-tab="section-2" role="tab" aria-selected="false" aria-controls="section-content-2" tabindex="-1" id="section-2">Section 2</button>
+					<button data-tab="section-2" aria-selected="false" aria-controls="section-content-2" id="section-2">Section 2</button>
 					<span class="sui-tag sui-tag-warning">4</span>
 				</li>
 
 				<li class="sui-vertical-tab">
-					<button data-tab="section-3" role="tab" aria-selected="false" aria-controls="section-content-3" tabindex="-1" id="section-3">Section 3</button>
+					<button data-tab="section-3" aria-selected="false" aria-controls="section-content-3" id="section-3">Section 3</button>
 					<span class="sui-icon-check-tick" aria-hidden="true"></span>
 				</li>
 
@@ -46,7 +46,7 @@ <h1 class="sui-box-title">Section 1</h1>
 		</div>
 
 		<!-- SECTION: 2 -->
-		<div class="sui-box" data-tab="section-2" style="display: none;" tabindex="0" id="section-2-content" aria-labelledby="section-2">
+		<div class="sui-box" data-tab="section-2" tabindex="0" id="section-2-content" aria-labelledby="section-2" style="display: none;">
 
 			<div class="sui-box-header">
 				<h1 class="sui-box-title">Section 2</h1>
@@ -61,7 +61,7 @@ <h1 class="sui-box-title">Section 2</h1>
 		</div>
 
 		<!-- SECTION: 3 -->
-		<div class="sui-box" data-tab="section-3" style="display: none;" tabindex="0" role="tabpanel" id="section-2-content" aria-labelledby="section-3">
+		<div class="sui-box" data-tab="section-3" tabindex="0" role="tabpanel" id="section-2-content" aria-labelledby="section-3" style="display: none;">
 
 			<div class="sui-box-header">
 				<h1 class="sui-box-title">Section 3</h1>

From 7417cb050a26aa4788992cb7152f05dcfd3cb691 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Fri, 11 Mar 2022 21:02:34 +0530
Subject: [PATCH 04/16] made changes in side navigation revamp

---
 assets/scss/shared-ui/_sidenav.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/scss/shared-ui/_sidenav.scss b/assets/scss/shared-ui/_sidenav.scss
index 61fb9454..a3c4e42e 100644
--- a/assets/scss/shared-ui/_sidenav.scss
+++ b/assets/scss/shared-ui/_sidenav.scss
@@ -69,6 +69,7 @@
 				}
 
 				button {
+					font-family: $font;
 					font-size: 15px;
 					line-height: 1.5em;
 					text-align: left;

From 47c645f55b2dc33caa8a83cca5ae4d41c7445160 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 15 Mar 2022 12:25:05 +0530
Subject: [PATCH 05/16] fix css of tags

---
 assets/scss/shared-ui/_sidenav.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/scss/shared-ui/_sidenav.scss b/assets/scss/shared-ui/_sidenav.scss
index a3c4e42e..fd37a707 100644
--- a/assets/scss/shared-ui/_sidenav.scss
+++ b/assets/scss/shared-ui/_sidenav.scss
@@ -41,8 +41,9 @@
 					}
 
 					.sui-tag {
-						top: 2px;
+						top: 50%;
 						right: 3px;
+						transform: translateY(-50%);
 					}
 
 					[class*="sui-icon-"] {

From ccfe10c16a71e8946540aa1ed832ac0681599444 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 15 Mar 2022 15:39:06 +0530
Subject: [PATCH 06/16] cleaning up

---
 page-sidenav.html | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/page-sidenav.html b/page-sidenav.html
index 849d9be0..0abc9188 100644
--- a/page-sidenav.html
+++ b/page-sidenav.html
@@ -28,6 +28,27 @@
 				</li>
 
 			</ul>
+
+			<div class="sui-sidenav-settings">
+
+				<div class="sui-form-field sui-with-floating-input" style="top: 0;">
+					<input type="text" placeholder="Name your form" class="sui-form-control" value="" />
+				</div>
+
+				<div class="sui-form-field sui-sidenav-hide-lg">
+
+					<label class="sui-label">Navigate</label>
+
+					<select class="sui-select">
+						<option value="#section-1">Section 1</option>
+						<option value="#section-2">Section 2</option>
+						<option value="#section-3">Section 3</option>
+					</select>
+
+				</div>
+
+			</div>
+
 		</div>
 
 		<!-- SECTION: 1 -->

From ccb1dcfa1acaea3550a1b89b7e46fe61184e9067 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Wed, 16 Mar 2022 11:00:19 +0530
Subject: [PATCH 07/16] changes in markup

---
 page-sidenav.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/page-sidenav.html b/page-sidenav.html
index 0abc9188..651f4f63 100644
--- a/page-sidenav.html
+++ b/page-sidenav.html
@@ -11,23 +11,23 @@
 
 		<!-- Navigation -->
 		<div class="sui-sidenav" role="navigation">
-			<ul class="sui-vertical-tabs sui-sidenav-hide-md">
+			<div class="sui-vertical-tabs sui-sidenav-hide-md">
 
-				<li class="sui-vertical-tab current">
+				<div class="sui-vertical-tab current">
 					<button data-tab="section-1" aria-selected="true" aria-controls="section-content-1" id="section-1">Section 1</button>
-				</li>
+				</div>
 
-				<li class="sui-vertical-tab">
+				<div class="sui-vertical-tab">
 					<button data-tab="section-2" aria-selected="false" aria-controls="section-content-2" id="section-2">Section 2</button>
 					<span class="sui-tag sui-tag-warning">4</span>
-				</li>
+				</div>
 
-				<li class="sui-vertical-tab">
+				<div class="sui-vertical-tab">
 					<button data-tab="section-3" aria-selected="false" aria-controls="section-content-3" id="section-3">Section 3</button>
 					<span class="sui-icon-check-tick" aria-hidden="true"></span>
-				</li>
+				</div>
 
-			</ul>
+			</div>
 
 			<div class="sui-sidenav-settings">
 

From abe82bd41f74813cfe317a741d2b58f67424d9cd Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Wed, 16 Mar 2022 16:38:38 +0530
Subject: [PATCH 08/16] updated html markup of side navigation

---
 assets/scss/shared-ui/_sidenav.scss |  7 +------
 page-sidenav.html                   | 32 +++++++++--------------------
 2 files changed, 11 insertions(+), 28 deletions(-)

diff --git a/assets/scss/shared-ui/_sidenav.scss b/assets/scss/shared-ui/_sidenav.scss
index fd37a707..daaf7549 100644
--- a/assets/scss/shared-ui/_sidenav.scss
+++ b/assets/scss/shared-ui/_sidenav.scss
@@ -28,11 +28,7 @@
 					&.current {
 						background-color: $sidenav-tab-active-bg-color;
 						border-radius: 20px;
-
-						a, 
-						button {
-							color: $sidenav-tab-active-color;
-						}
+						color: $sidenav-tab-active-color;
 					}
 
 					.sui-tag,
@@ -56,7 +52,6 @@
 					}
 				}
 
-				a, 
 				button {
 					display: block;
 					color: $sidenav-tab-color;
diff --git a/page-sidenav.html b/page-sidenav.html
index 651f4f63..8ae6b736 100644
--- a/page-sidenav.html
+++ b/page-sidenav.html
@@ -11,22 +11,10 @@
 
 		<!-- Navigation -->
 		<div class="sui-sidenav" role="navigation">
-			<div class="sui-vertical-tabs sui-sidenav-hide-md">
-
-				<div class="sui-vertical-tab current">
-					<button data-tab="section-1" aria-selected="true" aria-controls="section-content-1" id="section-1">Section 1</button>
-				</div>
-
-				<div class="sui-vertical-tab">
-					<button data-tab="section-2" aria-selected="false" aria-controls="section-content-2" id="section-2">Section 2</button>
-					<span class="sui-tag sui-tag-warning">4</span>
-				</div>
-
-				<div class="sui-vertical-tab">
-					<button data-tab="section-3" aria-selected="false" aria-controls="section-content-3" id="section-3">Section 3</button>
-					<span class="sui-icon-check-tick" aria-hidden="true"></span>
-				</div>
-
+			<div class="sui-vertical-tabs sui-sidenav-hide-md" role="tablist">
+				<button id="section-1" class="sui-vertical-tab current" role="tab" aria-selected="true" aria-controls="section-1-content">Section 1</button>
+				<button id="section-2" class="sui-vertical-tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="section-2-content">Section 2 <span class="sui-tag sui-tag-warning">4</span></button>
+				<button id="section-3" class="sui-vertical-tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="section-3-content">Section 3 <span class="sui-icon-check-tick" aria-hidden="true"></span></button>
 			</div>
 
 			<div class="sui-sidenav-settings">
@@ -40,9 +28,9 @@
 					<label class="sui-label">Navigate</label>
 
 					<select class="sui-select">
-						<option value="#section-1">Section 1</option>
-						<option value="#section-2">Section 2</option>
-						<option value="#section-3">Section 3</option>
+						<option value="section-1">Section 1</option>
+						<option value="section-2">Section 2</option>
+						<option value="section-3">Section 3</option>
 					</select>
 
 				</div>
@@ -52,7 +40,7 @@
 		</div>
 
 		<!-- SECTION: 1 -->
-		<div class="sui-box" data-tab="section-1" tabindex="0" id="section-1-content" aria-labelledby="section-1">
+		<div id="section-1-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-1">
 
 			<div class="sui-box-header">
 				<h1 class="sui-box-title">Section 1</h1>
@@ -67,7 +55,7 @@ <h1 class="sui-box-title">Section 1</h1>
 		</div>
 
 		<!-- SECTION: 2 -->
-		<div class="sui-box" data-tab="section-2" tabindex="0" id="section-2-content" aria-labelledby="section-2" style="display: none;">
+		<div id="section-2-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-2" style="display: none;" hidden>
 
 			<div class="sui-box-header">
 				<h1 class="sui-box-title">Section 2</h1>
@@ -82,7 +70,7 @@ <h1 class="sui-box-title">Section 2</h1>
 		</div>
 
 		<!-- SECTION: 3 -->
-		<div class="sui-box" data-tab="section-3" tabindex="0" role="tabpanel" id="section-2-content" aria-labelledby="section-3" style="display: none;">
+		<div id="section-3-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-3" style="display: none;" hidden>
 
 			<div class="sui-box-header">
 				<h1 class="sui-box-title">Section 3</h1>

From 85d991beea3140c2087faba8d5aa678f3168592c Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Wed, 16 Mar 2022 17:59:58 +0530
Subject: [PATCH 09/16] made changes in markup

---
 assets/scss/shared-ui/_sidenav.scss |  7 ++++++-
 page-sidenav.html                   | 12 ++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/assets/scss/shared-ui/_sidenav.scss b/assets/scss/shared-ui/_sidenav.scss
index daaf7549..62023260 100644
--- a/assets/scss/shared-ui/_sidenav.scss
+++ b/assets/scss/shared-ui/_sidenav.scss
@@ -29,6 +29,10 @@
 						background-color: $sidenav-tab-active-bg-color;
 						border-radius: 20px;
 						color: $sidenav-tab-active-color;
+
+						a {
+							color: $sidenav-tab-active-color;
+						}
 					}
 
 					.sui-tag,
@@ -52,7 +56,8 @@
 					}
 				}
 
-				button {
+				button,
+				a {
 					display: block;
 					color: $sidenav-tab-color;
 					font-weight: 500;
diff --git a/page-sidenav.html b/page-sidenav.html
index 8ae6b736..af95da8d 100644
--- a/page-sidenav.html
+++ b/page-sidenav.html
@@ -40,13 +40,13 @@
 		</div>
 
 		<!-- SECTION: 1 -->
-		<div id="section-1-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-1">
+		<div id="section-1-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-1" aria-describedby="section-1-description">
 
 			<div class="sui-box-header">
 				<h1 class="sui-box-title">Section 1</h1>
 			</div>
 
-			<div class="sui-box-body">
+			<div class="sui-box-body" id="section-1-description">
 
 				<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
 
@@ -55,13 +55,13 @@ <h1 class="sui-box-title">Section 1</h1>
 		</div>
 
 		<!-- SECTION: 2 -->
-		<div id="section-2-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-2" style="display: none;" hidden>
+		<div id="section-2-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-2" aria-describedby="section-2-description" style="display: none;" hidden>
 
 			<div class="sui-box-header">
 				<h1 class="sui-box-title">Section 2</h1>
 			</div>
 
-			<div class="sui-box-body">
+			<div class="sui-box-body" id="section-2-description">
 
 				<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
 
@@ -70,13 +70,13 @@ <h1 class="sui-box-title">Section 2</h1>
 		</div>
 
 		<!-- SECTION: 3 -->
-		<div id="section-3-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-3" style="display: none;" hidden>
+		<div id="section-3-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-3" aria-describedby="section-3-description" style="display: none;" hidden>
 
 			<div class="sui-box-header">
 				<h1 class="sui-box-title">Section 3</h1>
 			</div>
 
-			<div class="sui-box-body">
+			<div class="sui-box-body" id="section-3-description">
 
 				<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
 

From 0e954d258171bcb97ea2d8c6862b492e7795a641 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Wed, 16 Mar 2022 19:30:52 +0530
Subject: [PATCH 10/16] made changes in markup

---
 assets/scss/shared-ui/_sidenav.scss | 21 ++++++-----
 page-sidenav.html                   | 56 +++++++++++++++--------------
 2 files changed, 41 insertions(+), 36 deletions(-)

diff --git a/assets/scss/shared-ui/_sidenav.scss b/assets/scss/shared-ui/_sidenav.scss
index 62023260..53ed1576 100644
--- a/assets/scss/shared-ui/_sidenav.scss
+++ b/assets/scss/shared-ui/_sidenav.scss
@@ -25,14 +25,10 @@
 					line-height: 1.5em;
 					list-style: none;
 
-					&.current {
+					&.active {
 						background-color: $sidenav-tab-active-bg-color;
 						border-radius: 20px;
 						color: $sidenav-tab-active-color;
-
-						a {
-							color: $sidenav-tab-active-color;
-						}
 					}
 
 					.sui-tag,
@@ -56,8 +52,7 @@
 					}
 				}
 
-				button,
-				a {
+				button{
 					display: block;
 					color: $sidenav-tab-color;
 					font-weight: 500;
@@ -95,13 +90,12 @@
 						background-color: transparent;
 						line-height: auto;
 
-						a, 
 						button {
 							padding: 5px 15px;
 							border-radius: 20px;
 							background-color: transparent;
 
-							&.current {
+							&.active {
 								background-color: $sidenav-tab-active-bg-color;
 								color: $sidenav-tab-active-color;
 							}
@@ -186,6 +180,15 @@
 			}
 		}
 
+		// sui tab content css
+		[role="tabpanel"] {
+			display: none;
+			
+			&.active {
+				display: block;
+			}
+		}
+
 		.sui-sidenav-sticky {
 
 			@include media(min-width, lg) {
diff --git a/page-sidenav.html b/page-sidenav.html
index af95da8d..a47d1a1e 100644
--- a/page-sidenav.html
+++ b/page-sidenav.html
@@ -7,12 +7,12 @@
 
 <section>
 
-	<div class="sui-row-with-sidenav">
+	<div class="sui-row-with-sidenav sui-sidenav-wrapper">
 
 		<!-- Navigation -->
-		<div class="sui-sidenav" role="navigation">
+		<div class="sui-sidenav">
 			<div class="sui-vertical-tabs sui-sidenav-hide-md" role="tablist">
-				<button id="section-1" class="sui-vertical-tab current" role="tab" aria-selected="true" aria-controls="section-1-content">Section 1</button>
+				<button id="section-1" class="sui-vertical-tab active" role="tab" aria-selected="true" aria-controls="section-1-content">Section 1</button>
 				<button id="section-2" class="sui-vertical-tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="section-2-content">Section 2 <span class="sui-tag sui-tag-warning">4</span></button>
 				<button id="section-3" class="sui-vertical-tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="section-3-content">Section 3 <span class="sui-icon-check-tick" aria-hidden="true"></span></button>
 			</div>
@@ -39,49 +39,51 @@
 
 		</div>
 
-		<!-- SECTION: 1 -->
-		<div id="section-1-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-1" aria-describedby="section-1-description">
+		<div class="sui-tabs-content">
+			<!-- SECTION: 1 -->
+			<div id="section-1-content" class="sui-box active" role="tabpanel" tabindex="0" aria-labelledby="section-1" aria-describedby="section-1-description">
 
-			<div class="sui-box-header">
-				<h1 class="sui-box-title">Section 1</h1>
-			</div>
+				<div class="sui-box-header">
+					<h1 class="sui-box-title">Section 1</h1>
+				</div>
 
-			<div class="sui-box-body" id="section-1-description">
+				<div class="sui-box-body" id="section-1-description">
 
-				<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
+					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
+
+				</div>
 
 			</div>
 
-		</div>
+			<!-- SECTION: 2 -->
+			<div id="section-2-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-2" aria-describedby="section-2-description" hidden>
 
-		<!-- SECTION: 2 -->
-		<div id="section-2-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-2" aria-describedby="section-2-description" style="display: none;" hidden>
+				<div class="sui-box-header">
+					<h1 class="sui-box-title">Section 2</h1>
+				</div>
 
-			<div class="sui-box-header">
-				<h1 class="sui-box-title">Section 2</h1>
-			</div>
+				<div class="sui-box-body" id="section-2-description">
 
-			<div class="sui-box-body" id="section-2-description">
+					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
 
-				<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
+				</div>
 
 			</div>
 
-		</div>
+			<!-- SECTION: 3 -->
+			<div id="section-3-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-3" aria-describedby="section-3-description" hidden>
 
-		<!-- SECTION: 3 -->
-		<div id="section-3-content" class="sui-box" role="tabpanel" tabindex="0" aria-labelledby="section-3" aria-describedby="section-3-description" style="display: none;" hidden>
+				<div class="sui-box-header">
+					<h1 class="sui-box-title">Section 3</h1>
+				</div>
 
-			<div class="sui-box-header">
-				<h1 class="sui-box-title">Section 3</h1>
-			</div>
+				<div class="sui-box-body" id="section-3-description">
 
-			<div class="sui-box-body" id="section-3-description">
+					<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
 
-				<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
+				</div>
 
 			</div>
-
 		</div>
 
 	</div>

From 1a17dd27aeead48464a57e4b8faec73a425712a7 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Wed, 16 Mar 2022 19:51:09 +0530
Subject: [PATCH 11/16] made changes in css

---
 assets/scss/shared-ui/_sidenav.scss | 16 ++++------------
 page-sidenav.html                   |  2 +-
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/assets/scss/shared-ui/_sidenav.scss b/assets/scss/shared-ui/_sidenav.scss
index 53ed1576..0571b861 100644
--- a/assets/scss/shared-ui/_sidenav.scss
+++ b/assets/scss/shared-ui/_sidenav.scss
@@ -52,22 +52,11 @@
 					}
 				}
 
-				button{
-					display: block;
-					color: $sidenav-tab-color;
-					font-weight: 500;
-					transition: 0.3s ease;
-
-					&:hover,
-					&:focus {
-						color: $sidenav-tab-color-hover;
-					}
-				}
-
 				button {
 					font-family: $font;
 					font-size: 15px;
 					line-height: 1.5em;
+					font-weight: 500;
 					text-align: left;
 					width: 100%;
 					cursor: pointer;
@@ -75,6 +64,9 @@
 					padding: 0;
 					background: 0 0;
 					outline: 0;
+					display: block;
+					color: $sidenav-tab-color;
+					transition: 0.3s ease;
 
 					&:hover,
 					&:focus {
diff --git a/page-sidenav.html b/page-sidenav.html
index a47d1a1e..5b21f165 100644
--- a/page-sidenav.html
+++ b/page-sidenav.html
@@ -7,7 +7,7 @@
 
 <section>
 
-	<div class="sui-row-with-sidenav sui-sidenav-wrapper">
+	<div class="sui-row-with-sidenav">
 
 		<!-- Navigation -->
 		<div class="sui-sidenav">

From af808308290a4a95151cc038022af042feb38825 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 22 Mar 2022 13:29:00 +0530
Subject: [PATCH 12/16] cleaning up

---
 assets/scss/shared-ui/_sidenav.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/assets/scss/shared-ui/_sidenav.scss b/assets/scss/shared-ui/_sidenav.scss
index 0571b861..8aca19ee 100644
--- a/assets/scss/shared-ui/_sidenav.scss
+++ b/assets/scss/shared-ui/_sidenav.scss
@@ -37,9 +37,8 @@
 					}
 
 					.sui-tag {
-						top: 50%;
+						top: 2px;
 						right: 3px;
-						transform: translateY(-50%);
 					}
 
 					[class*="sui-icon-"] {

From afd8b8a8e99a36ebe7e603ee8598264003aed5f2 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 22 Mar 2022 15:38:06 +0530
Subject: [PATCH 13/16] made changes in documentation

---
 page-sidenav.html | 87 ++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 67 insertions(+), 20 deletions(-)

diff --git a/page-sidenav.html b/page-sidenav.html
index 5b21f165..1424f32d 100644
--- a/page-sidenav.html
+++ b/page-sidenav.html
@@ -10,7 +10,7 @@
 	<div class="sui-row-with-sidenav">
 
 		<!-- Navigation -->
-		<div class="sui-sidenav">
+		<div class="sui-sidenav" role="navigation">
 			<div class="sui-vertical-tabs sui-sidenav-hide-md" role="tablist">
 				<button id="section-1" class="sui-vertical-tab active" role="tab" aria-selected="true" aria-controls="section-1-content">Section 1</button>
 				<button id="section-2" class="sui-vertical-tab" role="tab" aria-selected="false" tabindex="-1" aria-controls="section-2-content">Section 2 <span class="sui-tag sui-tag-warning">4</span></button>
@@ -96,23 +96,43 @@ <h1 class="sui-box-title">Section 3</h1>
 	&lt;!-- Navigation --&gt;
 	&lt;div role=&quot;navigation&quot; class=&quot;sui-sidenav&quot;&gt;
 
-		&lt;ul class=&quot;sui-vertical-tabs sui-sidenav-hide-md&quot;&gt;
+		&lt;div class=&quot;sui-vertical-tabs sui-sidenav-hide-md&quot; role=&quot;tablist&quot;&gt;
+
+			&lt;button 
+				id=&quot;tab-1&quot; 
+				class=&quot;sui-vertical-tab active&quot; 
+				role=&quot;tab&quot; 
+				aria-selected=&quot;true&quot; 
+				aria-controls=&quot;tab-1-controls&quot;
+			&gt;
+					Section 1
+			&lt;/button&gt;
+			
+			&lt;button 
+				id=&quot;tab-2&quot; 
+				class=&quot;sui-vertical-tab&quot; 
+				role=&quot;tab&quot; 
+				aria-selected=&quot;false&quot; 
+				tabindex=&quot;-1&quot; 
+				aria-controls=&quot;tab-2-controls&quot;
+			&gt;
+					Section 2 
+					&lt;span class=&quot;sui-tag sui-tag-warning&quot;&gt;4&lt;/span&gt;
+			&lt;/button&gt;
+
+			&lt;button 
+				id=&quot;tab-3&quot; 
+				class=&quot;sui-vertical-tab&quot; 
+				role=&quot;tab&quot; 
+				aria-selected=&quot;false&quot; 
+				tabindex=&quot;-1&quot; 
+				aria-controls=&quot;tab-3-controls&quot;
+			&gt;
+					Section 3 
+					&lt;span class=&quot;sui-icon-check-tick&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
+			&lt;/button&gt;
 
-			&lt;li class=&quot;sui-vertical-tab current&quot;&gt;
-			&lt;a href=&quot;#&quot; role=&quot;button&quot;&gt;Tab 1&lt;/a&gt;
-			&lt;/li&gt;
-
-			&lt;li class=&quot;sui-vertical-tab&quot;&gt;
-			&lt;a href=&quot;#&quot; role=&quot;button&quot;&gt;Tab 2&lt;/a&gt;
-			&lt;span class=&quot;sui-tag sui-tag-warning&quot;&gt;4&lt;/span&gt;
-			&lt;/li&gt;
-
-			&lt;li class=&quot;sui-vertical-tab&quot;&gt;
-			&lt;a href=&quot;#&quot; role=&quot;button&quot;&gt;Tab 3&lt;/a&gt;
-			&lt;span class=&quot;sui-icon-check-tick&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
-			&lt;/li&gt;
-
-		&lt;/ul&gt;
+		&lt;/div&gt;
 
 		&lt;div class=&quot;sui-sidenav-hide-lg&quot;&gt;
 
@@ -127,13 +147,40 @@ <h1 class="sui-box-title">Section 3</h1>
 	&lt;/div&gt;
 
 	&lt;!-- SECTION: Tab 1 (Current) --&gt;
-	&lt;div class=&quot;sui-box&quot;&gt;...&lt;/div&gt;
+	&lt;div 
+		id=&quot;tab-1-controls&quot; 
+		class=&quot;sui-box active&quot; 
+		role=&quot;tabpanel&quot; 
+		tabindex=&quot;0&quot; 
+		aria-labelledby=&quot;section-1&quot; 
+		aria-describedby=&quot;section-1-description&quot;
+	&gt;
+		...
+	&lt;/div&gt;
 
 	&lt;!-- SECTION: Tab 2 --&gt;
-	&lt;div class=&quot;sui-box&quot; style=&quot;display: none;&quot;&gt;...&lt;/div&gt;
+	&lt;div 
+		id=&quot;tab-2-controls&quot; 
+		class=&quot;sui-box&quot; 
+		role=&quot;tabpanel&quot; 
+		tabindex=&quot;0&quot; 
+		aria-labelledby=&quot;section-2&quot; 
+		aria-describedby=&quot;section-2-description&quot;
+	&gt;
+		...
+	&lt;/div&gt;
 
 	&lt;!-- SECTION: Tab 3 --&gt;
-	&lt;div class=&quot;sui-box&quot; style=&quot;display: none;&quot;&gt;...&lt;/div&gt;
+	&lt;div 
+		id=&quot;tab-3-controls&quot; 
+		class=&quot;sui-box&quot; 
+		role=&quot;tabpanel&quot; 
+		tabindex=&quot;0&quot; 
+		aria-labelledby=&quot;section-3&quot; 
+		aria-describedby=&quot;section-3-description&quot;
+	&gt;
+		...
+	&lt;/div&gt;
 
 &lt;/section&gt;
 </pre>

From 235049ee9cbf6d123a99ac585ee30a1bb076f147 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 22 Mar 2022 17:30:59 +0530
Subject: [PATCH 14/16] updated markup

---
 page-sidenav.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/page-sidenav.html b/page-sidenav.html
index 1424f32d..6641b36e 100644
--- a/page-sidenav.html
+++ b/page-sidenav.html
@@ -152,8 +152,8 @@ <h1 class="sui-box-title">Section 3</h1>
 		class=&quot;sui-box active&quot; 
 		role=&quot;tabpanel&quot; 
 		tabindex=&quot;0&quot; 
-		aria-labelledby=&quot;section-1&quot; 
-		aria-describedby=&quot;section-1-description&quot;
+		aria-labelledby=&quot;tab-1&quot; 
+		aria-describedby=&quot;tab-1-description&quot;
 	&gt;
 		...
 	&lt;/div&gt;
@@ -164,8 +164,8 @@ <h1 class="sui-box-title">Section 3</h1>
 		class=&quot;sui-box&quot; 
 		role=&quot;tabpanel&quot; 
 		tabindex=&quot;0&quot; 
-		aria-labelledby=&quot;section-2&quot; 
-		aria-describedby=&quot;section-2-description&quot;
+		aria-labelledby=&quot;tab-2&quot; 
+		aria-describedby=&quot;tab-2-description&quot;
 	&gt;
 		...
 	&lt;/div&gt;
@@ -176,8 +176,8 @@ <h1 class="sui-box-title">Section 3</h1>
 		class=&quot;sui-box&quot; 
 		role=&quot;tabpanel&quot; 
 		tabindex=&quot;0&quot; 
-		aria-labelledby=&quot;section-3&quot; 
-		aria-describedby=&quot;section-3-description&quot;
+		aria-labelledby=&quot;tab-3&quot; 
+		aria-describedby=&quot;tab-3-description&quot;
 	&gt;
 		...
 	&lt;/div&gt;

From 09e417173cfeb3ba49833ba2a6f2d7fdf7e3d687 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 22 Mar 2022 17:37:15 +0530
Subject: [PATCH 15/16] removed unused aria attribute

---
 page-sidenav.html | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/page-sidenav.html b/page-sidenav.html
index 6641b36e..7e17d9b8 100644
--- a/page-sidenav.html
+++ b/page-sidenav.html
@@ -152,8 +152,7 @@ <h1 class="sui-box-title">Section 3</h1>
 		class=&quot;sui-box active&quot; 
 		role=&quot;tabpanel&quot; 
 		tabindex=&quot;0&quot; 
-		aria-labelledby=&quot;tab-1&quot; 
-		aria-describedby=&quot;tab-1-description&quot;
+		aria-labelledby=&quot;tab-1&quot;
 	&gt;
 		...
 	&lt;/div&gt;
@@ -164,8 +163,7 @@ <h1 class="sui-box-title">Section 3</h1>
 		class=&quot;sui-box&quot; 
 		role=&quot;tabpanel&quot; 
 		tabindex=&quot;0&quot; 
-		aria-labelledby=&quot;tab-2&quot; 
-		aria-describedby=&quot;tab-2-description&quot;
+		aria-labelledby=&quot;tab-2&quot;
 	&gt;
 		...
 	&lt;/div&gt;
@@ -177,7 +175,6 @@ <h1 class="sui-box-title">Section 3</h1>
 		role=&quot;tabpanel&quot; 
 		tabindex=&quot;0&quot; 
 		aria-labelledby=&quot;tab-3&quot; 
-		aria-describedby=&quot;tab-3-description&quot;
 	&gt;
 		...
 	&lt;/div&gt;

From ae00cb18924900eb1b13d111bd0808a6471f36c0 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pwnkumar201@gmail.com>
Date: Tue, 22 Mar 2022 19:08:52 +0530
Subject: [PATCH 16/16] updated documentation

---
 page-sidenav.html | 73 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 72 insertions(+), 1 deletion(-)

diff --git a/page-sidenav.html b/page-sidenav.html
index 7e17d9b8..4df6fd77 100644
--- a/page-sidenav.html
+++ b/page-sidenav.html
@@ -88,7 +88,23 @@ <h1 class="sui-box-title">Section 3</h1>
 
 	</div>
 
-	<div class="demo-code-block">
+	<div class="sui-box">
+
+		<div class="sui-box-header">
+			<h3 class="sui-box-title">Documentation</h3>
+		</div>
+
+		<div class="sui-box-body">
+
+			<div class="sui-box-settings-row">
+				
+				<div class="sui-box-settings-col-1">
+					<span class="sui-settings-label">Base Structure</span>
+				</div>
+
+				<div class="sui-box-settings-col-2">
+
+					<div class="demo-code-block">
 
 <pre class="sui-code-snippet html">
 &lt;section class=&quot;sui-row-with-sidenav&quot;&gt;
@@ -182,6 +198,61 @@ <h1 class="sui-box-title">Section 3</h1>
 &lt;/section&gt;
 </pre>
 
+					</div>
+
+				</div>
+
+			</div>
+			
+			<!-- ROW: Advanced Usage -->
+			<div class="sui-box-settings-row">
+
+				<div class="sui-box-settings-col-1">
+					<span class="sui-settings-label">Advanced Usage</span>
+				</div>
+
+				<div class="sui-box-settings-col-2">
+
+					<div class="demo-code-block">
+
+<pre class="sui-code-snippet js">
+SUI.tabs({
+	callback: function( tab, panel ) {
+		console.log( tab );
+		console.log( panel );
+	}
+});
+</pre>
+
+					</div>
+
+					<p><code>callback</code></p>
+
+					<p>It's an anonymous function that will run when you click a tab. You will have access to the clicked <code>tab</code> and the respective <code>panel (tab content)</code>.</p>
+
+					<p>To get all tabs within the group you can do this inside the anonymous function:</p>
+
+					<div class="demo-code-block">
+
+<pre class="sui-code-snippet js">
+var wrapper = tab.closest( '.sui-row-with-sidenav' ),
+tablist = tab.closest( '[role=&quot;tablist&quot;]' ),
+tabs    = tablist.find( '> .sui-tab-item' ),
+panels  = wrapper.find( '> .sui-tabs-content > [role=&quot;tabpanel&quot;]' )
+;
+
+console.log( tabs );
+console.log( panels );
+</pre>
+
+					</div>
+
+				</div>
+
+			</div>	
+			
+		</div>
+
 	</div>
 
 </section>
\ No newline at end of file