From e80c833c83a74647f60f399aaba3c7022eb82559 Mon Sep 17 00:00:00 2001
From: _aandres <alice.andres@m4x.org>
Date: Sun, 4 Dec 2022 00:34:34 +0100
Subject: [PATCH] feat [front]: admin mobile margins

---
 front/components/admin/header.vue  | 21 ++++++++++++++++++++-
 front/pages/admin/[id]/edition.vue |  2 +-
 front/pages/admin/[id]/index.vue   |  2 +-
 front/pages/admin/index.vue        |  2 +-
 front/pages/admin/nouveau.vue      |  2 +-
 5 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/front/components/admin/header.vue b/front/components/admin/header.vue
index 95f846a..118cda1 100644
--- a/front/components/admin/header.vue
+++ b/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>
diff --git a/front/pages/admin/[id]/edition.vue b/front/pages/admin/[id]/edition.vue
index 54c0155..521f1b8 100644
--- a/front/pages/admin/[id]/edition.vue
+++ b/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>
diff --git a/front/pages/admin/[id]/index.vue b/front/pages/admin/[id]/index.vue
index 18e7a45..a0c0f14 100644
--- a/front/pages/admin/[id]/index.vue
+++ b/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" }}
diff --git a/front/pages/admin/index.vue b/front/pages/admin/index.vue
index 19b714c..a8d0dd7 100644
--- a/front/pages/admin/index.vue
+++ b/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">
diff --git a/front/pages/admin/nouveau.vue b/front/pages/admin/nouveau.vue
index c820666..aa5335e 100644
--- a/front/pages/admin/nouveau.vue
+++ b/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>