msg page with basic layouyt

frontend/src/App.vue

@@ -86,19 +86,18 @@ window.addEventListener('hashchange', () => {
     </ul>
     </div>
     <div class="page">
-      <div style=" margin:50px;">
         <Suspense>
-        
 				<component :is="currentView" />
         </Suspense>
     </div>
   </div>
-  </div>
 </template>
 
 <style scoped>
   
   .container{
+			height: 100%;
+			width: 100%;
     display:grid;
     grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol];
     grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow];
@@ -111,6 +110,8 @@ window.addEventListener('hashchange', () => {
 
   .page {
     grid-area:page;
+		height: 100%;
+		width: 100%;
     place-self:center;
   }
 

frontend/src/Apps/Msg.vue

@@ -0,0 +1,37 @@
+<script setup>
+	import { ref } from 'vue'
+
+</script>
+
+<template>
+	<div id="msg">
+		<div id="discList"></div>
+		<div id="discussion"></div>
+	</div>
+</template>
+
+<style scoped>
+
+div#msg{
+	position: relative;
+	width: 100%;
+	height: 100%;
+
+	display: grid;
+	grid-template-columns: 20% auto;
+}
+
+div#discList{
+	margin: 30px 0 30px 30px;
+	background-color: rgba(255, 255, 255, 0.05);
+	border-radius: 10px;
+
+}
+
+div#discussion{
+	margin: 30px;
+	background-color: rgba(255, 255, 255, 0.05);
+	border-radius: 10px;
+}
+
+</style>

frontend/src/assets/main.css

@@ -1,4 +1,11 @@
 body {
    background-color: rgb(53, 25, 60);
    margin:0;
+   width: 100vw;
+   height: 100vh;
+}
+
+#app {
+   width: 100%;
+   height: 100%;
 }

frontend/src/rest/apps.js

@@ -9,6 +9,7 @@ import Profil from "@/Apps/Profil.vue"
 import Courses from "@/Apps/ManageCourses.vue"
 import Users from "@/Apps/UsersList.vue"
 import Students from "@/Apps/StudentsList.vue"
+import Msg from "@/Apps/Msg.vue"
 
 const apps = {
 		'/login': LoginPage,
@@ -17,6 +18,7 @@ const apps = {
 		'/manage-courses' : Courses,
 		'/users-list' : Users,
 		'/students-list' : Students,
+		'/msg' : Msg,
 }
 
 const appsList = {