Fix menu arrow alignment and overlap with content

The menu arrow was previously implemented with a 45-degree rotated
square with border on two sides and white background. This had two
problems:

 - Because a square's diagonal is longer than its width, the right edge
   after rotation extended beyond the right edge of the content

 - The bottom part of the rotated square overlapped the menu content,
   which created a "notch" in the top menu item when hovered

Fix the problem and simplify the CSS by creating the triangle shape
using an SVG instead.

src/sidebar/components/menu.js

@@ -9,6 +9,14 @@ const { listen } = require('../util/dom');
 
 const SvgIcon = require('./svg-icon');
 
+// The triangular indicator below the menu toggle button that visually links it
+// to the menu content.
+const menuArrow = (
+  <svg className="menu__arrow" width={15} height={8}>
+    <path d="M0 8 L7 0 L15 8" stroke="currentColor" strokeWidth="2" />
+  </svg>
+);
+
 /**
  * Flag indicating whether the next click event on the menu's toggle button
  * should be ignored, because the action it would trigger has already been
@@ -116,7 +124,7 @@ function Menu({
       </button>
       {isOpen && (
         <Fragment>
-          <div className="menu__arrow" />
+          {menuArrow}
           <div
             className={classnames(
               'menu__content',

src/styles/sidebar/components/menu.scss

@@ -28,18 +28,17 @@
 // Triangular indicator at the top of the menu that associates it with the
 // toggle button.
 .menu__arrow {
-  $size: 10px;
+  color: $grey-3;
+  fill: white;
 
-  background-color: white;
-  border-left: 1px solid $grey-3;
-  border-top: 1px solid $grey-3;
-  height: $size;
+  // Position the arrow so that it appears flush with the right edge of the
+  // content when the menu is right-aligned, and the bottom of the arrow just
+  // overlaps the content's border. The effect is that the menu's border is a
+  // rounded rect with a notch at the top.
   position: absolute;
+  top: calc(100% - 2px);  // nb. Adjust this if changing the <svg> size.
   right: 0;
-  top: 100%;
-  transform: rotate(45deg);
-  width: $size;
-  z-index: 3;
+  z-index: 1;
 }
 
 // Content area of the menu.