PyCS/webui/src/components/projects/project-main-window.vue

<template>
  <div class="project-main-window">
    <div class="top-navigation">
      <img class="burger"
           src="@/assets/icons/three-bars.svg"
           alt="Menü"
           v-if="!wide"
           :class="{ rotation: menu }"
           @click="invertMenu">

      <div class="name">
        {{ project.name }}
      </div>
    </div>

    <div class="bottom">
      <div class="side-navigation"
           :class="{ wide: wide, narrow: !wide, active: menu }">
        <div class="item"
             :class="{active: activeContent === 'settings'}"
             @click="activeContent = 'settings'">
          Project Settings
        </div>

        <div class="item" @click="socket.set(projectPath, 'save')">
          Close
        </div>
      </div>

      <div class="content">
        <project-main-window-settings v-if="activeContent === 'settings'"
                                      :status="status" :socket="socket"/>
      </div>
    </div>
  </div>
</template>

<script>
import ProjectMainWindowSettings from "@/components/projects/project-main-window-settings";

export default {
  name: "project-main-window",
  components: {ProjectMainWindowSettings},
  props: ['status', 'socket'],
  data: function() {
    return {
      wide: true,
      menu: false,
      activeContent: 'settings'
    }
  },
  computed: {
    project: function() {
      return this.status.projects.filter(x => (x.status === 'open'))[0];
    },
    projectPath: function() {
      for (let i = 0; i < this.status.projects.length; i++)
        if (this.status.projects[i].status === 'open')
          return 'projects/' + i + '/status';

      return null;
    }
  },
  methods: {
    resize: function() {
      this.wide = (document.body.offsetWidth > 1024);
    },
    invertMenu: function() {
      this.menu = !this.menu;
    }
  },
  created: function() {
    window.addEventListener('resize', this.resize);
    this.resize();
  },
  destroyed: function() {
    window.removeEventListener('resize', this.resize);
  }
}
</script>

<style scoped>
.project-main-window {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
}

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

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

.top-navigation .burger {
  transition: transform 0.5s;
  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";
}

.bottom {
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  position: relative;
}

.side-navigation {
  background-color: #2f2f2f;
  color: whitesmoke;
}

.side-navigation.wide {
  flex-grow: 0;
  height: 100%;
}

.side-navigation.narrow {
  width: 85vw;
  left: -85vw;
  position: absolute;
  top: 0;
  bottom: 0;
  transition: 0.3s ease-out;
}

.side-navigation.narrow.active {
  left: 0;
}

.side-navigation .item {
  padding: 1rem 3rem 1rem 1rem;
  cursor: pointer;
}

.side-navigation .item:hover {
  background-color: #292929;
}

.side-navigation .item.active {
  background-color: #1f1f1f;
}

.side-navigation .item:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.content {
  flex-grow: 1;
}
</style>