Initial commit

resources/js/components/VueFileManagerComponents/Others/PageHeader.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class="page-header" @click="goHome">
+        <div class="icon" v-if="isSmallAppSize">
+            <FontAwesomeIcon icon="chevron-left" />
+        </div>
+        <div class="content">
+            <h1 class="title">{{ title }}</h1>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
+
+    export default {
+        name: 'PageHeader',
+        props: [
+            'title', 'description'
+        ],
+        computed: {
+            ...mapGetters(['appSize']),
+            isSmallAppSize() {
+                return this.appSize === 'small'
+            }
+        },
+        methods: {
+            goHome() {
+                if (this.isSmallAppSize) events.$emit('show:sidebar')
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import "@assets/app.scss";
+
+    .page-header {
+        display: flex;
+        align-items: center;
+        padding: 20px 30px;
+        background: white;
+        position: sticky;
+        top: 0;
+        z-index: 9;
+
+        .title {
+            @include font-size(22);
+            font-weight: 700;
+        }
+
+        .icon {
+            @include font-size(16);
+            margin-right: 15px;
+            cursor: pointer;
+        }
+    }
+
+    @media only screen and (max-width: 960px) {
+
+        .page-header {
+            padding: 20px 15px;
+
+            .title {
+                @include font-size(18);
+            }
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .page-header {
+            background: $dark_mode_background;
+
+            .icon path {
+                fill: $theme;
+            }
+        }
+    }
+</style>