tweak admin top-bar

modules/admin/assets/js/components/admin-top-bar-link.js

@@ -0,0 +1,23 @@
+import Typography from '@elementor/ui/Typography';
+import IconButton from '@elementor/ui/IconButton';
+
+export const AdminTopBarLink = ( { linkData } ) => {
+	const { label, hrefStr, children, color, aria } = linkData;
+	return (
+		<IconButton
+			size="medium"
+			edge="end"
+			color={ color }
+			aria-label={ aria }
+			href={ hrefStr }
+		>
+			{ children }
+			<Typography
+				fontSize="medium"
+				align="center"
+			>
+				{ label }
+			</Typography>
+		</IconButton>
+	);
+};

modules/admin/assets/js/components/admin-top-bar-links.js

@@ -0,0 +1,13 @@
+import Stack from '@elementor/ui/Stack';
+import { AdminTopBarLink } from './admin-top-bar-link';
+
+export const AdminTopBarLinks = ( { linksData } ) => {
+	linksData.forEach( ( link ) => link.color = 'secondary' );
+	return (
+		<Stack spacing={ 2 } direction="row-reverse">
+			{
+				linksData.map( ( linkData, index ) => <AdminTopBarLink linkData={ linkData } key={ index } /> )
+			}
+		</Stack>
+	);
+};

modules/admin/assets/js/components/admin-top-bar.js

@@ -1,36 +1,41 @@
-import HelpIcon from '@elementor/icons/HelpIcon';
 import AppBar from '@elementor/ui/AppBar';
-import Grid from '@elementor/ui/Grid';
-import Link from '@elementor/ui/Link';
 import Toolbar from '@elementor/ui/Toolbar';
-import Typography from '@elementor/ui/Typography';
 import { __ } from '@wordpress/i18n';
 import HomeIcon from '@elementor/icons/HomeIcon';
+import HelpIcon from '@elementor/icons/HelpIcon';
+import { AdminTopBarLinks } from './admin-top-bar-links';
+import { AdminTopBarLink } from './admin-top-bar-link';
+
+const home = {
+	label: __( 'Hello+', 'hello-plus' ),
+	hrefStr: '#',
+	children: <HomeIcon />,
+	color: 'primary',
+	aria: 'menu',
+};
+
+const adminTopBarLinks = [
+	{
+		label: 'Todo1',
+		hrefStr: '#',
+		children: <HelpIcon />,
+		aria: 'todo-1',
+	},
+	{
+		label: 'Todo2',
+		hrefStr: '#',
+		children: <HelpIcon />,
+		aria: 'todo-2',
+	},
+];
 
-const AdminTopBar = () => {
+export const AdminTopBar = () => {
 	return (
 		<AppBar position="static" elevation={ 6 } sx={ { boxShadow: '0px 3px 16px 0px rgba(35, 38, 42, 0.20)' } }>
-			<Toolbar direction="row" sx={ { alignItems: 'center', backgroundColor: 'background.default', gap: '10px' } } padding={ 2 }>
-				<Grid container={ true } alignItems="center" gap={ 1 }>
-					<HomeIcon />
-					<Typography>
-						{ __( 'Hello+', 'hello-plus' ) }
-					</Typography>
-				</Grid>
-				<Link
-					color="secondary"
-					underline="hover"
-					target="_blank"
-					sx={ { display: 'inline-flex', alignItems: 'center', gap: 1 } }
-				>
-					<HelpIcon />
-					<span>
-						TODO
-					</span>
-				</Link>
+			<Toolbar sx={ { alignItems: 'center', backgroundColor: 'background.default', justifyContent: 'space-between' } } padding={ 2 }>
+				<AdminTopBarLink linkData={ home } />
+				<AdminTopBarLinks linksData={ adminTopBarLinks } />
 			</Toolbar>
 		</AppBar>
 	);
 };
-
-export default AdminTopBar;