Website/styles/NavBar.module.scss

@import 'variables.module';
@import 'global.module';

.pageHero {
  height: 220px;

  background-image: url("https://crss.fra1.cdn.digitaloceanspaces.com/img/2024-06-08_14.19.52.png");

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  font-family: 'Comic Neue', 'Comic Sans MS', 'Noto Color Emoji', 'Noto Emoji', sans-serif;
  font-weight: 600;

  > .heroOverlay {
    background: rgba($colorSurfaceLight2, 0.9);

    backdrop-filter: blur(8px);

    height: 100%;
    width: 100%;

    > .container {
      height: 100%;

      display: flex;

      align-items: center;
      justify-content: space-between;

      > div:first-child {
        display: flex;

        flex-direction: column;

        gap: 0.5rem;

        > h1 {
          font-family: 'Comic Neue', 'Comic Sans MS', 'Noto Color Emoji', 'Noto Emoji', sans-serif;
          font-weight: 600;
          font-size: 1.5rem;

          margin: 0;
        }

        @media (max-width: 768px) {
          align-items: center;
          justify-content: center;

          width: 100%;
          height: 100%;
        }
      }

      > div:last-child {
        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 0.5rem;

        > input {
          background: rgba(0,0,0,0);

          width: fit-content;

          padding: 4px 16px;

          font-size: 1.5rem;

          text-align: center;

          color: inherit;

          border: 1px solid rgba(0, 0, 0, 0);
          border-radius: 1rem;

          transition: 150ms;

          &:focus, &:hover {
            outline: none;

            background: rgba($colorSurfaceLight4, .65);

            border: 1px solid $colorBorderLight3;
          }

          @media (prefers-color-scheme: dark) {
            color: inherit;

            &:focus, &:hover {
              background: rgba($colorSurfaceDark4, .65);

              border: 1px solid $colorBorderDark3;
            }
          }
        }

        @media (max-width: 768px) {
          display: none;
        }
      }
    }

    @media (prefers-color-scheme: dark) {
      background: rgba($colorSurfaceDark2, 0.9);
    }
  }

  @media (max-width: 768px) {
    border-bottom: 1px solid $colorBorderLight1;

    @media (prefers-color-scheme: dark) {
      border-color: $colorBorderDark1;
    }
  }
}

.navBar {
  height: 64px;

  position: sticky;

  top: 0;

  left: 0;
  right: 0;

  background: $colorSurfaceLight3;

  border-bottom: 1px solid $colorBorderLight1;

  z-index: 999999999;

  > .container {
    display: flex;

    justify-content: space-between;
    align-items: center;

    height: 100%;

    @media (max-width: 768px) {
      justify-content: space-between;
    }

    > .navMobileContainer {
      display: none;

      width: 100%;
      height: 100%;

      justify-content: end;
      align-items: center;

      z-index: 10000;

      > .navToggle {
        padding: 0.5rem;

        background: none;

        border: none;
        border-radius: 50%;

        display: flex;

        color: $colorTextLight1;

        transition: 150ms;

        &:hover, &:focus {
          background: rgba($colorPrimary, 0.5);
        }

        @media (prefers-color-scheme: dark) {
          color: $colorTextDark1;
        }
      }

      @media (max-width: 768px) {
        display: flex;
      }
    }

    > .navCollapse {
      display: flex;

      justify-content: space-between;
      align-items: center;

      height: 100%;
      width: 100%;

      z-index: 5000;

      > ul {
        list-style: none;

        display: flex;

        align-items: center;
        gap: .5rem;

        margin: 0;

        > li {
          > a, .dropDown > label {
            padding: 8px 16px;

            display: flex;

            flex-direction: row;

            align-items: center;
            gap: 1rem;

            text-decoration: none;

            transition: 150ms;

            border-radius: 2rem;

            color: $colorTextLight2;

            outline: 2px solid rgba(0, 0, 0, 0);

            > .icon {
              width: 20px;
              height: 20px;
            }

            &:hover, &:focus, &.active {
              outline: 2px solid rgba($colorPrimary, 0.65);

              color: $colorPrimary;
            }

            @media (prefers-color-scheme: dark) {
              color: $colorTextDark2;

              &:hover, &:focus, &.active {
                outline-color: rgba($colorPrimary, 0.65);
              }
            }
          }
        }
      }

      @media (max-width: 768px) {
        opacity: 1;

        transition: 300ms;

        position: fixed;

        height: 100vh;
        width: 100vw;

        top: 0;
        right: -110%;

        display: flex;

        flex: 1;
        flex-direction: column;

        align-items: end;
        justify-content: center;

        gap: 2rem;

        padding: 1rem;

        background: rgba($colorSurfaceLight3, 0.95);
        backdrop-filter: blur(8px);

        ul {
          flex-direction: column;

          align-items: end;

          gap: 1rem;

          li {
            a {
              padding: 8px 24px;
            }
          }
        }

        @media (prefers-color-scheme: dark) {
          background: rgba($colorSurfaceDark3, 0.95);
        }
      }
    }
  }

  @media (prefers-color-scheme: dark) {
    background: $colorSurfaceDark3;

    border-color: $colorBorderDark1;
  }

  &.navOpen {
    > .container {
      flex-direction: column;

      > .navMobileContainer {
        height: 64px;
      }

      > .navCollapse {
        opacity: 1;

        right: 0;
      }
    }
  }

  @media (max-width: 768px) {
    background: none;

    position: fixed;

    top: 0;

    border: none;
  }
}