PyCS/webui/src/components/window/top-navigation-bar.vue

<template>
  <div class="top-navigation">
    <img class="burger"
         src="@/assets/icons/three-bars.svg"
         alt="Menü"
         v-if="!window.wide"
         :class="{ rotation: window.menu }"
         @click="$emit('side', null)">

    <div class="name">
      {{ currentProject ? currentProject.name : 'PyCS' }}
    </div>

    <div class="jobs" v-if="activeJobCount > 0">
      {{ activeJobCount }} {{ activeJobCount === 1 ? 'job' : 'jobs' }} running
    </div>
  </div>
</template>

<script>
export default {
  name: "top-navigation-bar",
  props: ['window', 'currentProject'],
  computed: {
    activeJobCount: function() {
      if (!this.currentProject)
        return 0;

      return Object.keys(this.currentProject.jobs)
          .map(key => this.currentProject.jobs[key])
          .filter(job => !job.finished)
          .length;
    }
  }
}
</script>

<style scoped>
.top-navigation {
  background-color: #3f3f3f;
  color: whitesmoke;
  display: flex;
  padding: 1rem;

  flex-direction: row;
  align-items: center;
}

.burger {
  transition: transform 0.6s;
  filter: invert(1);
  width: 2rem;
  margin-right: 0.75rem;
}

.burger.rotation {
  transform: rotate(90deg);
}

.name {
  font-weight: bold;
  font-family: "Roboto Condensed";
  flex-grow: 1;

  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
}

.jobs {
  font-family: "Roboto Condensed";
  white-space: nowrap;
}
</style>