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">
      <!-- project settings -->
      <div class="item"
           :class="{active: window.content === 'settings', inactive: !projectPath}"
           @click="ifProjectIsOpened(show, 'settings')">
        Project Settings
      </div>

      <div class="item"
           :class="{inactive: !projectPath}"
           @click="close">
        Close
      </div>

      <div v-if="window.wide"
           class="item"
           @click="collapse">
        Collapse
      </div>
    </div>

    <!-- clickable overlay -->
    <div class="overlay"
         v-if="!window.wide"
         @click="$emit('close', null);"/>
  </div>
</template>

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

      return this.status.settings.frontend.collapse;
    }
  },
  methods: {
    ifProjectIsOpened: function(fun, ...args) {
      if (this.projectPath)
        fun.bind(fun)(...args);
    },
    show: function(value) {
      this.window.content = value;
      this.$emit('close', null);
    },
    close: function() {
      if (this.projectPath) {
        this.socket.set(this.projectPath + '/status', 'save');
        this.$emit('close', null);
      }
    },
    collapse: function() {
      this.socket.set('settings/frontend/collapse', !this.collapsed);
    }
  }
}
</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;
}

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

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

.item {
  padding: 1rem 4rem 1rem 1rem;
  cursor: pointer;
  white-space: nowrap;
}

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

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

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

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

.side-navigation.wide.collapsed .item {
  width: 10px;
}

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