Homework_JS/react-store-app/src/styles/Header.module.scss

@import "styles/_variables.scss";

.header {
  background-color: $silver;
  display: flex;
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 1;

  .logo {
    flex: 1;
    display: flex;
    align-items: center;

    h2 {
      text-transform: uppercase;
      font-weight: 500;
    }
  }

  .navContainer {
    nav {
      height: 75px;
      position: relative;

      > ul {
        height: 100%;
        display: flex;

        > li {
          height: 100%;

          .subMenu {
            position: absolute;
            width: 600px;
            top: calc(5px + 100%);
            left: auto;
            right: 0;
            display: flex;
            flex-wrap: wrap;
            padding: 5px;
            border: 1px solid rgba($color: $dark-gray, $alpha: 0.25);
            border-radius: $border-radius;
            margin-top: -20px;
            transition: all 0.1s;
            background-color: $white;
            visibility: hidden;
            opacity: 0;

            &::before {
              content: "";
              background-color: transparent;
              position: absolute;
              width: 100%;
              height: 5px;
              top: -5px;
              left: 0;
            }
          }

          .a {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            text-transform: capitalize;
            color: $dark-gray;
            padding: 0 12px;
          }

          &:not(:last-of-type) {
            margin-right: 5px;
          }

          .basketBtn {
            background-color: $red;
            position: relative;

            .basketLength {
              position: absolute;
              background-color: $white;
              top: 15px;
              right: 5px;
              width: 18px;
              height: 18px;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 100%;
              color: $dark-gray;
              font-size: 13px;
            }
          }

          &:hover {
            & > .subMenu {
              transition: all 0.1s;
              visibility: visible;
              opacity: 1;
              margin-top: 0;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .header {
    padding: 1rem;
    .navContainer {
      display: none;
    }
  }
}