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>
</template>

<script>
export default {
  name: "top-navigation-bar",
  props: ['window', 'currentProject']
}
</script>

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

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

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

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

.top-navigation .name {
  font-weight: bold;
  font-family: "Roboto Condensed";
}
</style>