<commit_before><template>
  <div class="menu-wrapper">
    <section-component header="Create Project">
      <item-component>
        <div>
          <i class="fa fa-plus pointer" @click="createEntry()"></i>
          <input type="text" placeholder="Project name" class="new-entry-input" v-model="newEntry" @keyup.enter="createEntry()" />
        </div>
      </item-component>
    </section-component>
    <section-component header="Projects">
      <item-component v-for="project in projects">
        <div>
          LOL
        </div>
      </item-component>
    </section-component>
  </div>
</template>

<script>
  import Section from '../../Layout/Navbar/Section/Section.vue';
  import Item from '../../Layout/Navbar/Section/Item/Item.vue';
  import ProjectService from '../../../api/project';
  export default {
    name: 'Menu',
    components: {
      'section-component': Section,
      'item-component': Item
    },
    data() {
        return {
            projects: [],
            newEntry: ''
        }
    },
    methods: {
        createEntry() {
            ProjectService(this)
              .create({id: this.newEntry})
              .then((response) => this.$toast({
                message: response.body,
                fade: 400,
                time: 3000,
                borderRadius: 3,
                color: 'white',
                backgroundColor: 'green'
              }))
              .catch((error) => this.$toast({
                message: error.body,
                fade: 400,
                time: 3000,
                borderRadius: 3,
                color: 'white',
                backgroundColor: 'red'
              }));
        }
    }
  };
</script>

<style lang="sass" rel="stylesheet/scss" scoped>
  $input-border-color: #c9c9c9;
  $input-border-color-focus: #969696;

  .menu-wrapper {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
  }
  .fa-plus {
    float: left;
    line-height: 1.65;
  }
  .new-entry-input {
    width: 70%;
    margin-left: 10px;
    color: inherit;
    background-color: inherit;
    height: 0;
    outline: none;
    padding: 10px;
    border: none;
    border-bottom: solid 1px $input-border-color;<commit_msg>style(ProjectMenu): add hover color to new entry button and change input color of new entry to white<commit_after><template>
  <div class="menu-wrapper">
    <section-component header="Create Project">
      <item-component>
        <div>
          <i class="fa fa-plus pointer" @click="createEntry()"></i>
          <input type="text" placeholder="Project name" class="new-entry-input" v-model="newEntry" @keyup.enter="createEntry()" />
        </div>
      </item-component>
    </section-component>
    <section-component header="Projects">
      <item-component v-for="project in projects">
        <div>
          LOL
        </div>
      </item-component>
    </section-component>
  </div>
</template>

<script>
  import Section from '../../Layout/Navbar/Section/Section.vue';
  import Item from '../../Layout/Navbar/Section/Item/Item.vue';
  import ProjectService from '../../../api/project';
  export default {
    name: 'Menu',
    components: {
      'section-component': Section,
      'item-component': Item
    },
    data() {
        return {
            projects: [],
            newEntry: ''
        }
    },
    methods: {
        createEntry() {
            ProjectService(this)
              .create({id: this.newEntry})
              .then((response) => this.$toast({
                message: response.body,
                fade: 400,
                time: 3000,
                borderRadius: 3,
                color: 'white',
                backgroundColor: 'green'
              }))
              .catch((error) => this.$toast({
                message: error.body,
                fade: 400,
                time: 3000,
                borderRadius: 3,
                color: 'white',
                backgroundColor: 'red'
              }));
        }
    }
  };
</script>

<style lang="sass" rel="stylesheet/scss" scoped>
  $input-border-color: #969696;
  $input-border-color-focus: #c9c9c9;
  $new-entry-button-font-color: #c9c9c9;

  .menu-wrapper {
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
  }
  .fa-plus {
    &:hover {
      color: $new-entry-button-font-color;
    }
    float: left;
    line-height: 1.65;
  }
  .new-entry-input {
    width: 70%;
    margin-left: 10px;
    color: white;
    background-color: inherit;
    height: 0;
    outline: none;
    padding: 10px;
    border: none;
    border-bottom: solid 1px $input-border-color;
{'fraction_non_alphanumeric': 0.14822771213748656, 'fraction_numerical': 0.019548872180451128, 'mean_word_length': 1.7648456057007127, 'pattern_counts': {'":': 0, '<': 47, '<?xml version=': 0, '>': 51, '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': '1359473', 'n_tokens_mistral': 1488, 'n_tokens_neox': 1390, 'n_words': 302}