userland/src/App.vue

<!--
  Copyright 2019 Hackware SpA <human@hackware.cl>
  This file is part of "Hackware Userland" and licensed under the terms
  of the GNU Affero General Public License version 3, or (at your option)
  a later version. You should have received a copy of this license along
  with the software. If not, see <https://www.gnu.org/licenses/>.
-->

<template>
  <div id="app">
    <button
      v-if="$auth.isLoggedIn()"
      id="toggle_sidebar"
      :class="{ 'show-sidebar': showSidebar }"
      @click="toggleSidebar"
    >
      <i class="fas fa-bars" />
    </button>
    <nav
      v-if="$auth.isLoggedIn()"
      id="sidebar"
      :class="{ 'show-sidebar': showSidebar }"
    >
      <div id="user_info">
        <img
          alt="User avatar"
          src="@/assets/avatar.png"
        >
        <h5>{{ $auth.user.display_name || $auth.user.email }}</h5>
      </div>
      <ul id="nav_menu">
        <li>
          <router-link :to="{ name: 'wallet' }">
            Mi billetera
            <i class="fas fa-wallet" />
          </router-link>
        </li>
        <li>
          <router-link :to="{ name: 'transactions' }">
            Mis transacciones
            <i class="fas fa-history" />
          </router-link>
        </li>
        <li>
          <router-link :to="{ name: 'add-funds-payment' }">
            Añadir fondos
            <i class="fas fa-plus-square" />
          </router-link>
        </li>
      </ul>
      <div class="flex-spacer" />
      <ul id="sub_menu">
        <li>
          <a
            id="userland_sourcecode"
            href="https://git.hackware.cl/userland"
            target="_blank"
            title="¡Hackware Userland es software libre!"
          >
            <i class="fas fa-code" />
          </a>
        </li>
        <li>
          <form @submit.prevent="submitLogout">
            <button
              id="btnLogout"
              type="submit"
              title="Salir"
            >
              <i class="fas fa-sign-out-alt" />
            </button>
          </form>
        </li>
      </ul>
    </nav>
    <main :class="{ 'show-sidebar': showSidebar }">
      <router-view
        class="container-fluid"
        @login="initSidebar"
      />
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showSidebar: false,
    };
  },
  mounted() {
    this.initSidebar();
  },
  methods: {
    initSidebar() {
      setTimeout(() => { // FIXME: Should trigger after all components have been loaded
        if (!this.isSmallScreen() && this.$auth.isLoggedIn()) {
          this.showSidebar = true;
        } else {
          this.showSidebar = false;
        }
      }, 500);
    },
    isSmallScreen() {
      const minWidth = getComputedStyle(document.body)
        .getPropertyValue('--breakpoint-sm')
        .match(/\d+/)[0];
      return window.screen.width < minWidth;
    },
    toggleSidebar() {
      this.showSidebar = !this.showSidebar;
    },
    submitLogout() {
      this.showSidebar = false;
      this.$fetcher.hawesePost('/auth/logout')
        .then(() => {
          this.$auth.logout();
          this.$router.push({ name: 'login-by-password' });
        });
    },
  },
};
</script>

<style lang="scss">
@import "assets/bootstrap/custom";

$sidebar-width: 18rem;

nav#sidebar {
  &.show-sidebar {
    transform: translateX($sidebar-width);
  }

  position: fixed;
  display: flex;
  flex-direction: column;
  transition: all 300ms ease;
  left: -$sidebar-width;

  height: 100%;
  overflow: hidden auto;
  width: $sidebar-width;
  background-color: var(--dark);
  color: var(--light);
  text-align: right;

  > #user_info {
    @extend .p-3;
    @extend .pt-5;

    color: var(--light);

    > img {
      @extend .mb-2;
      object-fit: cover;
      width: 100px;
    }
  }

  > ul#nav_menu {
    @extend .nav;
    @extend .flex-column;

    &:hover > li > a.router-link-active {
      background-color: transparent;
    }

    > li {
      @extend .nav-item;

      > a {
        @extend .nav-link;
        transition: all 300ms ease;
        color: var(--gray);
        padding: ($spacer * 0.75) $spacer;

        > i.fas, > i.fab {
          margin-left: map-get($spacers, 2);
        }

        &:hover, &.router-link-active, &.router-link-active:hover {
          background-color: $black;
          color: var(--light);
        }
      }
    }
  }

  > .flex-spacer {
    flex-grow: 1;
  }

  > ul#sub_menu {
    @extend .nav;
    @extend .justify-content-center;
    > li {
      @extend .nav-item;
      > a, > form > button#btnLogout {
        @extend .nav-link;
        color: var(--gray);
        &:hover {
          color: var(--light);
        }
      }
    }

    button#btnLogout {
      @extend .btn;
      @extend .btn-link;
    }
  }
}

button#toggle_sidebar {
  @extend .btn;
  @extend .btn-sm;
  @extend .btn-dark;
  color: var(--light);
  width: 30px;
  left: 0;
  position: absolute;
  opacity: .2;
  transition: all 300ms ease;
  z-index: 100;
  &:hover {
    opacity: 1;
  }

  &.show-sidebar {
    left: $sidebar-width;
  }
}

main {
  transition: all 300ms ease;

  @include media-breakpoint-down(xs) {
    min-width: 100%;
  }

  &.show-sidebar {
    margin-left: $sidebar-width;
  }
}
</style>