Aluno message pages and routes

Author: Daniel-Alvarenga

client/src/assets/icons/aviao-de-papel2.png

@@ -1,44 +1,60 @@
 <template>
-    <aside>
+    <aside :class="view">
         <div>
             <ul>
                 <li :class="getClassForPage('home')">
-                    <img :src="icons.home">
-                    <router-link to="/aluno">Página inicial</router-link>
+                    <router-link to="/aluno">
+                        <img :src="icons.home">
+                        <p v-if="showPs">Página inicial</p>
+                    </router-link>
                 </li>
                 <li :class="getClassForPage('profile')">
-                    <img :src="icons.user">
-                    <router-link to="/aluno/me">Meu perfil</router-link>
+                    <router-link to="/aluno/me">
+                        <img :src="icons.user">
+                        <p v-if="showPs">Meu perfil</p>
+                    </router-link>
                 </li>
                 <li :class="getClassForPage('pesquisa')">
-                    <img :src="icons.search">
-                    <router-link to="">Pesquisa</router-link>
+                    <router-link to="">
+                        <img :src="icons.search">
+                        <p v-if="showPs">Pesquisa</p>
+                    </router-link>
                 </li>
                 <li :class="getClassForPage('rede')">
-                    <img :src="icons.link">
-                    <router-link to="/rede">Meus vínculos</router-link>
+                    <router-link to="/rede">
+                        <img :src="icons.link">
+                        <p v-if="showPs">Meus vínculos</p>
+                    </router-link>
                 </li>
-                <li :class="getClassForPage('messsage')">
-                    <img :src="icons.send">
-                    <router-link to="">Mensagens</router-link>
+                <li :class="getClassForPage('message')">
+                    <router-link to="/mensagens">
+                        <img :src="icons.send">
+                        <p v-if="showPs">Mensagens</p>
+                    </router-link>
                 </li>
                 <li :class="getClassForPage('estagios')">
-                    <img :src="icons.job">
-                    <router-link to="">Estágios</router-link>
+                    <router-link to="">
+                        <img :src="icons.job">
+                        <p v-if="showPs">Estágios</p>
+                    </router-link>
                 </li>
                 <li :class="getClassForPage('rankings')">
-                    <img :src="icons.ranking">
-                    <router-link to="">Rankings</router-link>
+                    <router-link to="">
+                        <img :src="icons.ranking">
+                        <p v-if="showPs">Rankings</p>
+                    </router-link>
                 </li>
             </ul>
             <ul>
                 <li :class="getClassForPage('config')">
-                    <img :src="icons.config">
-                    <router-link to="/config">Configurações</router-link>
+                    <router-link to="/config">
+                        <img :src="icons.config">
+                        <p v-if="showPs">Configurações</p>
+                    </router-link>
                 </li>
             </ul>
         </div>
-        <button>
+        <button @click="changePsVisualization">
             <img :src="icons.angulo" alt="<">
         </button>
     </aside>
@@ -80,17 +96,24 @@ export default defineComponent({
                 angulo: anguloIcon,
                 user: userIcon,
                 config: configIcon
-            }
+            },
+            showPs: true,
+            view: 'yeah'
         }
     },
     methods: {
         getClassForPage(pageLoad) {
             return this.pageName === pageLoad ? "page" : "";
+        },
+        changePsVisualization(){
+            this.showPs = !this.showPs;
+            this.view =  (this.view == 'yeah')? 'none' : "yeah"
+            
         }
     }
 });
 </script>
 
 <style lang="scss" scoped>
 @import "../../scss/layouts/aluno/_asideDashboard.scss";
-</style>
+</style>

client/src/assets/icons/user2.png

@@ -8,6 +8,8 @@ import PerfilAluno from '../../views/aluno/Profile.vue';
 import Complete from '../../views/aluno/Complete.vue';
 import Rede from '../../views/aluno/Rede.vue';
 import ConfigAluno from '../../views/aluno/Config.vue';
+import Messages from '../../views/aluno/Messages.vue';  
+import ChatAluno from '../../views/aluno/Message.vue';  
 
 import {
     isRecoveringAluno,
@@ -81,6 +83,22 @@ export const alunoRoutes = [
             (await isAuthAluno()) ? next() : next("/login");
         }
     },
+    {
+        path: "/mensagens",
+        name: "Mensagens",
+        component: Messages,
+        beforeEnter: async (to, from, next) => {
+            (await isAuthAluno()) ? next() : next("/login");
+        }
+    },
+    {
+        path: "/mensagens/:identifier/:email",
+        name: "Mensagem",
+        component: ChatAluno,
+        beforeEnter: async (to, from, next) => {
+            (await isAuthAluno()) ? next() : next("/login");
+        }
+    },
     {
         path: "/config",
         name: "Config",

client/src/components/aluno/AsideDashboard.vue

@@ -27,7 +27,6 @@ aside {
                     height: 20px;
                     width: 20px;
                     object-fit: cover;
-                    margin-right: 10px;
                     filter: invert(100%);
                 }
 
@@ -40,6 +39,10 @@ aside {
                     @include flex(row, flex-start, center);
                     color: $font-color-dark-2;
                     @include font-inter(200);
+ 
+                    p{
+                        margin-left: 10px;
+                    }
                 }
 
                 &:hover {
@@ -50,15 +53,16 @@ aside {
                     background-color: $secondary-color-dark;
                 }
             }
-
         }
     }
+
     button {
         height: 100%;
         width: 30px;
         background-color: transparent;
         border: none;
         color: $font-color-dark;
+        transition: 0s;
 
         img {
             height: 25px;
@@ -69,3 +73,13 @@ aside {
         }
     }
 }
+
+.none{
+    width: auto;
+
+    button {
+        img {
+            transform: rotateY(180deg);
+        }
+    }
+}