Butternut Box - Sticky Footer

StickyFooter.html

<div class="sticky-footer">
  <a href="#" class="sticky-footer__item sticky-footer__item--active">
    <img src="#" alt="Dashboard Icon">
    Dashboard
  </a>
  <a href="#" class="sticky-footer__item">
    <img src="#" alt="Dashboard Icon">
    My Plan
  </a>
  <a href="#" class="sticky-footer__item">
    <img src="#" alt="Dashboard Icon">
    Deliveries
  </a>
  <a href="#" class="sticky-footer__item">
    <img src="#" alt="Dashboard Icon">
    My Details
  </a>
  <a href="#" class="sticky-footer__item">
    <img src="#" alt="Dashboard Icon">
    Free Food
  </a>
</div>

StickyFooter.sass

$icon-width: 2.5rem
$nav-drop-shadow: 0 -.2rem .4rem 0 rgba(0, 0, 0, .2)

.sticky-footer
  align-items: center
  background: $brand-white
  bottom: 0
  box-shadow: $nav-drop-shadow
  display: flex
  justify-content: space-evenly
  padding: .5rem 0
  // When a user is on a iPhone X device, we can use this user agent styling to
  // ensure that the right amount of space is given to prevent phone UI form
  // interfering with our element
  padding-bottom: calc(.5rem + env(safe-area-inset-bottom))
  position: sticky
  width: 100%
  z-index: 1

  &__item
    align-items: center
    color: $grey-600
    display: flex
    flex-direction: column
    font-family: $font-family-base-regular
    font-size: 1.4rem
    letter-spacing: 0
    position: relative

    &:hover
      color: $grey-600

    img
      margin-bottom: .5rem
      width: $icon-width
      height: $icon-width

    &--active
      color: $brand-blue-500

      &::before
        background-image: image-url('icons/navigation/icon-link-active.svg')
        background-repeat: no-repeat
        background-size: contain
        content: ''
        filter: none
        height: $icon-width
        position: absolute
        width: $icon-width
        z-index: -1

      img
        filter: none