social-media/frontend/src/views/main/SideBar.vue

<script setup>
import {useI18n} from "vue-i18n";
import {useAuthStore} from "@/stores/authStore.js";
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
import {useUserProfileStore} from "@/stores/userProfileStore.js";
import {useLanguageStore} from "@/stores/languageStore.js";

const {locale, t} = useI18n();
const languageStore = useLanguageStore();

const userProfileStore = useUserProfileStore();
const creatorProfileStore = useCreatorProfileStore();
const authStore = useAuthStore();

function toggleLanguage() {
  const languages = ['fr', 'en', 'es'];
  const currentIndex = languages.indexOf(locale.value);
  const nextIndex = (currentIndex + 1) % languages.length;
  languageStore.setLocale(languages[nextIndex]);
}
</script>

<template>
  <nav class="side-container">

    <div class="side-logo">
      <router-link to="/@hutopy">
        <!-- Show full logo on medium and larger screens -->
        <img src="/images/hutopy-logo.png"
             alt="hutopy logo"
             class="hidden md:block"
             height="50">
        <!-- Show icon version on small screens -->
        <img alt="hutopy icon"
             class="block md:hidden"
             height="50"
             src="/images/hutopy-icon.png"
             width="50">
      </router-link>
    </div>

    <div class="flex-grow flex items-center lg:items-start lg:justify-center p-4">  
    </div>

    <div class="side-menu">

      <div class="side-menu-portrait">
        <img :src="userProfileStore.portraitUrl"
             alt="Profile Image"
             referrerpolicy="no-referrer"
             class="rounded-full"
             width="32"
             height="32">
        <span class="profile-label">{{ userProfileStore.alias }}</span>
      </div>

      <div class="side-menu-items">

        <template v-if="authStore.isAuthenticated">
          <router-link v-if="creatorProfileStore.hasCreator" :to="`/@${creatorProfileStore.creator.slug}`">
            <button class="menu-item-action">
              <i class="mdi mdi-file-account-outline"></i>
              <span class="label">{{ t('sidebar.myPage') }}</span>
            </button>
          </router-link>
          <router-link v-else to="/create-creator">
            <button class="menu-item-action">
              <i class="mdi mdi-file-account-outline"></i>
              <span class="label">{{ t('sidebar.myPage') }}</span>
            </button>
          </router-link>
        </template>

        <template v-if="authStore.isAuthenticated">
          <router-link to="/profile">
            <button class="menu-item-action">
              <i class="mdi mdi-account"></i>
              <span class="label">{{ t('sidebar.myProfile') }}</span>
            </button>
          </router-link>
        </template>

        <button class="menu-item-action"
                @click="toggleLanguage">
          <i class="mdi mdi-translate-variant"></i>
          <span class="label">{{ locale }}</span>
        </button>

        <template v-if="!authStore.isAuthenticated">
          <router-link to="/login">
            <button class="menu-item-action">
              <i class="mdi mdi-login"></i>
              <span class="label">{{ t('sidebar.signIn') }}</span>
            </button>
          </router-link>
        </template>
        <div v-else>
          <button class="menu-item-action"
                  @click="authStore.logout">
            <i class="mdi mdi-logout"></i>
            <span class="label">{{ t('sidebar.signOut') }}</span>
          </button>
        </div>

      </div>
    </div>
  </nav>
</template>

<style scoped>

.side-container {
  @apply flex;
  @apply lg:flex-col lg:w-64 lg:max-w-64;
  @apply h-16 lg:h-screen;
}

.side-logo {
  @apply flex items-center justify-center;
  @apply mx-6 lg:mx-0 lg:mt-2;
}

.side-menu {
  @apply flex gap-4 p-4;
  @apply items-center lg:items-stretch;
  @apply flex-row-reverse lg:flex-col;
}

.side-menu-portrait {
  @apply flex items-center justify-start;
}

.side-menu-items {
  @apply flex;
  @apply flex-row lg:flex-col;
  @apply lg:gap-2;
  @apply lg:w-full;
}

.profile-label {
  @apply mx-4 text-lg font-sans capitalize;
  @apply font-semibold;
  @apply hidden lg:inline
}

.label {
  @apply text-nowrap;
  @apply mx-2;
  @apply hidden lg:inline
}

.menu-item-action {
  /* FIXME: The hover value is not semantically correct */
  @apply bg-hBackground hover:bg-hSurface;
  @apply capitalize;
  @apply flex items-center gap-4 py-2 rounded;
  @apply mx-0;
  @apply lg:px-2;
  @apply w-10 h-10 justify-center lg:w-full lg:h-auto lg:justify-normal;
}

</style>

<i18n>
{
  "en": {
    "sidebar": {
      "myPage": "My Page",
      "myProfile": "My Profile",
      "signIn": "Sign In",
      "signOut": "Sign Out"
    }
  },
  "fr": {
    "sidebar": {
      "myPage": "Ma Page",
      "myProfile": "Mon Profil",
      "signIn": "Se Connecter",
      "signOut": "Se Déconnecter"
    }
  },
  "es": {
    "sidebar": {
      "myPage": "Mi Página",
      "myProfile": "Mi Perfil",
      "signIn": "Iniciar Sesión",
      "signOut": "Cerrar Sesión"
    }
  }
}
</i18n>