add small menu

resources/js/components/App.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="flex">
         <Nav />
-        <div>
+        <div v-if="authUser" class="w-100">
             <TopBar />
             <main>
                 <router-view :key="$route.fullPath" class="main"></router-view>
@@ -13,6 +13,7 @@
 <script>
     import Nav from "./Nav";
     import TopBar from "./TopBar";
+    import { mapGetters } from 'vuex'
 
     export default {
         name: "App",
@@ -25,6 +26,11 @@
         created() {
             this.$store.dispatch('setPageTitle', this.$route.meta.title)
         },
+        computed: {
+            ...mapGetters({
+                authUser: 'authUser',
+            })
+        },
         watch: {
             $route(to, from) {
                 this.$store.dispatch('setPageTitle', to.meta.title)

resources/js/components/Nav.vue

@@ -1,22 +1,30 @@
 <template>
-    <nav>
-        <router-link to="/" class="site-logo-main">
+    <nav v-bind:class="{ small: !toggleNav }">
+        <router-link to="/" class="site-logo-main" v-bind:class="{ small: !toggleNav }">
             <svg-vue icon="logo" />
         </router-link>
         <hr>
         <router-link to="/memos" class="nav-item">
             <svg-vue icon="memos" />
-            Memos
+            <span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
         </router-link>
         <router-link to="/jeux" class="nav-item">
             <svg-vue icon="games" />
-            Jeux
+            <span v-bind:class="{ navhidden: !toggleNav }">Jeux</span>
         </router-link>
+        <div @click="toggleNav = !toggleNav"  class="nav-toggle mt-5">
+            <svg-vue icon="arrow" v-bind:class="{ small: !toggleNav }" />
+        </div>
     </nav>
 </template>
 
 <script>
     export default {
         name: "Nav",
+        data: function () {
+            return {
+                toggleNav: true,
+            }
+        }
     }
 </script>

resources/js/components/TopBar.vue

@@ -4,7 +4,7 @@
             <Avatar :avatar="authUser.data.attributes.avatar" size="small" :alt="authUser.data.attributes.name" class="mr-1"/>
             {{ authUser.data.attributes.name }}
         </router-link>
-        <form v-if="authUser" class="search-box">
+        <form v-if="authUser && search" class="search-box">
             <input type="search" name="search" placeholder="Search">
             <button type="submit" value="S">
                 <svg-vue icon="search" />
@@ -33,6 +33,11 @@
         components: {
             Avatar
         },
+        data: function () {
+            return {
+                search: false,
+            }
+        },
         computed: {
             ...mapGetters({
                 authUser: 'authUser',

resources/js/views/Memo/MemoCreate.vue

@@ -4,13 +4,13 @@
             <a href="#" @click="$router.back()" class="link">
                 < Back
             </a>
+            <button @click="$router.back()" class="btn-alert mr-1">Cancel</button>
         </div>
         <form @submit.prevent="submitForm">
             <InputField name="name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
             <TextAreaField class="memo-text-area" name="memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
 
             <div class="flex-end">
-                <button @click="$router.back()" class="btn-alert mr-1">Cancel</button>
                 <button class="btn-primary">Add New Memo</button>
             </div>
         </form>

resources/js/views/Memo/MemoEdit.vue

@@ -4,13 +4,13 @@
             <a href="#" @click="$router.back()" class="link">
                 < Back
             </a>
+            <button class="btn-alert mr-1">Cancel</button>
         </div>
         <form @submit.prevent="submitForm">
             <InputField name="name" :data="form.name" label="Title" placeholder="Your Title" @update:field="form.name = $event" :errors="errors" />
             <TextAreaField class="memo-text-area" name="memo" :data="form.memo" placeholder="Your Memo" @update:field="form.memo = $event" :errors="errors" />
 
             <div class="flex-end">
-                <button class="btn-alert mr-1">Cancel</button>
                 <button class="btn-primary">Save</button>
             </div>
 

resources/js/views/Memo/MemoIndex.vue

@@ -7,16 +7,15 @@
             <router-link :to="'/memos/create'" class="btn-primary">Add New Memo</router-link>
         </div>
         <div v-if="loading">> Loading...</div>
-        <div v-else>
+        <div v-else class="container-cards-list">
             <div v-if="memos.lenght === 0">
                 <p>No memos yet. <router-link to="/memos/create">Get Started ></router-link></p>
             </div>
-            <div v-for="memo in memos" class="memo-list">
-                <router-link :to="'/memos/' + memo.data.memo_id" class="relative flex-center flex-between p-1">
+            <div v-for="memo in memos" class="card">
+                <router-link :to="'/memos/' + memo.data.memo_id">
                     <h1>{{ memo.data.name }}</h1>
                     <div class="memo-date">{{ memo.data.last_updated }}</div>
                 </router-link>
-
             </div>
         </div>
     </div>

resources/js/views/User/UserAdmin.vue

@@ -1,12 +1,8 @@
 <template>
-  <div>
+  <div v-if="authUser">
     <div class="flex mb-4">
       <div class="avatar mr-2">
-        <Avatar
-          :avatar="authUser.data.attributes.avatar"
-          size="large"
-          :alt="authUser.data.attributes.name"
-        />
+        <Avatar :avatar="authUser.data.attributes.avatar" size="large" :alt="authUser.data.attributes.name" />
       </div>
       <div class="flex-col flex-center">
         <div><strong>{{ authUser.data.attributes.name }}</strong></div>
@@ -14,26 +10,14 @@
       </div>
     </div>
     <div v-if="authUser.data.attributes.is_admin">
-      <h2 class="mb-1">
-        Ajouter un membre
-      </h2>
-      <AlertBox
-        v-if="alertType"
-        :type="alertType"
-        :message="alertMessage"
-        class="mb-1"
-      />
+      <h2 class="mb-1">Ajouter un membre</h2>
+      <AlertBox v-if="alertType" :type="alertType" :message="alertMessage" class="mb-1" />
       <form @submit.prevent="addMember" class="mb-2">
-        <InputField
-          name="name"
-          type="text"
-          label="Nom du nouveau membre"
-          placeholder="Nom"
-          :errors="errors"
-          @update:field="form.name = $event"
-        />
-        <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" :errors="errors" @update:field="form.email = $event" />
-        <button class="btn-primary">Ajouter</button>
+          <div class="flex">
+              <InputField name="name" type="text" label="Nom du nouveau membre" placeholder="Nom" :errors="errors" @update:field="form.name = $event" class="mr-1" />
+              <InputField name="email" type="email" label="Adresse email du nouveau membre" placeholder="E-mail" :errors="errors" @update:field="form.email = $event" class="mr-1" />
+              <button class="btn-primary inline">Ajouter</button>
+          </div>
       </form>
         <div class="mb-2">
             <h2>Liste des utilisateurs</h2>
@@ -42,9 +26,7 @@
                 <li v-else v-for="user in users"><a :href="user.links.self">{{ user.data.attributes.name }}</a> - {{ user.data.attributes.email }} - {{ user.data.attributes.is_admin }}</li>
             </ul>
         </div>
-        <div>
-            Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link>
-        </div>
+        <div>Css Testeur pour constituer un thème : <router-link to="/css-testeur">Css Testeur</router-link></div>
     </div>
   </div>
 </template>