Menu Component

<div class="demo-wrapper">

<!-- Medium variant with combination of anchor/button/custom items -->
<div class="spr-menu-md">
   <button class="spr-menu-item" tabindex="0">Some Button Item</button>
   <button class="spr-menu-item" tabindex="0">Another Button Item</button>
   <a class="spr-menu-item" tabindex="0">Also Anchor</a>
   <a class="spr-menu-item active" tabindex="0">And More Anchor</a>
   <div class="spr-menu-item" role="button" tabindex="0">
     <div style="display: flex; justify-content: space-between">
       <span>Even Custom</span>
       <div class="custom-item">
         😎
       </div>
     </div>
   </div>
</div>

<!-- Small variant with combination of anchor/button/custom items -->
<div class="spr-menu-sm">
   <button class="spr-menu-item" tabindex="0">Some Button Item</button>
   <button class="spr-menu-item" tabindex="0">Another Button Item</button>
   <a class="spr-menu-item" tabindex="0">Also Anchor</a>
   <a class="spr-menu-item active" tabindex="0">And More Anchor</a>
   <div class="spr-menu-item" role="button" tabindex="0">
     <div style="display: flex; justify-content: space-between">
       <span>Even Custom</span>
       <div class="custom-item">
         😎
       </div>
     </div>
   </div>
</div>

</div>
<style>
  .custom-item { width: 30px; border-radius: 10px; background-color: indianred; color: white; text-align: center }
  .demo-wrapper { display: flex; justify-content: space-around; align-items: flex-start }
</style>

@import 'components/menu';

@keyframes openPopover {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}

.spr-icon-rotate-90 {
  transform: rotate(90deg);
}

.spr-icon-rotate-180 {
  transform: rotate(180deg);
}

.spr-icon-rotate-270 {
  transform: rotate(270deg);
}

.spr-menu-md,
.spr-menu-sm {
  padding: 0.5rem 0rem;
  box-shadow: 0 4px 8px 0 rgba(24, 25, 27, 0.15);
  min-width: 224px;
  background-color: #fff;
  animation: openPopover 0.15s;
}

.spr-menu-md:focus:not(:focus-visible),
.spr-menu-sm:focus:not(:focus-visible) {
  outline: none;
}

.spr-menu-md:focus-visible,
.spr-menu-sm:focus-visible {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

.spr-menu-content {
  display: flex;
  flex-direction: column;
}

.spr-menu-content > :not(:last-child) {
  margin-bottom: 0rem;
}

button.spr-menu-item {
  border: none;
  background: none;
  box-shadow: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

a.spr-menu-item, a.spr-menu-item:visited, a.spr-menu-item:active, a.spr-menu-item:link {
  font: inherit;
  color: inherit;
  text-decoration: none;
}

a.spr-menu-item,
button.spr-menu-item,
.spr-menu-item {
  color: #18191b;
  display: block;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
  border-left: 4px solid transparent;
  width: 100%;
}

a.spr-menu-item:focus:not(:focus-visible),
button.spr-menu-item:focus:not(:focus-visible),
.spr-menu-item:focus:not(:focus-visible) {
  outline: none;
}

a.spr-menu-item:focus-visible,
button.spr-menu-item:focus-visible,
.spr-menu-item:focus-visible {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

a.spr-menu-item:hover:not([disabled]),
button.spr-menu-item:hover:not([disabled]),
.spr-menu-item:hover:not([disabled]) {
  transition-property: background-color;
  transition-duration: 0.11s;
  transition-timing-function: ease-in-out;
  background-color: rgba(24, 25, 27, 0.08);
}

a.spr-menu-item:active, a.spr-menu-item:hover:active:not([disabled]),
button.spr-menu-item:active,
button.spr-menu-item:hover:active:not([disabled]),
.spr-menu-item:active,
.spr-menu-item:hover:active:not([disabled]) {
  transition-property: background-color;
  transition-duration: 0.11s;
  transition-timing-function: ease-in-out;
  background-color: rgba(24, 25, 27, 0.18);
}

a.spr-menu-item[disabled],
button.spr-menu-item[disabled],
.spr-menu-item[disabled] {
  cursor: default;
  color: rgba(24, 25, 27, 0.5);
}

a.spr-menu-item.active,
button.spr-menu-item.active,
.spr-menu-item.active {
  border-left: 0.25rem solid #20883a;
}

.spr-menu-md a.spr-menu-item, .spr-menu-md
button.spr-menu-item, .spr-menu-md
.spr-menu-item {
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  font-family: "AvenirNext", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  font-weight: 400;
  font-weight: bold;
}

.spr-menu-sm a.spr-menu-item, .spr-menu-sm
button.spr-menu-item, .spr-menu-sm
.spr-menu-item {
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  font-family: "AvenirNext", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5rem;
  letter-spacing: 0;
  font-weight: 400;
  font-weight: bold;
}

@keyframes openMenu {
  from {
    transform: scale(0.9);
  }
  to {
    transform: scale(1);
  }
}