spur-tailwind/css/components/nav.css

Spur web UI

.nav-list {
  @apply flex flex-col;
}

.nav-link {
  @apply relative inline-flex flex-row items-center mx-5 py-5 text-spur-black no-underline cursor-pointer whitespace-no-wrap;
  transition: color 200ms ease-in-out;
}

.nav-link.is-active {
  @apply text-buzz-purple;
}

.nav-link::before {
  @apply absolute z-10 inset-x-0 top-0 block w-full h-1 bg-buzz-purple opacity-0;
  content: '';
  bottom: 0;
  transition: opacity 200ms ease-in-out;
}

.nav-link.is-active::before {
  @apply opacity-100;
}

/* Sub-nav */
.nav-subnav {
  @apply absolute z-30 flex flex-col min-w-40 bg-white text-sm shadow-md rounded opacity-0	.pointer-events-none;
  top: 100%;
  left: 1rem;
  transform: translateY(-0.5rem);
  transition: opacity 200ms ease-in-out, transform 200ms ease-in-out;

  @screen xl {
    top: 90%;
    left: -1rem;
    width: 210px;
  }
}

.nav-link-icon {
  transition: transform 200ms ease-in-out, fill 200ms ease-in-out;
}

.nav-subnav-button {
  @apply relative;
}

.nav-subnav-button.is-open {
  & .nav-link-icon {
    transform: rotate(180deg);
  }
  & .nav-subnav {
    @apply opacity-100 pointer-events-auto z-10;
    transform: translateY(0);
  }
}

.nav-subnav::before,
.nav-subnav::after {
  @apply .block;
  position: absolute;
  top: -0.5rem;
  left: 2rem;
  width: 0;
  height: 0;
  content: '';
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
}

.nav-subnav::before {
  border-bottom: 0.5rem solid #b7b4d5;
  filter: blur(2px);
  z-index: -1;
  opacity: 0.5;
}

.nav-subnav::after {
  border-bottom: 0.5rem solid #ffffff;
}

.nav-subnav-list {
  @apply py-2 bg-white rounded;
}

.nav-subnav-link {
  @apply block p-4 text-sm text-spur-black no-underline;
  transition: background-color 200ms ease-in-out;

  &.is-active {
    @apply bg-blue-jeans-10;
  }
}

.nav-subnav-list:hover .nav-subnav-link {
  @apply bg-transparent;

  &:hover {
    @apply bg-blue-jeans-10;
  }
}

/* Responsive breakpoints */
@screen xl {
  .nav-list {
    @apply flex-row;
  }

  .nav-item {
    @apply mx-2;
  }

  .nav-link {
    @apply mx-2 py-8;
    transition: color 200ms ease-in-out;
    line-height: 1;
  }

  .nav:hover .nav-link.is-active::before {
    @apply opacity-0;
  }

  .nav:not(.has-open-sub-nav):hover .nav-link:hover::before {
    @apply opacity-100;
  }

  .nav.has-open-sub-nav .nav-link::before {
    @apply opacity-0;
  }

  .nav.has-open-sub-nav .nav-subnav-button.is-open .nav-link::before {
    @apply opacity-100;
  }
}

@screen xl {
  .nav-item {
    @apply mx-4;
  }
}