App.vue

<template>
  <div v-frag>
    <header class="header-menu">
      <div class="ui container">
        <div class="ui inverted icon menu">
          <router-link to="/" class="header item">
            <img
              class="ui mini right spaced image"
              src="@/assets/img/logo-neogeo-circle.png"
            />
            <!-- :src="LOGO_PATH" -->
            {{ getApplicationName() }}
          </router-link>

          <div
            id="menu-dropdown"
            :class="['ui dropdown item', { 'active visible': menuIsOpen }]"
            v-if="project"
            @click="menuIsOpen = !menuIsOpen"
          >
            Projet : {{ project.title }}
            <i class="dropdown icon"></i>
            <div
              :class="['menu', { 'visible transition': menuIsOpen }]"
              style="z-index: 401"
            >
              <router-link
                :to="{
                  name: 'project_detail',
                  params: { slug: project.slug },
                }"
                class="item"
              >
                <i class="home icon"></i>Accueil
              </router-link>
              <router-link
                :to="{
                  name: 'liste-signalements',
                  params: { slug: project.slug },
                }"
                class="item"
              >
                <i class="list icon"></i>Liste & Carte
              </router-link>

              <router-link
                v-if="user.is_administrator"
                :to="{
                  name: 'project_mapping',
                  params: { slug: project.slug },
                }"
                class="item"
              >
                <i class="map icon"></i>Fonds cartographiques
              </router-link>
              <router-link
                v-if="user.is_administrator"
                :to="{
                  name: 'project_members',
                  params: { slug: project.slug },
                }"
                class="item"
              >
                <i class="users icon"></i>Membres
              </router-link>
            </div>
          </div>

          <div class="right menu">
            <router-link v-if="user" to="/my_account/" class="item">
              {{ userFullname || user.username || "Utilisateur inconnu" }}
            </router-link>
            <div
              v-if="user && user.is_administrator"
              class="item ui label vertical"
            >
              <span v-if="USER_LEVEL_PROJECTS && project">
                {{ USER_LEVEL_PROJECTS[project.slug] }}</span
              >
              <br />
              <span v-if="user.is_administrator"> Gestionnaire métier </span>
            </div>
            <!-- // todo : find out SSO_SETTED in django -->
            <a v-if="user && !SSO_SETTED" @click="logout" class="item"
              ><i class="ui logout icon"></i>
            </a>
            <router-link v-else-if="!user" to="/connexion/" class="item"
              >Se Connecter</router-link
            >
          </div>
        </div>
      </div>
    </header>
    <main>
      <div class="ui stackable grid centered container">
        <div v-if="messages" class="row">
          <div class="fourteen wide column">
            <div
              v-for="(message, index) in messages"
              :key="'message-' + index"
              class="ui positive message"
            >
              <div class="ui info message">
                <div class="header">
                  <i class="info circle icon"></i> Informations
                </div>
                <ul class="list">
                  {{
                    message.comment
                  }}
                </ul>
              </div>
            </div>
          </div>
        </div>
        <router-view />
        <!-- //* Les views sont injectées ici -->
      </div>
    </main>

    <footer>
      <div class="ui compact text menu">
        <router-link to="/mentions/" class="item">Mentions légales</router-link>
        <router-link to="/aide/" class="item">Aide</router-link>
        <p class="item">Version {{ PACKAGE_VERSION }}</p>
      </div>
    </footer>
  </div>
</template>

<script>
import frag from "vue-frag";
import { mapState } from "vuex";
import { mapGetters } from "vuex";

export default {
  name: "App",

  directives: {
    frag,
  },

  data() {
    return {
      menuIsOpen: false,
      messages: null,
    };
  },

  computed: {
    ...mapState([
      "projects",
      "user",
      "SSO_SETTED",
      "USER_LEVEL_PROJECTS",
      "configuration",
    ]),
    ...mapGetters(["project"]),
    //LOGO_PATH: () => require(`${configuration.VUE_APP_LOGO_PATH}`),
    //APPLICATION_NAME: () => this.configuration.VUE_APP_APPLICATION_NAME,
    PACKAGE_VERSION: () => process.env.PACKAGE_VERSION || "0",
    userFullname: function () {
      if (this.user.first_name || this.user.last_name)
        return this.user.first_name + " " + this.user.last_name;
      return null;
    },
  },
  methods: {
    logout() {
      this.$store.dispatch("LOGOUT");
    },
    getApplicationName() {
      return this.configuration.VUE_APP_APPLICATION_NAME;
    },
    clickOutsideMenu(e) {
      if (!e.target.closest("#menu-dropdown")) this.menuIsOpen = false;
    },
  },
  created() {
    window.addEventListener("mousedown", this.clickOutsideMenu);
  },

  beforeDestroy() {
    window.removeEventListener("mousedown", this.clickOutsideMenu);
  },
};
</script>

<style>
@import "./assets/styles/base.css";
@import "./assets/resources/semantic-ui-2.4.2/semantic.min.css";

.header-menu {
  min-width: 560px;
}

body {
  height: 100vh;
  margin: 0;
}

header {
  min-height: 61px;
}
footer {
  min-height: 40px;
}

/* Trick */
body {
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

.vertical {
  flex-direction: column;
  justify-content: center;
}
</style>