App.vue

<template>
  <div id="app">
    <AppHeader />

    <div id="app-content">
      <span id="scroll-top-anchor" />
      <div
        :class="{ active: loader.isLoading }"
        class="ui inverted dimmer"
      >
        <div class="ui text loader">
          {{ loader.message }}
        </div>
      </div>

      <!-- //* Les views sont injectées ici -->
      <router-view class="page-content" />
    </div>

    <AppFooter />
  </div>
</template>

<script
  type="application/javascript"
  :src="
    baseUrl +
      'resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js'
  "
/>

<script>
import { mapState } from 'vuex';

import AppHeader from '@/components/AppHeader';
import AppFooter from '@/components/AppFooter';

export default {
  name: 'App',

  components: {
    AppHeader,
    AppFooter,
  },

  data() {
    return {
      menuIsOpen: false,
      rightMenuIsOpen: true,
      baseUrl: this.$store.state.configuration.BASE_URL,
      width: window.innerWidth > 0 ? window.innerWidth : screen.width,
    };
  },

  computed: {
    ...mapState([
      'user',
      'USER_LEVEL_PROJECTS',
      'configuration',
      'messages',
      'loader',
    ]),
    ...mapState('projects', [
      'projects',
      'project',
    ])
  },
};
</script>

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

.leaflet-container {
  background: white !important;
}

.flex {
  display: flex;
}

/* keep above loader */
#menu-dropdown {
  z-index: 1001;
}

@media screen and (max-width: 985px) {
  .abstract{
    display: none !important;
  }
}

@media screen and (min-width: 560px) {
  .mobile {
    display: none !important;
  }
  #app-header {
    min-width: 560px;
  }
  .menu.container {
    width: auto !important;
  }
  .push-right-desktop {
    margin-left: auto;
  }
}

@media screen and (max-width: 590px) {
  .desktop {
    display: none !important;
  }
  div.dropdown-list {
    width: 100vw;
    left: -70px !important; /* should be the same than belows */
  }
  .menu.container a.header {
    width: 70px;
  }
  .menu.container a.header > img {
    margin: 0;
  }
  #menu-dropdown {
    width: calc(100vw - 70px);
    justify-content: space-between;
  }
  #menu-dropdown > span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}

</style>