Merge pull request #79 from VitorCarvalho67/dev

Create empresa dashboard

client/src/components/empresa/AsideDashboard.vue

@@ -0,0 +1,126 @@
+<template>
+    <aside :class="['aside-dashboard', view, { fixed: isFixed && view === 'yeah' }]">
+        <div>
+            <ul>
+                <li :class="getClassForPage('home')">
+                    <router-link to="/funcionario">
+                        <img :src="icons.home">
+                        <p v-if="showPs">Home</p>
+                    </router-link>
+                </li>
+                <li>
+                    <router-link to="/funcionario/xxxxxxxxx">
+                        <img :src="icons.form">
+                        <p v-if="showPs">xxxxxxxx</p>
+                    </router-link>
+                </li>
+            </ul>
+        </div>
+        <button @click="changePsVisualization">
+            <img :src="icons.angulo" alt="<">
+        </button>
+    </aside>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+
+// icons
+import homeIcon from '../../assets/icons/casa.png';
+import searchIcon from '../../assets/icons/procurar.png';
+import linkIcon from '../../assets/icons/link.png';
+import sendIcon from '../../assets/icons/aviao-de-papel.png';
+import jobIcon from '../../assets/icons/estagio.png';
+import rankingIcon from '../../assets/icons/trofeu.png';
+import anguloIcon from '../../assets/icons/angulo.png';
+import userIcon from '../../assets/icons/user.png';
+import configIcon from '../../assets/icons/config.png';
+import formIcon from '../../assets/icons/forma.png';
+import tablesIcon from '../../assets/icons/grafico-horizontal-simples.png';
+
+
+export default defineComponent({
+    name: 'AsideDashboard',
+    emits: ['close'],
+    props: {
+        pageName: {
+            type: String,
+            required: true
+        }
+    },
+    data() {
+        return {
+            icons: {
+                home: homeIcon,
+                search: searchIcon,
+                link: linkIcon,
+                send: sendIcon,
+                job: jobIcon,
+                ranking: rankingIcon,
+                angulo: anguloIcon,
+                user: userIcon,
+                config: configIcon,
+                form: formIcon,
+                table: tablesIcon
+            },
+            showPs: true,
+            view: 'yeah',
+            isFixed: false
+        }
+    },
+    methods: {
+        getClassForPage(pageLoad) {
+            return this.pageName === pageLoad ? "page" : "";
+        },
+        changePsVisualization() {
+            this.showPs = !this.showPs;
+            this.view = this.showPs ? 'yeah' : 'none';
+            localStorage.setItem('asideDashboardState', JSON.stringify({
+                showPs: this.showPs,
+                view: this.view
+            }));
+            this.updateFixedState();
+        },
+        loadStateFromStorage() {
+            const state = localStorage.getItem('asideDashboardState');
+            if (state) {
+                const parsedState = JSON.parse(state);
+                this.showPs = parsedState.showPs;
+                this.view = parsedState.view;
+            }
+        },
+        checkScreenWidth() {
+            if (window.innerWidth < 1000) {
+                this.showPs = false;
+                this.view = 'none';
+                this.updateFixedState();
+            } else {
+                this.isFixed = false;
+                if (this.showPs) {
+                    this.view = 'yeah';
+                }
+            }
+            localStorage.setItem('asideDashboardState', JSON.stringify({
+                showPs: this.showPs,
+                view: this.view
+            }));
+        },
+        updateFixedState() {
+            this.isFixed = (this.view === 'yeah' && window.innerWidth < 1000);
+        }
+    },
+    mounted() {
+        this.loadStateFromStorage();
+        this.checkScreenWidth();
+        window.addEventListener('resize', this.checkScreenWidth);
+    },
+    beforeUnmount() {
+        window.removeEventListener('resize', this.checkScreenWidth);
+    }
+});
+</script>
+
+<style lang="scss" scoped>
+@import "../../scss/layouts/aluno/_asideDashboard.scss";
+</style>

client/src/views/empresa/Dashboard.vue

@@ -2,39 +2,42 @@
     <Header />
     <div id="app">
         <main>
+            <AsideDashboard pageName='home' />
             <div class="content">
-                <div class="box" id="box1">
-                    <H1>Bem-vinda empresa!</H1>
-                    <button @click="logout">Logout</button>
-                </div>
+                <h1>Bem-vindo à plataforma!</h1>
             </div>
         </main>
     </div>
     <Footer />
 </template>
 
 <script>
-import Header from "../../components/empresa/Header.vue";
-import Footer from "../../components/Footer.vue";
-
-import router from "../../router/index.js";
-import { mixinEmpresa } from "../../util/authMixins.js";
+import Header from '../../components/empresa/Header.vue';
+import Footer from '../../components/Footer.vue';
+import AsideDashboard from '../../components/empresa/AsideDashboard.vue';
+import router from '../../router/index.js'
+import { mixinEmpresa } from '../../util/authMixins.js';
 
 export default {
-    name: "Empresa",
+    name: 'Empresa',
     components: {
         Header,
-        Footer,
+        AsideDashboard,
+        Footer
     },
     data() {
-        return {};
+        return {
+
+        }
+    },
+    methods: {
+
     },
-    methods: {},
     mixins: [mixinEmpresa],
     async created() {
         this.getToken();
-    },
-};
+    }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -43,7 +46,7 @@ export default {
 #app {
     display: flex;
     flex-direction: column;
-    height: 100vh;
+    min-height: calc(100vh - 80px);
 
     main {
         display: flex;
@@ -62,4 +65,4 @@ export default {
         }
     }
 }
-</style>
+</style>