Initial commit

resources/js/components/VueFileManagerComponents/Sidebar/UserHeadline.vue

@@ -0,0 +1,211 @@
+<template>
+    <div class="user-headline-wrapper" v-if="app">
+        <div class="user-headline" @click="openMenu">
+            <div class="user-avatar">
+                <img :src="app.user.avatar" :alt="app.user.name">
+            </div>
+            <div class="user-name">
+                <b class="name">{{ app.user.name }}</b>
+                <span class="email">{{ app.user.email }}</span>
+            </div>
+        </div>
+        <transition name="user-menu">
+            <div class="user-menu" v-if="isOpenedMenu">
+                <ul class="menu-options" id="menu-options-list" @click="closeMenu">
+                    <li class="menu-option" @click="$goToView('user-settings')">Profile Settings</li>
+                    <li class="menu-option" @click="$store.dispatch('logOut')">Log Out</li>
+                </ul>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'UserHeadline',
+        computed: {
+            ...mapGetters(['app', 'appSize']),
+            isSmallAppSize() {
+                return this.appSize === 'small'
+            }
+        },
+        data() {
+            return {
+                isOpenedMenu: false,
+            }
+        },
+        methods: {
+            openMenu() {
+
+                // If is mobile, then go to user settings page, else, open menu
+                if ( this.isSmallAppSize ) {
+
+                    this.$goToView('user-settings')
+                } else {
+
+                    this.isOpenedMenu = !this.isOpenedMenu
+                }
+
+            },
+            closeMenu() {
+                this.isOpenedMenu = !this.isOpenedMenu
+            },
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/app.scss";
+
+    .user-headline-wrapper {
+        position: relative;
+    }
+
+    .user-headline {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        margin: 15px;
+        user-select: none;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        cursor: pointer;
+        @include transition(150ms);
+
+        &:hover {
+            //background: rgba($theme, .1);
+        }
+
+        &:active {
+            transform: scale(0.95);
+        }
+    }
+
+    .user-name {
+
+        .name, .email {
+            white-space: nowrap;
+            width: 180px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .name {
+            display: block;
+            @include font-size(17);
+            line-height: 1;
+        }
+
+        .email {
+            @include font-size(13);
+            color: $light_text;
+            display: block;
+            margin-top: 2px;
+        }
+    }
+
+    .user-avatar {
+        line-height: 0;
+        margin-right: 15px;
+
+        img {
+            width: 50px;
+            height: 50px;
+            object-fit: cover;
+            border-radius: 8px;
+        }
+    }
+
+    .user-menu {
+        position: absolute;
+        top: 75px;
+        left: 0;
+        right: 0;
+        margin: 15px;
+        z-index: 9;
+    }
+
+    .menu-options {
+        list-style: none;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        box-shadow: $shadow;
+        background: white;
+        border-radius: 8px;
+
+        .menu-option {
+            font-weight: 600;
+            @include font-size(15);
+            padding: 15px 30px;
+            cursor: pointer;
+            width: 100%;
+
+            &:hover {
+                background: $light_background;
+                color: $theme;
+            }
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+
+        .user-headline {
+            position: relative;
+            margin-bottom: 40px;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        #sidebar {
+            background: $dark_mode_background;
+        }
+
+        .user-headline {
+            background: transparent;
+
+            &:hover {
+                background: transparent;
+            }
+        }
+
+        .user-name {
+
+            .email {
+                color: $dark_mode_text_secondary;
+            }
+        }
+
+        .menu-options {
+            background: $dark_mode_background;
+
+            .menu-option {
+                &:hover {
+                    background: $dark_mode_foreground;
+                }
+            }
+        }
+    }
+
+    // Transition
+    .user-menu-enter-active {
+        transition: all 150ms ease;
+    }
+
+    .user-menu-leave-active {
+        transition: all 150ms ease;
+    }
+
+    .user-menu-enter,
+    .user-menu-leave-to {
+        opacity: 0;
+        transform: translateY(-35%);
+    }
+
+</style>