feat [front]: ± mobile navbar

front/components/layout/NavBar.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="navbar-container mb-4">
+  <div class="navbar-container">
     <nav
       class="navbar container"
       role="navigation"
       aria-label="main navigation"
     >
       <div class="navbar-brand">
-        <nuxt-link class="mr-5 my-2" to="/">
-          <img src="~/assets/img/logo.png" width="160" height="205" />
+        <nuxt-link class="navbar-item" to="/">
+          <img src="~/assets/img/logo.png" />
         </nuxt-link>
         <a
           role="button"
@@ -96,6 +96,9 @@ const isBurgerOpen = ref(false)
 <style lang="sass" scoped>
 $navbar-item-img-max-height: 105px
 
+.navbar
+  background-color: $grey-light
+
 @include desktop
   .navbar-container
     color: $black-ter
@@ -116,10 +119,19 @@ $navbar-item-img-max-height: 105px
       width: 100%
       content: ""
       background-color: rgba(248, 245, 243, 0.8)
+
   .navbar
     padding: 0 2rem
     background: transparent
 
+    .navbar-brand .navbar-item
+      @include reset
+      margin: 0.5rem 1rem 0.5rem 0
+      img
+        max-height: none
+        width: 160px
+        height: 205px
+
     .navbar-menu
       display: flex
       flex-direction: column
@@ -141,12 +153,16 @@ $navbar-item-img-max-height: 105px
           color: $link-dark
 
 .place
-  background-color: rgba(240, 237, 234, 62%)
+  display: none
+  @include desktop
+    background-color: rgba(240, 237, 234, 62%)
 
 .networks
-  display: flex
-  justify-content: space-between
-  flex-direction: column
+  display: none
+  @include desktop
+    display: flex
+    justify-content: space-between
+    flex-direction: column
 </style>
 <style lang="sass">
 .navbar .networks .navbar-item .ov-icon