Add mixin for `menu-arrow`

src/styles/mixins/molecules.scss

@@ -63,6 +63,25 @@
   }
 }
 
+/**
+ * A pattern for styling a little "pointer" (arrow) icon that attaches to
+ * menu content and serves as a visual anchor back to the triggering
+ * button/element. When using, you'll need to provide the appropriate
+ * positioning details to get the pointer to be where you want it in the
+ * given menu.
+ *
+ * @param {string} [$direction] - Which direction the arrow should "point"
+ */
+@mixin menu-arrow($direction: 'up') {
+  position: absolute;
+  z-index: 2;
+  color: var.$color-border;
+  fill: var.$color-background;
+  @if ($direction == 'down') {
+    transform: rotateX(180deg);
+  }
+}
+
 /**
  * A pattern for displaying redacted (moderated) text content
  */

src/styles/sidebar/components/annotation-share-control.scss

@@ -42,16 +42,11 @@
   }
 
   // Position the pointer icon absolutely and flip it to make it point at the
-  // share icon. Fill it with background color and give it the same color as
-  // the border to make it look like part of the panel frame.
+  // share icon
   &__arrow {
-    position: absolute;
-    z-index: 100;
+    @include molecules.menu-arrow($direction: 'down');
     right: 0px;
     bottom: -8px;
-    color: var.$color-border;
-    fill: var.$color-background;
-    transform: rotateX(180deg);
   }
 
   .share-links__icon {

src/styles/sidebar/components/menu.scss

 @use "../../mixins/focus";
 @use "../../mixins/layout";
+@use "../../mixins/molecules";
 @use "../../mixins/utils";
 @use "../../variables" as var;
 
@@ -56,17 +57,14 @@
 // Triangular indicator at the top of the menu that associates it with the
 // toggle button.
 .menu__arrow {
-  color: var.$grey-3;
-  fill: white;
+  @include molecules.menu-arrow;
 
   // 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;
-  z-index: 2;
 }
 
 // Content area of the menu.