geovisio-website/src/components/Header.vue

<template>
  <header class="header">
    <div class="responsive entry-instance">
      <InstanceName />
    </div>
    <nav class="nav">
      <div class="wrapper-logo desktop">
        <Link
          :image="{ url: 'logo.jpeg', alt: $t('general.header.alt_logo') }"
          :route="{ name: 'home' }"
        >
          <template v-slot:content>
            <InstanceName />
          </template>
        </Link>
      </div>
      <div class="wrapper-logo responsive">
        <Link
          :image="{
            url: 'logo.jpeg',
            alt: $t('general.header.alt_logo')
          }"
          :route="{ name: 'home' }"
        />
      </div>
      <div ref="list" class="wrapper-entries">
        <HeaderOpen
          v-if="isLogged && authEnabled"
          :menu-is-closed="menuIsClosed"
          :user-profile-url-length="userProfileUrl.length"
          @triggerClose="closeModal"
        />
        <div class="wrapper-right-entries">
          <div>
            <Link
              v-if="isLogged"
              :text="$t('general.header.sequences_text')"
              :route="{ name: 'my-sequences' }"
              look="link--blue"
              class="desktop"
              @click.native="closeModal"
            />
            <Link
              v-else
              :text="$t('general.header.contribute_text')"
              :route="{ name: 'why-contribute' }"
              look="link--blue"
              @click.native="closeModal"
            />
          </div>
          <div v-if="isLogged && authEnabled" class="link-upload">
            <Link
              :text="$t('general.header.upload_text')"
              look="button button--blue"
              :route="{ name: 'upload-pictures' }"
              class="desktop"
              @click.native="closeModal"
            />
            <Link
              data-test="link-logged-upload"
              look="button button--blue"
              icon="bi bi-plus-lg"
              :route="{ name: 'upload-pictures' }"
              class="responsive"
              @click.native="closeModal"
            />
          </div>
          <AccountButton
            v-if="isLogged && authEnabled"
            :aria-label="ariaLabel"
            :is-logged="isLogged"
            :user-name="userName"
            :menu-is-closed="menuIsClosed"
            @triggerToggleMenu="toggleMenu"
          />
          <div v-else-if="!isLogged && authEnabled">
            <div class="desktop" data-test="button-login-desktop">
              <Link
                type="external"
                :path-external="getAuthRoute('auth/login', route.path)"
              >
                <template v-slot:content>
                  <span class="login-text">{{
                    $t('general.header.login_text')
                  }}</span>
                  <span class="register-text">{{
                    $t('general.header.register_text')
                  }}</span>
                </template>
              </Link>
            </div>
            <div class="responsive" data-test="button-login-responsive">
              <Link
                type="external"
                icon="bi bi-person-circle"
                look="link--blue-dark"
                :path-external="getAuthRoute('auth/login', route.path)"
              />
            </div>
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { onClickOutside } from '@vueuse/core'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { getAuthRoute, hasASessionCookieDecoded } from '@/utils/auth'
import Link from '@/components/Link.vue'
import InstanceName from '@/components/InstanceName.vue'
import HeaderOpen from '@/components/header/HeaderOpen.vue'
import AccountButton from '@/components/header/AccountButton.vue'
const { t } = useI18n()
const route = useRoute()
defineProps({
  authEnabled: { type: Boolean, default: true },
  userProfileUrl: { type: String, default: '' }
})
const list = ref(null)
let menuIsClosed = ref<boolean>(true)

onClickOutside(list, () => closeModal())

function closeModal(): void {
  menuIsClosed.value = true
}

function toggleMenu(): void {
  menuIsClosed.value = !menuIsClosed.value
}
const isLogged = computed((): boolean => {
  const cookie = hasASessionCookieDecoded()
  return !!(cookie && cookie.account)
})
const ariaLabel = computed((): string =>
  menuIsClosed.value
    ? t('general.header.burger_menu_aria_label_open')
    : t('general.header.burger_menu_aria_label_closed')
)
const userName = computed((): string => {
  const cookie = hasASessionCookieDecoded()
  if (cookie && cookie.account) {
    return cookie.account.name
      .match(/\b(\w)/g)!
      .join('')
      .toUpperCase()
  }
  return ''
})
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  min-height: toRem(8);
  background-color: var(--white);
  border-bottom: toRem(0.1) solid var(--grey-pale);
}
.nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: toRem(1.5) toRem(3);
}
.wrapper-logo {
  display: flex;
  align-items: center;
  height: toRem(4);
}
.wrapper-entries {
  display: flex;
}
.responsive {
  display: none;
}
.desktop {
  display: flex;
}
.wrapper-right-entries {
  display: flex;
  align-items: center;
  div:first-child {
    margin-right: toRem(2);
  }
  div:last-child {
    .desktop {
      margin-right: 0;
    }
  }
}
.link-upload {
  margin-right: toRem(2);
}
.login-text {
  color: var(--blue-dark);
  border-right: toRem(0.1) solid var(--blue-dark);
  padding-right: toRem(0.5);
}
.register-text {
  padding-left: toRem(0.5);
  color: var(--blue);
}
@media (max-width: toRem(76.8)) {
  .nav {
    padding-right: toRem(2);
    padding-left: toRem(2);
  }
  .header {
    flex-direction: column;
    min-height: toRem(10);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
  }
  .entry-instance {
    background-color: var(--blue-pale);
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .desktop {
    display: none;
  }
  .responsive {
    display: flex;
  }
}
</style>