<commit_before><template>
  <nav
    class="Navbar navbar"
    :class="{ 'is-transparent': transparent }"
    v-click-outside="hide"
  >
    <div class="Navbar__brand navbar-brand">
      <slot name="navbar-brand"></slot>

      <div
        class="Navbar__burger navbar-burger"
        :class="isActiveClass"
        v-if="hasBurger"
        @click="toggle"
      >
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <div
      class="Navbar__menu navbar-menu"
      :class="isActiveClass"
      @click="hide"
    >
      <div class="Navbar__start navbar-start">
        <slot name="navbar-start"></slot>
      </div>

      <div class="Navbar__end navbar-end">
        <slot name="navbar-end"></slot>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'navbar-component',
  props: {
    /**
     * Bulma-specific options.
     */
    transparent: Boolean,
    hasBurger: Boolean,
  },
  data() {
    return {
      isActive: false,
    };
  },
  computed: {
    isActiveClass() {
      return {
        'is-active': this.isActive,
      };
    },
  },
  methods: {
    /**
     * Toggle the navbar menu.
     */
    toggle() {
      this.isActive = !this.isActive;<commit_msg>Refactor Navbar to utilize modifiers computed value<commit_after><template>
  <nav
    class="Navbar navbar"
    :class="modifiers"
    v-click-outside="hide"
  >
    <div class="Navbar__brand navbar-brand">
      <slot name="navbar-brand"></slot>

      <div
        class="Navbar__burger navbar-burger"
        :class="isActiveClass"
        v-if="hasBurger"
        @click="toggle"
      >
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>

    <div
      class="Navbar__menu navbar-menu"
      :class="isActiveClass"
      @click="hide"
    >
      <div class="Navbar__start navbar-start">
        <slot name="navbar-start"></slot>
      </div>

      <div class="Navbar__end navbar-end">
        <slot name="navbar-end"></slot>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'navbar-component',
  props: {
    /**
     * Bulma-specific options.
     */
    isTransparent: Boolean,
    hasBurger: Boolean,
  },
  data() {
    return {
      isActive: false,
    };
  },
  computed: {
    isActiveClass() {
      return {
        'is-active': this.isActive,
      };
    },
    modifiers() {
      return {
        'is-transparent': this.isTransparent,
      };
    },
  },
  methods: {
    /**
     * Toggle the navbar menu.
     */
    toggle() {
      this.isActive = !this.isActive;
{'fraction_non_alphanumeric': 0.16150019135093763, 'fraction_numerical': 0.0, 'mean_word_length': 1.9738339021615472, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 57, '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': '5254614', 'n_tokens_mistral': 903, 'n_tokens_neox': 883, 'n_words': 153}