♻️ (App) refactor App scss

src/App.vue

@@ -20,7 +20,9 @@
             </div>
           </online-view>
         </router-link>
-        <span class="vaquant-title" :class="{ 'visible': shadow }">{{ title }}</span>
+        <span class="vaquant-title" :class="{ visible: shadow }">{{
+          title
+        }}</span>
         <div
           class="navbar-burger burger"
           data-target="navbar-main"
@@ -40,18 +42,18 @@
         @click="hideMenu"
       >
         <div class="navbar-end">
-          <router-link class="navbar-item" :to="{ name: 'about' }" v-t="'title.about'"></router-link>
-          <!-- <router-link class="navbar-item" :to="{ name: 'pricing' }" v-t="'title.pricing'"></router-link> -->
-          <a
-            class="navbar-item"
-            target="_blank"
-            rel="noreferrer"
-            :href="coffee"
-          >Supportez Vaquant avec un ☕ !</a>
           <router-link
             class="navbar-item"
-            :to="{ name: 'user' }"
+            :to="{ name: 'about' }"
-          >{{ username ? username : $t('user.loginsignup') }}</router-link>
+            v-t="'title.about'"
+          ></router-link>
+          <!-- <router-link class="navbar-item" :to="{ name: 'pricing' }" v-t="'title.pricing'"></router-link> -->
+          <a class="navbar-item" target="_blank" rel="noreferrer" :href="coffee"
+            >Supportez Vaquant avec un ☕ !</a
+          >
+          <router-link class="navbar-item" :to="{ name: 'user' }">{{
+            username ? username : $t('user.loginsignup')
+          }}</router-link>
         </div>
       </div>
     </nav>
@@ -116,6 +118,9 @@ export default class App extends Vue {
 </script>
 
 <style lang="scss">
+$icon_size: 18px;
+$margin: 0.75rem;
+
 .navbar {
   color: red;
   .vaquant-title {
@@ -129,30 +134,31 @@ export default class App extends Vue {
   .online-view {
     position: absolute;
     bottom: 7px;
-    right: 18px;
+    right: $icon_size;
-    width: 18px;
+    width: $icon_size;
     height: auto;
   }
+  &::before {
+    content: '';
+    position: absolute;
+    right: 0;
+    bottom: -5px;
+    left: 0;
+    width: 100%;
+    height: 5px;
+    transition: opacity 0.25s ease-out;
+    pointer-events: none;
+    opacity: 0;
+    box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.842);
+    will-change: opacity;
+  }
+  &.shadow::before {
+    opacity: 1;
+  }
 }
-.navbar::before {
+
-  content: '';
-  position: absolute;
-  right: 0;
-  bottom: -5px;
-  left: 0;
-  width: 100%;
-  height: 5px;
-  transition: opacity 0.25s ease-out;
-  pointer-events: none;
-  opacity: 0;
-  box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.842);
-  will-change: opacity;
-}
-.navbar.shadow::before {
-  opacity: 1;
-}
 main {
-  margin-left: 0.75rem;
+  margin-left: $margin;
-  margin-right: 0.75rem;
+  margin-right: $margin;
 }
 </style>