Use css-in-js for styling in navigation component

packages/components/src/navigation/index.js

@@ -3,6 +3,11 @@
  */
 import { useEffect, useState } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { Root } from './styles/navigation-styles';
+
 const Navigation = ( { activeItemId, children, data, rootTitle } ) => {
 	const [ activeLevel, setActiveLevel ] = useState( 'root' );
 
@@ -35,14 +40,14 @@ const Navigation = ( { activeItemId, children, data, rootTitle } ) => {
 	}, [] );
 
 	return (
-		<div className="components-navigation">
+		<Root className="components-navigation">
 			{ children( {
 				level,
 				levelItems,
 				parentLevel,
 				setActiveLevel,
 			} ) }
-		</div>
+		</Root>
 	);
 };
 

packages/components/src/navigation/menu-item.js

@@ -12,6 +12,7 @@ import { Icon, chevronRight } from '@wordpress/icons';
  * Internal dependencies
  */
 import Button from '../button';
+import { MenuItem } from './styles/navigation-styles';
 import Text from '../text';
 
 const NavigationMenuItem = ( props ) => {
@@ -37,14 +38,14 @@ const NavigationMenuItem = ( props ) => {
 	};
 
 	return (
-		<li className={ classes }>
+		<MenuItem className={ classes }>
 			<Button className={ classes } onClick={ handleClick }>
 				<Text variant="body.small">
 					<span>{ title }</span>
 				</Text>
 				{ hasChildren ? <Icon icon={ chevronRight } /> : null }
 			</Button>
-		</li>
+		</MenuItem>
 	);
 };
 

packages/components/src/navigation/menu.js

@@ -1,5 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import { Menu } from './styles/navigation-styles';
+
 const NavigationMenu = ( { children } ) => {
-	return <ul className="components-navigation__menu">{ children }</ul>;
+	return <Menu className="components-navigation__menu">{ children }</Menu>;
 };
 
 export default NavigationMenu;

packages/components/src/navigation/styles/navigation-styles.js

@@ -0,0 +1,37 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+
+const horizontalPadding = '30px';
+
+export const Root = styled.div`
+	width: 272px;
+	padding: 35px 0px;
+	> *:not( .components-navigation__menu ) {
+		margin-left: ${ horizontalPadding };
+		margin-right: ${ horizontalPadding };
+	}
+`;
+
+export const Menu = styled.ul`
+	padding: 0;
+	margin: 0 0 32px 0;
+	display: flex;
+	flex-direction: column;
+`;
+
+export const MenuItem = styled.li`
+	display: flex;
+	justify-content: space-between;
+	button {
+		width: 100%;
+		padding-top: 8px;
+		padding-bottom: 8px;
+		padding-left: ${ horizontalPadding };
+		padding-right: ${ horizontalPadding };
+	}
+	&.is-active span {
+		border-bottom: 2px solid var( --wp-admin-theme-color );
+	}
+`;

packages/components/src/style.scss

@@ -29,7 +29,6 @@
 @import "./menu-item/style.scss";
 @import "./menu-items-choice/style.scss";
 @import "./modal/style.scss";
-@import "./navigation/style.scss";
 @import "./notice/style.scss";
 @import "./panel/style.scss";
 @import "./placeholder/style.scss";