Render submenu item icons on the right as per mocks

src/sidebar/components/menu-item.js

@@ -43,6 +43,20 @@ function MenuItem({
     'menu-item__label--submenu': isSubmenuItem,
   });
 
+  const leftIconSpace = icon !== undefined || isSubmenuItem;
+  const rightIconSpace = icon !== undefined && isSubmenuItem;
+
+  let renderedIcon = null;
+  if (icon) {
+    renderedIcon = iconIsUrl ? (
+      <img className={iconClass} alt={iconAlt} src={icon} />
+    ) : (
+      <SvgIcon name={icon} className="menu-item__icon" />
+    );
+  }
+  const leftIcon = isSubmenuItem ? null : renderedIcon;
+  const rightIcon = isSubmenuItem ? renderedIcon : null;
+
   return (
     <div
       aria-checked={isSelected}
@@ -55,15 +69,8 @@ function MenuItem({
       role="menuitem"
       {...(onClick && onActivate('menuitem', onClick))}
     >
-      {icon !== undefined && (
-        <div className="menu-item__icon-container">
-          {icon &&
-            (iconIsUrl ? (
-              <img className={iconClass} alt={iconAlt} src={icon} />
-            ) : (
-              <SvgIcon name={icon} className="menu-item__icon" />
-            ))}
-        </div>
+      {leftIconSpace && (
+        <div className="menu-item__icon-container">{leftIcon}</div>
       )}
       {href && (
         <a
@@ -76,6 +83,9 @@ function MenuItem({
         </a>
       )}
       {!href && <span className={labelClass}>{label}</span>}
+      {rightIconSpace && (
+        <div className="menu-item__icon-container">{rightIcon}</div>
+      )}
       {typeof isSubmenuVisible === 'boolean' && (
         <div
           className="menu-item__toggle"

src/sidebar/components/test/menu-item-test.js

@@ -42,6 +42,19 @@ describe('MenuItem', () => {
     assert.isTrue(wrapper.exists('SvgIcon[name="an-svg-icon"]'));
   });
 
+  it('renders a blank space for an icon if `icon` is `null`', () => {
+    const wrapper = createMenuItem({ icon: null });
+    const iconSpace = wrapper.find('.menu-item__icon-container');
+    assert.equal(iconSpace.length, 1);
+    assert.equal(iconSpace.children().length, 0);
+  });
+
+  it('does not render a space for an icon if `icon` is missing', () => {
+    const wrapper = createMenuItem();
+    const iconSpace = wrapper.find('.menu-item__icon-container');
+    assert.equal(iconSpace.length, 0);
+  });
+
   it('shows the submenu indicator if `isSubmenuVisible` is a boolean', () => {
     const wrapper = createMenuItem({ isSubmenuVisible: true });
     assert.isTrue(wrapper.exists('SvgIcon[name="collapse-menu"]'));
@@ -61,4 +74,28 @@ describe('MenuItem', () => {
     wrapper.find('.menu-item__toggle').simulate('click');
     assert.called(onToggleSubmenu);
   });
+
+  it('renders top-level menu item icons on the left', () => {
+    const wrapper = createMenuItem({ icon: 'an-svg-icon' });
+    const iconSpaces = wrapper.find('.menu-item__icon-container');
+
+    // There should be only one icon space, on the left.
+    assert.equal(iconSpaces.length, 1);
+    assert.equal(iconSpaces.at(0).children().length, 1);
+  });
+
+  it('renders submenu item icons on the right', () => {
+    const wrapper = createMenuItem({
+      icon: 'an-svg-icon',
+      isSubmenuItem: true,
+    });
+    const iconSpaces = wrapper.find('.menu-item__icon-container');
+    assert.equal(iconSpaces.length, 2);
+
+    // There should be a space for the parent item's icon.
+    assert.equal(iconSpaces.at(0).children().length, 0);
+
+    // The actual icon for the submenu should be shown on the right.
+    assert.equal(iconSpaces.at(1).children().length, 1);
+  });
 });