spur-tailwind/css/components/header.css

Spur web UI

.header {
  @apply fixed inset-x-0 top-0 z-30 bg-white border-b border-filter-grey bg-white;
  min-height: 58px;
  transform: translateY(0);
  transition: transform 300ms ease-in-out;
  will-change: transform;

  &::after {
    @apply fixed top-0 inset-x-0 z-20 h-screen pointer-events-none bg-transparent;
    content: '';
    transition: background-color 200ms ease-in-out;
    will-change: transform;
  }

  &.is-hidden {
    transform: translateY(-100%);
  }
}

.header-container {
  @apply mx-auto flex items-center justify-between;
}

.header-drawer {
  @apply fixed top-0 right-0 z-20 flex flex-col w-full h-screen justify-start bg-white;
  box-shadow: -2px 0 8px 0 rgba(69, 69, 83, 0.3);
  max-width: 262px;
  transform: translateX(100%);
  transition: transform 200ms ease-in-out;
  will-change: transform;
}

.header-settings {
  @apply inline-flex pt-5 mx-5 justify-center border-t border-filter-grey;
  order: 3;
}

.header-nav {
  order: 2;
}

.header-dropdown {
  @apply px-5 py-4;
  order: 1;
}

/* Open drawer state */
.header.has-open-nav-drawer {
  &::after {
    @apply pointer-events-auto;
    background-color: rgba(69, 69, 83, 0.5);
  }

  & .header-drawer {
    @apply z-30;
    transform: translateX(0);
  }
}

/* Navigation toggle positioning */
.header .nav-toggle {
  @apply ml-auto;
}

@screen xl {
  .has-open-nav-drawer::after {
    @apply hidden;
  }

  .header-drawer {
    @apply relative flex-row items-center flex-grow ml-0 h-auto shadow-none;
    max-width: none;
    transform: none;
  }

  .header .nav-toggle {
    @apply hidden;
  }

  .header-settings {
    @apply ml-auto mr-0 pt-0 border-t-0;
    order: 2;
  }

  .header-nav {
    order: 1;
  }

  .header-dropdown {
    @apply ml-3 px-0 py-0;
    order: 3;
  }
}