♻️ (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' }"
-          >{{ username ? username : $t('user.loginsignup') }}</router-link>
+            :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' }">{{
+            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,12 +134,11 @@ export default class App extends Vue {
   .online-view {
     position: absolute;
     bottom: 7px;
-    right: 18px;
-    width: 18px;
+    right: $icon_size;
+    width: $icon_size;
     height: auto;
   }
-}
-.navbar::before {
+  &::before {
     content: '';
     position: absolute;
     right: 0;
@@ -148,11 +152,13 @@ export default class App extends Vue {
     box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.842);
     will-change: opacity;
   }
-.navbar.shadow::before {
+  &.shadow::before {
     opacity: 1;
   }
+}
+
 main {
-  margin-left: 0.75rem;
-  margin-right: 0.75rem;
+  margin-left: $margin;
+  margin-right: $margin;
 }
 </style>