From 13ccf2eb872406afb591d2020770a375162f97b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maria=20G=C3=B3rska-Piszek?= <maria@madeincosmos.net>
Date: Wed, 11 Aug 2021 16:13:49 +0200
Subject: [PATCH 1/7] Rebase with feature branch.

---
 assets/css/admin.scss                         | 36 +++++++++++++++++++
 .../admin/views/html-admin-page-addons.php    | 15 ++++++--
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/assets/css/admin.scss b/assets/css/admin.scss
index 0b9e6dbf6c5..42117a510df 100644
--- a/assets/css/admin.scss
+++ b/assets/css/admin.scss
@@ -81,6 +81,42 @@
 		}
 	}
 
+	.top-bar {
+		background: #fff;
+		box-shadow: inset 0 -1px 0 #ccc;
+		display: block;
+		height: 60px;
+		margin: 0 0 24px;
+
+		ul {
+			display: flex;
+			justify-content: left;
+			margin: 0 auto;
+			max-width: 1056px;
+
+			li {
+				font-weight: 600;
+				font-size: 14px;
+				line-height: 20px;
+
+			}
+
+			a,
+			a:visited,
+			a:hover,
+			a:focus {
+				color: #1e1e1e;
+				display: inline-block;
+				text-decoration: none;
+				padding: 20px 16px;
+
+				&.current {
+					box-shadow: inset 0 -3px 0 #3171a6, inset 0 -1px 0 #ccc;
+				}
+			}
+		}
+	}
+
 	h1.search-form-title {
 		clear: left;
 		padding: 0;
diff --git a/includes/admin/views/html-admin-page-addons.php b/includes/admin/views/html-admin-page-addons.php
index f364a08c016..083de7f4795 100644
--- a/includes/admin/views/html-admin-page-addons.php
+++ b/includes/admin/views/html-admin-page-addons.php
@@ -33,7 +33,19 @@ if ( ! defined( 'ABSPATH' ) ) {
 			<input type="hidden" name="section" value="_all">
 		</form>
 	</div>
-
+	<div class="top-bar">
+			<ul>
+				<?php foreach ( $sections as $section ) : ?>
+					<li>
+						<a
+							class="<?php echo $current_section === $section->slug ? 'current' : ''; ?>"
+							href="<?php echo esc_url( admin_url( 'admin.php?page=wc-addons&section=' . esc_attr( $section->slug ) ) ); ?>">
+							<?php echo esc_html( $section->label ); ?>
+						</a>
+					</li>
+				<?php endforeach; ?>
+			</ul>
+		</div>
 	<div class="wrap">
 		<div class="marketplace-content-wrapper">
 			<?php if ( isset( $_GET['search'] ) ) : // phpcs:ignore WordPress.Security.NonceVerification.Recommended ?>
@@ -43,7 +55,6 @@ if ( ! defined( 'ABSPATH' ) ) {
 				</h1>
 			<?php endif; ?>
 
-
 			<?php if ( '_featured' === $current_section ) : ?>
 				<div class="addons-featured">
 					<?php

From 528ec4c2f3fcab45152b7b0bd85b26e6da2d33b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maria=20G=C3=B3rska-Piszek?= <maria@madeincosmos.net>
Date: Wed, 11 Aug 2021 16:22:43 +0200
Subject: [PATCH 2/7] Add mobile styles for top bar.

---
 assets/css/admin.scss | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/assets/css/admin.scss b/assets/css/admin.scss
index 42117a510df..a789fe00fb1 100644
--- a/assets/css/admin.scss
+++ b/assets/css/admin.scss
@@ -29,7 +29,6 @@
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
-		margin-bottom: 32px;
 		min-height: 216px;
 		padding: 24px;
 		width: 100%;
@@ -85,20 +84,34 @@
 		background: #fff;
 		box-shadow: inset 0 -1px 0 #ccc;
 		display: block;
-		height: 60px;
-		margin: 0 0 24px;
+		margin: 0 0 16px;
+
+		@media only screen and ( min-width: 768px ) {
+			margin-bottom: 24px;
+		}
 
 		ul {
+			background: #fff;
+			box-shadow: inset 0 -1px 0 #ccc;
 			display: flex;
 			justify-content: left;
 			margin: 0 auto;
 			max-width: 1056px;
+			overflow-x: scroll;
+
+			@media only screen and ( min-width: 768px ) {
+				flex-wrap: wrap;
+			}
+
+			@media only screen and ( min-width: 1300px ) {
+				justify-content: center;
+			}
 
 			li {
 				font-weight: 600;
 				font-size: 14px;
 				line-height: 20px;
-
+				margin: 0;
 			}
 
 			a,
@@ -109,6 +122,7 @@
 				display: inline-block;
 				text-decoration: none;
 				padding: 20px 16px;
+				white-space: nowrap;
 
 				&.current {
 					box-shadow: inset 0 -3px 0 #3171a6, inset 0 -1px 0 #ccc;

From 8e348e958041516812913da64d9d610d97c30b22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maria=20G=C3=B3rska-Piszek?= <maria@madeincosmos.net>
Date: Tue, 10 Aug 2021 10:50:12 +0200
Subject: [PATCH 3/7] Fix box shadow and margins.

---
 assets/css/admin.scss | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/assets/css/admin.scss b/assets/css/admin.scss
index a789fe00fb1..f1f0387c681 100644
--- a/assets/css/admin.scss
+++ b/assets/css/admin.scss
@@ -82,7 +82,6 @@
 
 	.top-bar {
 		background: #fff;
-		box-shadow: inset 0 -1px 0 #ccc;
 		display: block;
 		margin: 0 0 16px;
 
@@ -94,6 +93,7 @@
 			background: #fff;
 			box-shadow: inset 0 -1px 0 #ccc;
 			display: flex;
+			flex-wrap: wrap;
 			justify-content: left;
 			margin: 0 auto;
 			max-width: 1056px;
@@ -118,14 +118,16 @@
 			a:visited,
 			a:hover,
 			a:focus {
+				border: none;
 				color: #1e1e1e;
 				display: inline-block;
 				text-decoration: none;
+				outline: none;
 				padding: 20px 16px;
 				white-space: nowrap;
 
 				&.current {
-					box-shadow: inset 0 -3px 0 #3171a6, inset 0 -1px 0 #ccc;
+					box-shadow: inset 0 -3px 0 #3171a6;
 				}
 			}
 		}

From 5a9725bb62d04ba66f6bbf02542711503378ad4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maria=20G=C3=B3rska-Piszek?= <maria@madeincosmos.net>
Date: Tue, 10 Aug 2021 12:08:50 +0200
Subject: [PATCH 4/7] Update current item highlight.

---
 assets/css/admin.scss | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/assets/css/admin.scss b/assets/css/admin.scss
index f1f0387c681..fa0a202d842 100644
--- a/assets/css/admin.scss
+++ b/assets/css/admin.scss
@@ -82,6 +82,7 @@
 
 	.top-bar {
 		background: #fff;
+		box-shadow: inset 0 -1px 0 #ccc;
 		display: block;
 		margin: 0 0 16px;
 
@@ -95,7 +96,7 @@
 			display: flex;
 			flex-wrap: wrap;
 			justify-content: left;
-			margin: 0 auto;
+			margin: 0;
 			max-width: 1056px;
 			overflow-x: scroll;
 
@@ -107,6 +108,10 @@
 				justify-content: center;
 			}
 
+			@media only screen and ( min-width: 1200px ) {
+				margin-left: 70px;
+			}
+
 			li {
 				font-weight: 600;
 				font-size: 14px;
@@ -127,7 +132,7 @@
 				white-space: nowrap;
 
 				&.current {
-					box-shadow: inset 0 -3px 0 #3171a6;
+					box-shadow: inset 0px -3px 0px #3171a6, inset 0px -1px 0px #ccc;
 				}
 			}
 		}

From 97624b9525c99c4b9fbae32aee650e147a215de5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maria=20G=C3=B3rska-Piszek?= <maria@madeincosmos.net>
Date: Wed, 11 Aug 2021 16:31:46 +0200
Subject: [PATCH 5/7] Add menu scroll on mobile.

---
 assets/css/admin.scss | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/assets/css/admin.scss b/assets/css/admin.scss
index fa0a202d842..613a1acdc47 100644
--- a/assets/css/admin.scss
+++ b/assets/css/admin.scss
@@ -94,7 +94,6 @@
 			background: #fff;
 			box-shadow: inset 0 -1px 0 #ccc;
 			display: flex;
-			flex-wrap: wrap;
 			justify-content: left;
 			margin: 0;
 			max-width: 1056px;
@@ -108,10 +107,6 @@
 				justify-content: center;
 			}
 
-			@media only screen and ( min-width: 1200px ) {
-				margin-left: 70px;
-			}
-
 			li {
 				font-weight: 600;
 				font-size: 14px;

From 7c46e02fb89575b372b5e00c0cfcb40bca0fb6c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maria=20G=C3=B3rska-Piszek?= <maria@madeincosmos.net>
Date: Thu, 12 Aug 2021 14:53:53 +0200
Subject: [PATCH 6/7] Center the menu on larger screens.

---
 assets/css/admin.scss | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/assets/css/admin.scss b/assets/css/admin.scss
index 613a1acdc47..b78faeb34c5 100644
--- a/assets/css/admin.scss
+++ b/assets/css/admin.scss
@@ -95,15 +95,12 @@
 			box-shadow: inset 0 -1px 0 #ccc;
 			display: flex;
 			justify-content: left;
-			margin: 0;
+			margin: 0 auto;
 			max-width: 1056px;
+			width: 100%;
 			overflow-x: scroll;
 
-			@media only screen and ( min-width: 768px ) {
-				flex-wrap: wrap;
-			}
-
-			@media only screen and ( min-width: 1300px ) {
+			@media only screen and ( min-width: 1100px ) {
 				justify-content: center;
 			}
 

From 5b34edeaea35dcbb84f98b5d904b45d7b92ab8c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maria=20G=C3=B3rska-Piszek?= <maria@madeincosmos.net>
Date: Thu, 12 Aug 2021 17:47:39 +0200
Subject: [PATCH 7/7] Fix menu shadow and margins.

---
 assets/css/admin.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/css/admin.scss b/assets/css/admin.scss
index b78faeb34c5..8e2d65b942d 100644
--- a/assets/css/admin.scss
+++ b/assets/css/admin.scss
@@ -116,11 +116,12 @@
 			a:hover,
 			a:focus {
 				border: none;
+				box-shadow: none;
 				color: #1e1e1e;
 				display: inline-block;
 				text-decoration: none;
 				outline: none;
-				padding: 20px 16px;
+				padding: 20px 12px;
 				white-space: nowrap;
 
 				&.current {