fusion project menu with user menu and increase width for mobile

src/App.vue

@@ -8,22 +8,27 @@
               class="ui mini right spaced image"
               src="@/assets/img/logo-neogeo-circle.png"
             />
-            {{ APPLICATION_NAME }}
+            <span class="desktop">
+              {{ APPLICATION_NAME }}
+            </span>
           </router-link>
 
           <div
             id="menu-dropdown"
-            :class="['ui dropdown item', { 'active visible': menuIsOpen }]"
-            v-if="project"
+            :class="[
+              'ui dropdown item floated right',
+              { 'active visible': menuIsOpen },
+            ]"
             @click="menuIsOpen = !menuIsOpen"
           >
-            Projet : {{ project.title }}
+            <span v-if="project"> Projet : {{ project.title }} </span>
             <i class="dropdown icon"></i>
             <div
               :class="['menu', { 'visible transition': menuIsOpen }]"
               style="z-index: 401"
             >
               <router-link
+                v-if="project"
                 :to="{
                   name: 'project_detail',
                   params: { slug: project.slug },
@@ -33,6 +38,7 @@
                 <i class="home icon"></i>Accueil
               </router-link>
               <router-link
+                v-if="project"
                 :to="{
                   name: 'liste-signalements',
                   params: { slug: project.slug },
@@ -43,7 +49,7 @@
               </router-link>
 
               <router-link
-                v-if="user.is_administrator"
+                v-if="project && user.is_administrator"
                 :to="{
                   name: 'project_mapping',
                   params: { slug: project.slug },
@@ -53,7 +59,7 @@
                 <i class="map icon"></i>Fonds cartographiques
               </router-link>
               <router-link
-                v-if="user.is_administrator"
+                v-if="project && user.is_administrator"
                 :to="{
                   name: 'project_members',
                   params: { slug: project.slug },
@@ -62,30 +68,28 @@
               >
                 <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
+              <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 no-hover"
+              >
+                <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
               >
-              <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>
@@ -142,6 +146,7 @@ export default {
   data() {
     return {
       menuIsOpen: false,
+      rightMenuIsOpen: true,
       messages: null,
     };
   },
@@ -190,20 +195,6 @@ export default {
 @import "./assets/styles/base.css";
 @import "./assets/resources/semantic-ui-2.4.2/semantic.min.css";
 
-@media screen and (min-width: 560px) {
-  .header-menu {
-    min-width: 560px;
-  }
-}
-
-@media screen and (min-width: 560px) {
-  .menu.container {
-    width: auto !important;
-    margin-left: 1em !important;
-    margin-right: 1em !important;
-  }
-}
-
 body {
   height: 100vh;
   margin: 0;
@@ -230,5 +221,30 @@ footer {
   flex-direction: column;
   justify-content: center;
 }
+@media screen and (min-width: 560px) {
+  .header-menu {
+    min-width: 560px;
+  }
+
+  .menu.container {
+    width: auto !important;
+    margin-left: 1em !important;
+    margin-right: 1em !important;
+  }
+}
+
+@media screen and (max-width: 560px) {
+  .desktop {
+    display: none !important;
+  }
+  div.menu {
+    width: 100vw;
+  }
+}
+
+.ui.menu .ui.dropdown .menu > .item.no-hover:hover {
+  cursor: auto !important;
+  background: white !important;
+}
 </style>
  
\ No newline at end of file