Side menu interaction added, condition of use moved.

src/views/main/SiteMenu.vue

@@ -1,81 +1,50 @@
 <template>
-
-  <div class="flex flex-column py-4 px-8">
-
-    <div class="flex flex-row self-center pb-4 pt-2">
-
+  <div class="flex flex-col min-h-screen bg-white py-4 px-8">
+    <RouterLink class="nav-button font-weight-bold" to="/join">Aidez-nous</RouterLink>
+    <div class="flex flex-row justify-center pb-4 pt-2">
       <!-- Facebook -->
       <a href="https://www.facebook.com/profile.php?id=61556819217561">
-        <img src="/images/hutopymedia/icons/pink/facebookpink.png"
-             alt="Facebook Logo">
+        <img src="/images/hutopymedia/icons/pink/facebookpink.png" alt="Facebook Logo">
       </a>
-
       <!-- Instagram -->
       <a href="https://www.instagram.com/hutopy.inc/">
-        <img src="/images/hutopymedia/icons/pink/instagrampink.png"
-             alt="Instagram Logo">
+        <img src="/images/hutopymedia/icons/pink/instagrampink.png" alt="Instagram Logo">
       </a>
-
       <!-- X / Twitter -->
       <a href="https://twitter.com/Hutopyinc">
-        <img src="/images/hutopymedia/icons/pink/xpink.png"
-             alt="X Logo">
+        <img src="/images/hutopymedia/icons/pink/xpink.png" alt="X Logo">
       </a>
-
     </div>
-
-    <div class="grid grid-cols-1">
-
-      <RouterLink class="nav-button" to="/join">
-        Aidez-nous
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/helpandcontact">
-        Aide & Contact
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/faq">
-        FAQ
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/guideforcreators">
-        Guide pour les créateurs
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/termsandconditions">
-        Conditions générales
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/contentpolicy">
-        Politique de Contenu
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/about">
-        À Propos
-      </RouterLink>
-
-      <RouterLink class="nav-button" to="/pricing">
-        Frais
-      </RouterLink>
-
+    <div class="absolute  mt-44 text-center extra-small-text p-2">
+      <RouterLink class="nav-button" to="/helpandcontact">Aide & Contact</RouterLink>
+      <RouterLink class="nav-button" to="/faq">FAQ</RouterLink>
+      <RouterLink class="nav-button" to="/guideforcreators">Guide pour les créateurs</RouterLink>
+      <RouterLink class="nav-button" to="/termsandconditions">Conditions générales</RouterLink>
+      <RouterLink class="nav-button" to="/contentpolicy">Politique de Contenu</RouterLink>
+      <RouterLink class="nav-button" to="/about">À Propos</RouterLink>
+      <RouterLink class="nav-button" to="/pricing">Frais</RouterLink>
     </div>
-
   </div>
-
+  
+  
 </template>
 
 <style scoped>
-
 .nav-button {
-  @apply rounded m-1 flex justify-center font-sans
+  @apply rounded flex justify-center font-sans text-gray-800 py-1;
 }
 
 .nav-button:hover {
-  @apply text-purple-800 bg-gray-50
+  @apply text-purple-800 bg-gray-50;
 }
 
 img {
-  @apply m-2 w-10 h-10
+  @apply m-2 w-10 h-10;
 }
 
-</style>
+.extra-small-text {
+  font-size: 0.6rem; /* Ajustez cette valeur selon vos besoins */
+}
+</style>
+<script setup lang="ts">
+</script>