frontend/src/App.vue

@@ -13,18 +13,12 @@
 </script>
 
 <template>
-    <ul style="padding-top:60px"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>
-            <div class="text">Forum</div></a></li>
-    </ul>
   
-    <ul class="horizontal" style="box-shadow: 0px 3px 3px rgb(0, 0, 0);">
+  <table>
+    <tr>
+    <th style="z-index:-1;width:70px;"></th>
+    <th>
+      <ul class="horizontal">
         <li title="Home">
             <a href="#home">
                 <img @click="draw" src="./assets/Clyde.png" style="width: 40px; height: auto; margin-top:4px">
@@ -48,20 +42,55 @@
                 <item  class="fa-solid fa-gear"  style="margin-top: 7px; margin-bottom: 3px;"></item>
             </a></li>
       </ul>
+    </th>
+  </tr>
+  <tr>
+    <td>
+    <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>
+            <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>
 </template>
 
 <style scoped>
+  
+  table {
+    height: 100%;
+    width: 100%;
+    border-spacing: 0;
+  }
+
+  th {
+    height: 61px;
+  }
+  
 	ul.vertical{
 		list-style-type: none;
-		margin: 0;
+		margin-top: 61px;
-		padding: 0;
+    top:0;
+    left:0;
+		padding: 25px 0 0;
 		width: 70px ;
 		background-color: rgb(53, 53, 53);
 		border-right:5px;
 		border-color:black;
 		height: 100%;
 		position: fixed;
-		overflow:auto;
+		overflow:;
 		transition-duration: .3s;
 	}
 
@@ -76,7 +105,6 @@
 		background-color: rgb(112, 112, 112);
 		border-radius:6px;
 		color: white;
-		
 		transform: translate(0px ,1px);
 	}
 
@@ -91,11 +119,14 @@
 	}
 	ul.horizontal {
 		z-index: 101;
+    box-shadow: 0px 3px 3px rgb(0, 0, 0);
 		display: block ;
 		list-style-type:none;
 		margin:0;
 		padding: 0;
 		top: 0; 
+    left:0;
+    
 		position: fixed;
 		height:61px;
 		width: 100%;
@@ -121,7 +152,8 @@
 	  ul.vertical:hover {
 		z-index: 100;
 		width: 250px;
-		border-radius: 40px;
+		border-top-right-radius: 40px;
+    box-shadow: 3px 0px 3px rgb(0, 0, 0);
 		transition-duration: .3s;
 
 	  }

frontend/src/assets/main.css

@@ -1,6 +1,7 @@
 body {
    background-color: rgb(53, 25, 60);
    margin:0;
+   overflow-x:hidden;
 }
 
 .logBoxCenterer {
@@ -34,10 +35,6 @@ body {
   gap: 15px;
 }
 
-.inputBox{
-  width: px;
-  
-}
 
 .inputBox input {
   width:100%;