<commit_before><template>
  <nav
    class="va-navbar position-relative"
    :style="navbarStyle"
  >
    <div
      class="va-navbar__icon-container">
      <slot name="selector"></slot>
    </div>
    <div
      class="va-navbar__logo va-row align--center mr-3">
      <router-link class="" to="/">
        <slot name="logo"/>
      </router-link>
    </div>
    <div class="va-navbar__content va-row">
      <div
        class="va-navbar__center flex offset--lg3 offset--md3 lg5 flex md4 va-row flex-center">
        <slot name="center"></slot>
      </div>
      <div class="flex md5 lg4 va-navbar__actions align--center va-row">
        <slot></slot>
      </div>
    </div>
    <div
      class="va-navbar__shape"
      :style="shapeStyle"
    />
  </nav>
</template>

<script>
import { hex2hsl } from '../../../services/color-functions'

export default {
  name: 'va-navbar',
  computed: {
    navbarStyle () {
      let secondaryRealColorHSL = hex2hsl(this.$themes.secondary)

      // saturation and lightness color components differ from the secondary color for the navbar
      let newSaturation = secondaryRealColorHSL.s - 13
      newSaturation = newSaturation < 0 ? 0 : newSaturation
      secondaryRealColorHSL.s = newSaturation

      let newLightness = secondaryRealColorHSL.l + 15
      newLightness = newLightness > 100 ? 100 : newLightness
      secondaryRealColorHSL.l = newLightness

      return {
        backgroundColor: secondaryRealColorHSL.css,
      }
    },

    shapeStyle () {
      let secondaryRealColorHSL = hex2hsl(this.$themes.secondary)

      // all the 3 color components differ for the shape from the secondary color
      let newHue = secondaryRealColorHSL.h - 1
      newHue = newHue < 0 ? 0 : newHue
      secondaryRealColorHSL.h = newHue

      let newSaturation = secondaryRealColorHSL.s - 11
      newSaturation = newSaturation < 0 ? 0 : newSaturation
      secondaryRealColorHSL.s = newSaturation

      let newLightness = secondaryRealColorHSL.l + 10
      newLightness = newLightness > 100 ? 100 : newLightness
      secondaryRealColorHSL.l = newLightness

      return {
        borderTopColor: secondaryRealColorHSL.css,
      }
    },
  },
}
</script>

<style lang="scss">
@import "../../vuestic-sass/resources/resources";
$top-nav-height: 4.0625rem;
$top-nav-bg: $dark-blue;
$nav-mobile-px: 1rem;
$nav-padding-left: 1rem;
$nav-padding-right: 2rem;
$nav-mobile-py: 1.1875rem;
$nav-mobile-brand-top: 1.5rem;
$nav-shape-bg: #0a43af;
$nav-border-side-width: 3.1875rem;

.va-navbar {
  transition: background-color .3s ease; /* sidebar's bg color transitions as well -> consistency */
  height: $top-nav-height;
  padding-left: $nav-padding-left;
  padding-right: $nav-padding-right;
  background-color: $top-nav-bg;
  display: flex;

  &__content {
    z-index: 1;
    align-items: center;
  }

  &__text {
    color: $lighter-gray;
  }

  &__actions {
    margin-left: auto;
  }

  &__logo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3.5rem;
    width: 9.5rem;
    height: 1rem;
    margin: auto;
    & * {
      max-height: 100%;<commit_msg>fix: mispositioned logo after previous merges<commit_after><template>
  <nav
    class="va-navbar position-relative"
    :style="navbarStyle"
  >
    <div
      class="va-navbar__icon-container">
      <slot name="selector"></slot>
    </div>
    <div
      class="va-navbar__logo va-row align--center mr-3">
      <router-link class="" to="/">
        <slot name="logo"/>
      </router-link>
    </div>
    <div class="va-navbar__content va-row">
      <div
        class="va-navbar__center flex offset--lg3 offset--md3 lg5 flex md4 va-row flex-center">
        <slot name="center"></slot>
      </div>
      <div class="flex md5 lg4 va-navbar__actions align--center va-row">
        <slot></slot>
      </div>
    </div>
    <div
      class="va-navbar__shape"
      :style="shapeStyle"
    />
  </nav>
</template>

<script>
import { hex2hsl } from '../../../services/color-functions'

export default {
  name: 'va-navbar',
  computed: {
    navbarStyle () {
      let secondaryRealColorHSL = hex2hsl(this.$themes.secondary)

      // saturation and lightness color components differ from the secondary color for the navbar
      let newSaturation = secondaryRealColorHSL.s - 13
      newSaturation = newSaturation < 0 ? 0 : newSaturation
      secondaryRealColorHSL.s = newSaturation

      let newLightness = secondaryRealColorHSL.l + 15
      newLightness = newLightness > 100 ? 100 : newLightness
      secondaryRealColorHSL.l = newLightness

      return {
        backgroundColor: secondaryRealColorHSL.css,
      }
    },

    shapeStyle () {
      let secondaryRealColorHSL = hex2hsl(this.$themes.secondary)

      // all the 3 color components differ for the shape from the secondary color
      let newHue = secondaryRealColorHSL.h - 1
      newHue = newHue < 0 ? 0 : newHue
      secondaryRealColorHSL.h = newHue

      let newSaturation = secondaryRealColorHSL.s - 11
      newSaturation = newSaturation < 0 ? 0 : newSaturation
      secondaryRealColorHSL.s = newSaturation

      let newLightness = secondaryRealColorHSL.l + 10
      newLightness = newLightness > 100 ? 100 : newLightness
      secondaryRealColorHSL.l = newLightness

      return {
        borderTopColor: secondaryRealColorHSL.css,
      }
    },
  },
}
</script>

<style lang="scss">
@import "../../vuestic-sass/resources/resources";
$top-nav-height: 4.0625rem;
$top-nav-bg: $dark-blue;
$nav-mobile-px: 1rem;
$nav-padding-left: 1rem;
$nav-padding-right: 2rem;
$nav-mobile-py: 1.1875rem;
$nav-mobile-brand-top: 1.5rem;
$nav-shape-bg: #0a43af;
$nav-border-side-width: 3.1875rem;

.va-navbar {
  transition: background-color .3s ease; /* sidebar's bg color transitions as well -> consistency */
  position: relative;
  height: $top-nav-height;
  padding-left: $nav-padding-left;
  padding-right: $nav-padding-right;
  background-color: $top-nav-bg;
  display: flex;

  &__content {
    z-index: 1;
    align-items: center;
  }

  &__text {
    color: $lighter-gray;
  }

  &__actions {
    margin-left: auto;
  }

  &__logo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 3.5rem;
    width: 9.5rem;
    height: 1rem;
    margin: auto;
    & * {
      max-height: 100%;
{'fraction_non_alphanumeric': 0.12918126791971965, 'fraction_numerical': 0.023255813953488372, 'mean_word_length': 2.6676401869158877, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 63, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1562280', 'n_tokens_mistral': 2260, 'n_tokens_neox': 2085, 'n_words': 468}