nav styles

plugins/woocommerce-admin/client/settings/index.js

@@ -22,10 +22,7 @@ const Settings = ( { params } ) => {
 			<Tabs data={ settingsData } page={ params.page }>
 				<div className="woocommerce-settings-layout">
 					<div className="woocommerce-settings-section-nav">
-						<SectionNav
-							data={ settingsData[ params.page ] }
-							section={ params.section }
-						/>
+						<SectionNav data={ settingsData[ params.page ] } />
 					</div>
 					<div className="woocommerce-settings-content">
 						<p>Content here</p>

plugins/woocommerce-admin/client/settings/section-nav.js

@@ -4,12 +4,15 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
+	Button,
 } from '@wordpress/components';
+import { getNewPath, navigateTo, getQuery } from '@woocommerce/navigation';
+import classnames from 'classnames';
 
-export const SectionNav = ( { data, section } ) => {
+export const SectionNav = ( { data } ) => {
 	const { sections } = data;
 	const sectionKeys = Object.keys( sections );
-	console.log( section );
+	const { section } = getQuery();
 
 	if ( sectionKeys.length === 1 ) {
 		return null;
@@ -17,9 +20,25 @@ export const SectionNav = ( { data, section } ) => {
 
 	return (
 		<>
-			<ItemGroup>
+			<ItemGroup className="woocommerce-settings-section-nav">
 				{ sectionKeys.map( ( key ) => (
-					<Item>{ sections[ key ].label }</Item>
+					<Item
+						key={ key }
+						className={ classnames( {
+							'active-section': section === key,
+						} ) }
+					>
+						<Button
+							variant="tertiary"
+							onClick={ () => {
+								navigateTo( {
+									url: getNewPath( { section: key } ),
+								} );
+							} }
+						>
+							{ sections[ key ].label }
+						</Button>
+					</Item>
 				) ) }
 			</ItemGroup>
 		</>

plugins/woocommerce-admin/client/settings/style.scss

@@ -28,7 +28,7 @@
 .woocommerce-settings-layout {
 	width: 100%;
 	display: flex;
-	gap: 10px;
+	gap: 30px;
 	padding: 50px 16px 16px 16px;
 }
 
@@ -39,3 +39,20 @@
 .woocommerce-settings-content {
 	flex: 1;
 }
+
+.woocommerce-settings-section-nav {
+	.components-item {
+		&.active-section {
+			.components-button {
+				background-color: lightgray;
+			}
+		}
+	}
+
+	.components-button {
+		width: 100%;
+		border: none !important;
+		box-shadow: none !important;
+		padding: 20px 12px;
+	}
+}