123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248 |
- <!--
- 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>
|