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

<template>
  <div class="side-navigation"
       :class="{
         wide: window.wide,
         narrow: !window.wide,
         active: window.menu ,
         collapsed: collapsed
       }">
    <div class="items">
      <div class="item"
           :class="{active: window.content === 'projects'}"
           @click="show('projects')">
        <img src="@/assets/icons/rocket.svg">
        <span>Projects</span>
      </div>

      <div class="item"
           :class="{active: window.content === 'settings', inactive: !currentProject}"
           @click="ifProjectIsOpened(show, 'settings')">
        <img src="@/assets/icons/gear.svg">
        <span>Settings</span>
      </div>

      <div class="item"
           :class="{active: window.content === 'add_data', inactive: !currentProject}"
           @click="ifProjectIsOpened(show, 'add_data')">
        <img src="@/assets/icons/package-dependencies.svg">
        <span>Add Data</span>
      </div>

      <div class="item"
           :class="{active: window.content === 'view_data', inactive: !currentProject || !mediaAvailable}"
           @click="ifProjectIsOpened(show, 'view_data')">
        <img src="@/assets/icons/file-media.svg">
        <span>View Data</span>
      </div>

      <div class="item"
           :class="{active: window.content === 'about'}"
           @click="show('about')">
        <img src="@/assets/icons/info.svg">
        <span>About PyCS</span>
      </div>

      <div v-if="window.wide"
           class="item"
           :class="{rotate: !collapsed}"
           @click="collapse">
        <img src="@/assets/icons/paper-airplane.svg">
        <span>Collapse</span>
      </div>
    </div>

    <!-- clickable overlay -->
    <div class="overlay"
         v-if="!window.wide"
         @click="closeSelf"/>
  </div>
</template>

<script>
export default {
  name: "side-navigation-bar",
  props: ['window', 'socket', 'status', 'currentProject'],
  computed: {
    collapsed: function() {
      if (!this.status)
        return false;

      return this.status.settings.frontend.collapse;
    },
    mediaAvailable: function() {
      return this.currentProject && 'data' in this.currentProject && Object.keys(this.currentProject.data).length > 0;
    }
  },
  methods: {
    closeSelf: function() {
      this.$emit('close', null);
    },
    ifProjectIsOpened: function(fun, ...args) {
      if (this.currentProject)
        fun.bind(fun)(...args);
    },
    show: function(value) {
      this.window.content = value;
      this.closeSelf();
    },
    collapse: function() {
      this.socket.post('/settings', {
        frontend: {
          collapse: !this.collapsed
        }
      });
      // TODO then / error
    }
  }
}
</script>

<style scoped>
.side-navigation {
  color: whitesmoke;
}

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

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

  display: flex;
  z-index: 1000;
}

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

.items {
  flex-grow: 0;
  height: 100%;
  background-color: #2f2f2f;
  min-width: 66%;
}

.item {
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.item:hover:not(.inactive) {
  background-color: #292929;
}

.item.active:not(.inactive) {
  background-color: #1f1f1f;
}

.item.inactive {
  color: #7f7f7f;
}

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

.item img {
  width: 1.2rem;
  margin-left: 1rem;
  filter: invert(1);
}

.item.rotate img {
  transform: rotate(180deg);
}

.item.inactive img {
  opacity: 0.5;
}

.item span {
  margin: 1rem 4rem 1rem 0.75rem
}

.side-navigation.wide.collapsed .item {
  padding: 1rem 1rem 1rem 0;
}

.side-navigation.wide.collapsed .item span {
  display: none;
}

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