feat [front]: admin mobile margins

front/components/admin/header.vue

@@ -5,7 +5,24 @@
       role="navigation"
       aria-label="main navigation"
     >
-      <div class="navbar-menu">
+      <div class="navbar-brand">
+        <nuxt-link class="navbar-item" to="/">
+          <img src="~/assets/img/logo.png" />
+        </nuxt-link>
+        <a
+          role="button"
+          class="navbar-burger"
+          aria-label="menu"
+          aria-expanded="false"
+          @click="isBurgerOpen = !isBurgerOpen"
+        >
+          <!-- the next three lines are meant for the burger menu -->
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
+      <div class="navbar-menu" :class="{ 'is-active': isBurgerOpen }">
         <div class="navbar-start">
           <nuxt-link
             v-for="(menuItem, index) of menuItems"
@@ -32,6 +49,8 @@ const menuItems = [
     link: "/",
   },
 ]
+
+const isBurgerOpen = ref(false)
 </script>
 
 <style scoped lang="sass"></style>

front/pages/admin/[id]/edition.vue

@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main class="section">
     <h1 class="title">
       Modifier la séance du {{ new Date(film.projectionDate).toLocaleString() }}
     </h1>

front/pages/admin/[id]/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main class="section">
     <div class="title is-2">
       <div class="tag is-large">
         {{ film.isConfirmed ? "Publié" : "Brouillon" }}

front/pages/admin/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main class="section">
     <h1 class="title">Liste des séances</h1>
     <ul class="list has-visible-pointer-controls">
       <li v-for="film of films" :key="film.id" class="list-item">

front/pages/admin/nouveau.vue

@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <main class="section">
     <h1 class="title">Nouvelle séance</h1>
     <AdminForm v-model="film" @save="post" @publish="publish" />
   </main>