From 7aefc33c7bb007c0f94dfc1715a41a7a1cc8f597 Mon Sep 17 00:00:00 2001
From: Wawilski <Karpinskiwal@gmail.com>
Date: Sat, 2 Mar 2024 14:46:59 +0100
Subject: [PATCH] Grid setup frontend

---
 frontend/src/App.vue         | 96 +++++++++++++++++++++---------------
 frontend/src/assets/main.css |  1 -
 2 files changed, 57 insertions(+), 40 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7eff7ee..a9d7a8a 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -13,71 +13,89 @@
 </script>
 
 <template>
-  
-  <table>
-    <tr>
-    <th style="z-index:-1;width:70px;"></th>
-    <th>
+  <div class="container">
+
+    <div class="topBar">
       <ul class="horizontal">
         <li title="Home">
             <a href="#home">
                 <img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
-            </a>
-        </li>
+            </a></li>
         <li title="Home">
             <a href="#home">
-                <item class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></item>
-            </a>
-        </li>
+                <div class=" fa-solid fa-house" style="margin-top: 7px; margin-bottom: 3px;"></div>
+            </a></li>
         <li style="float: right;" title="Account">
             <a href="/login">
-                <item class="fa-solid fa-user"  style="margin-top: 7px; margin-bottom: 3px;"></item>
+                <div class="fa-solid fa-user"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
         <li style="float: right;" title="Notifications">
             <a href="#Notifications">
-                <item class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></item>
+                <div class="fa-solid fa-bell"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
         <li style="float: right;" title="Options">
             <a href="#Options">
-                <item  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></item>
+                <div  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></div>
             </a></li>
       </ul>
-    </th>
-  </tr>
-  <tr>
-    <td>
+    </div>
+
+    <div class="leftBar">
     <ul class="vertical">
-        <li style="margin-top: 25px;" ><a href="#Messages"><item class="fa-solid fa-comment" style="font-size: 40px;" ></item>
-            <div class="text">Messages</div> </a></li>
-        <li ><a href="#Notifications"><item class="fa-solid fa-bell" style="font-size: 40px;" ></item>
-            <div class="text">Notifications</div></a></li>
-        <li ><a href="#Schedule"><item class="fa-solid fa-calendar-days" style="font-size: 40px;" ></item>
-            <div class="text">Schedules</div></a></li>
-        <li ><a href="#Forum"><item class="fa-solid fa-envelope" style="font-size: 40px;" ></item>
+        <li style="margin-top: 25px;" >
+          <a href="#Messages">
+            <div class="fa-solid fa-comment" style="font-size: 40px;"></div>
+            <div class="text">Messages</div>
+          </a></li>
+        <li >
+          <a href="#Notifications">
+            <div class="fa-solid fa-bell" style="font-size: 40px;" ></div>
+            <div class="text">Notifications</div>
+          </a></li>
+        <li >
+          <a href="#Schedule">
+            <div class="fa-solid fa-calendar-days" style="font-size: 40px;"></div>
+            <div class="text">Schedules</div>
+          </a></li>
+        <li ><a href="#Forum">
+            <div class="fa-solid fa-envelope" style="font-size: 40px;" ></div>
             <div class="text">Forum</div></a></li>
     </ul>
-    </td>
-    <td>
-      <div style=" position: absolute;  width: 90%;  height:  93%;  display: flex;  align-items: center;  justify-content: center;">
-        <p style="background-color:#f0f;font-size= 90px;"> IL FAUT INSERER UN TRUC ICI </p>
-      </div>
-    </td>
-  </tr>
-  </table>
+
+    </div>
+    <div class="page">
+      <div style="background-color: rgb(239,50,168); margin:50px;">Il FAUDRA INSERER LA PAGE ICI</div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
   
-  table {
-    height: 100%;
-    width: 100%;
-    border-spacing: 0;
+  .container{
+    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];
+    grid-template-areas:
+    "topBar topBar" 
+    "leftBar page";
+    row-gap:0px;
+    column-gap:0px;
   }
 
-  th {
-    height: 61px;
+  .page {
+    grid-area:page;
+    place-self:center;
   }
-  
+
+  .topBar{
+    grid-area:topBar;
+  }
+
+  .leftBar{
+    grid-area:leftBar;
+  }
+
+
 	ul.vertical{
 		list-style-type: none;
 		margin-top: 61px;
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 547806b..c2400cf 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -1,7 +1,6 @@
 body {
    background-color: rgb(53, 25, 60);
    margin:0;
-   overflow-x:hidden;
 }
 
 .logBoxCenterer {