<nav class="menu" id="nav">
  <span class="nav-item active">
    <span class="icon">
      <i data-feather="home"></i>
    </span>
    <a href="#">Home</a>
  </span>
  <span class="nav-item">
    <span class="icon">
      <i data-feather="search"></i>
    </span>
    <a href="#">Search</a>
  </span>
  <span class="nav-item">
    <span class="icon">
      <span class="subicon">13</span>
      <i data-feather="bell"></i>
    </span>
    <a href="#">Notifications</a>
  </span>
  <span class="nav-item">
    <span class="icon">
      <i data-feather="star"></i>
    </span>
    <a href="#">Favorites</a>
  </span>
  <span class="nav-item">
    <span class="icon">
      <span class="subicon">1</span>
      <i data-feather="bell"></i>
    </span>
    <a href="#">Your Profile</a>
  </span>
</nav>

* {
  box-sizing: border-box;
}

$primary: hsl(260, 100%, 80%);

html,
body {
  height: 100vh;
  width: 100vw;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  background-color: #222;
  font-family: system-ui, sans-serif;
}

nav,
.nav-item {
  display: flex;
}

nav {
  border-radius: 6px;
  background-image: linear-gradient(
    rgb(48, 48, 48) 13%,
    rgb(30, 30, 30) 40%,
    #0c0d11 86%
  );
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 -2px 0 black;
  cursor: pointer;
  box-shadow: 1px 2px 4px rgb(20, 20, 20), 0 4px 12px rgb(10, 10, 10);
}

.nav-item {
  flex-direction: row-reverse;
  font-size: 0.8999rem;
  line-height: 1rem;
  align-items: center;
  min-width: 120px;
  justify-content: space-between;
  transition: all 80ms ease;

  &.active {
    color: $primary;
    text-shadow: 0 0 3px hsla(260, 100%, 70%, 0.7);
  }

  &:not(.active):hover {
    color: rgba(255, 255, 255, 0.87);
  }

  &:hover > .icon .subicon {
    height: 32px;
    width: 32px;
    border-radius: 32px;
    top: -16px;
    right: -16px;
    border-color: white;
  }

  &:not(:first-of-type) {
    border-left: 1px solid rgb(60, 60, 60);
  }
  &:not(:last-of-type) {
    border-right: 0.1rem solid black;
  }

  a {
    color: inherit;
    text-decoration: none;
    padding: 1ch;
  }

  .icon {
    padding: 1ch;
    position: relative;

    .subicon {
      text-shadow: none;
      transition: all 40ms ease;
      position: absolute;
      top: -3px;
      right: -3px;
      background: red;
      color: white;
      box-shadow: 0 0 4px rgba(41, 41, 41, 0.405);
      width: 18px;
      height: 18px;
      border-radius: 14px;
      font-size: 0.7em;
      font-weight: 700;
      display: inline-grid;
      place-items: center;
      border: 2px solid mix(white, red);
    }
  }

  .icon > svg {
    max-width: 16px;
  }
}

feather.replace();