Social: Add social network's side menu - refs BT#21101

assets/vue/components/social/SocialSideMenu.vue

@@ -0,0 +1,66 @@
+<template>
+  <BaseCard class="mt-4">
+    <div class="text-center text-lg font-bold mb-4">{{ t("Social Network") }}</div>
+    <ul class="nav nav-pills nav-stacked">
+      <li class="home-icon active">
+        <a href="/social">
+          <i class="mdi mdi-home" aria-hidden="true"></i>
+          {{ t("Social Wall") }}
+        </a>
+      </li>
+      <li class="messages-icon">
+        <a href="resources/messages">
+          <i class="mdi mdi-email" aria-hidden="true"></i>
+          {{ t("Messages") }} <span class="badge badge-warning"></span>
+        </a>
+      </li>
+      <li class="shared-profile-icon">
+        <a href="/account/home">
+          <i class="mdi mdi-account-circle" aria-hidden="true"></i>
+          {{ t("My Profile") }}
+        </a>
+      </li>
+      <li class="friends-icon">
+        <a href="/resources/friends">
+          <i class="mdi mdi-handshake" aria-hidden="true"></i>
+          {{ t("My Friends") }}
+        </a>
+      </li>
+    </ul>
+  </BaseCard>
+</template>
+
+<script setup>
+import BaseCard from "../basecomponents/BaseCard.vue";
+import { useI18n } from "vue-i18n"
+
+const { t } = useI18n()
+</script>
+
+<style scoped>
+.menu-list {
+  list-style: none;
+  padding: 0;
+}
+
+.menu-item {
+  display: block;
+  padding: 0.5rem 1rem;
+  color: #333;
+  text-decoration: none;
+  transition: background-color 0.2s;
+}
+
+.menu-item + .menu-item {
+  margin-top: 1rem; /* Adds space between menu items */
+}
+
+.nav-pills .nav-link {
+  display: flex;
+  align-items: center;
+}
+
+.fa {
+  margin-right: 0.5em;
+}
+</style>

assets/vue/components/userreluser/Layout.vue

@@ -1,13 +1,21 @@
 <template>
-  <h2 v-t="'Friends'" class="mr-auto" />
-
-  <hr />
-
-  <router-view></router-view>
+  <div class="flex flex-col md:flex-row gap-4">
+    <div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex flex-col">
+      <SocialSideMenu />
+    </div>
+    <div class="md:basis-2/3 lg:basis-3/4 2xl:basis-5/6">
+      <h2 v-t="'Friends'" class="mr-auto" />
+      <hr />
+      <router-view></router-view>
+    </div>
+  </div>
 </template>
 
 <script>
+  import SocialSideMenu from "../social/SocialSideMenu.vue";
+
   export default {
-      name: 'UserRelUserLayout'
+      name: 'UserRelUserLayout',
+      components: {SocialSideMenu}
   }
 </script>

assets/vue/views/account/Home.vue

@@ -1,38 +1,35 @@
 <template>
-  <div id="account-home">
-    <div class="flex mb-4">
-      <Avatar
-        :image="user.illustrationUrl + '?w=80&h=80&fit=crop'"
-        class="flex-none mr-2"
-        shape="circle"
-        size="large"
-      />
-      <div class="flex-1">
-        <p class="text-body-1">
-          {{ user.fullName }}
-        </p>
-        <p class="text-caption">
-          {{ user.username }}
-        </p>
-      </div>
+  <div class="flex flex-col md:flex-row gap-4">
+    <div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex flex-col">
+      <SocialSideMenu />
     </div>
+    <div class="md:basis-2/3 lg:basis-3/4 2xl:basis-5/6">
+      <div id="account-home">
+        <div class="flex mb-4">
+          <Avatar
+            :image="user.illustrationUrl + '?w=80&h=80&fit=crop'"
+            class="flex-none mr-2"
+            shape="circle"
+            size="large"
+          />
+          <div class="flex-1">
+            <p class="text-body-1">
+              {{ user.fullName }}
+            </p>
+            <p class="text-caption">
+              {{ user.username }}
+            </p>
+          </div>
+        </div>
+
+        <Button
+          class="p-button-sm mb-4"
+          label="Edit profile"
+          @click="btnEditProfileOnClick"
+        />
 
-    <Button
-      class="p-button-sm mb-4"
-      label="Edit profile"
-      @click="btnEditProfileOnClick"
-    />
-
-    <p>
-      <router-link to="/resources/friends">
-        {{ t("My friends") }}
-      </router-link>
-    </p>
-    <p>
-      <router-link to="/resources/personal_files">
-        {{ t("My files") }}
-      </router-link>
-    </p>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -42,6 +39,7 @@ import { useStore } from "vuex"
 
 import Avatar from "primevue/avatar"
 import { useI18n } from "vue-i18n"
+import SocialSideMenu from "../../components/social/SocialSideMenu.vue";
 
 const store = useStore()
 
@@ -52,4 +50,4 @@ const user = computed(() => store.getters["security/getUser"])
 function btnEditProfileOnClick() {
   window.location = "/account/edit"
 }
-</script>
+</script>

assets/vue/views/message/MessageList.vue

@@ -79,6 +79,8 @@
           @click="showInboxByTag(tag)"
         />
       </div>
+
+      <SocialSideMenu />
     </div>
 
     <div class="md:col-span-4">
@@ -172,6 +174,7 @@ import { MESSAGE_STATUS_DELETED, MESSAGE_TYPE_INBOX } from "../../components/mes
 import { GET_USER_MESSAGE_TAGS } from "../../graphql/queries/MessageTag"
 import { useNotification } from "../../composables/notification"
 import { useMessageRelUserStore } from "../../store/messageRelUserStore"
+import SocialSideMenu from "../../components/social/SocialSideMenu.vue";
 
 const route = useRoute()
 const router = useRouter()

assets/vue/views/social/SocialLayout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col md:flex-row gap-4">
-    <div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex justify-center">
+    <div class="md:basis-1/3 lg:basis-1/4 2xl:basis-1/6 flex flex-col">
       <BaseCard plain>
         <img
           :src="user.illustrationUrl"
@@ -11,6 +11,7 @@
           <div class="text-lg">{{ user.username }}</div>
         </div>
       </BaseCard>
+      <SocialSideMenu />
     </div>
     <div class="md:basis-2/3 lg:basis-3/4 2xl:basis-5/6">
       <SocialNetworkWall />
@@ -24,6 +25,7 @@ import { onMounted, provide, readonly, ref, watch } from "vue"
 import SocialNetworkWall from "./SocialWall.vue"
 import { useRoute } from "vue-router"
 import BaseCard from "../../components/basecomponents/BaseCard.vue"
+import SocialSideMenu from "../../components/social/SocialSideMenu.vue"
 
 const store = useStore()
 const route = useRoute()
@@ -43,4 +45,4 @@ async function loadUser() {
 onMounted(loadUser)
 
 watch(() => route.query, loadUser)
-</script>
+</script>