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

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

const {locale} = useI18n();
const translations = {
  en: {
    myPage: "my page",
    myProfile: "my profile",
    reduce: "collapse",
    signIn: "login",
    signOut: "sign out"
  },
  fr: {
    myPage: "ma page",
    myProfile: "mon profil",
    reduce: "réduire",
    signIn: "connexion",
    signOut: "se déconnecter"
  }
};
const t = computed(() => translations[locale.value] || translations["en"]);

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

function toggleLanguage() {
  locale.value = locale.value === 'fr' ? 'en' : 'fr';
}
</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 class="text-nowrap flex flex-row justify-start lg:justify-center items-center gap-2">
        <img alt="fleur lys"
             src="/images/fleur-lys.png"
             width="32"
        />
        <span class="font-sans font-medium text-xs hidden lg:inline uppercase text-wrap">
            fier d'être créé et conçu par et pour le québec
        </span>
      </div>
    </div>

    <div class="side-menu">

      <div class="side-menu-portrait">
        <img :src="userProfileStore.portraitUrl"
             alt="Profile Image"
             referrerpolicy="no-referrer"
             class="rounded-full"
             width="42"
             height="42">
        <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.name}`">
            <button class="menu-item-action">
              <i class="mdi mdi-file-account-outline"></i>
              <span class="label">{{ t.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.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.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.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.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 hidden lg:inline
}

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

</style>