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>

resources/sass/app.scss

@@ -3,11 +3,12 @@
 @import "setup/colors";
 @import "setup/fonts";
 @import "setup/positions";
+@import "setup/containers";
+@import "setup/effects";
 
 @import "components/btn";
 @import "components/elements";
 @import "components/main";
-@import "components/boxes";
 @import "components/nav";
 @import "components/topbar";
 @import "components/avatar";

resources/sass/components/_elements.scss

@@ -12,7 +12,7 @@ input {
     font-size: 1.6rem;
     font-family: $fontMain;
     padding: 0.5rem 1rem;
-    border-radius: 0.5rem;
+    border-radius: 0.2rem;
 
     &:focus {
         background-color: $white;

resources/sass/components/boxes.scss

@@ -1,6 +0,0 @@
-.card {
-    display: inline-block;
-    padding: 1rem;
-    box-shadow: 1px 1px 2px $grey;
-    border-radius: 2px;
-}

resources/sass/components/main.scss

@@ -8,7 +8,3 @@ main {
     width: 100%;
     height: calc(100vh - 4.5rem);
 }
-
-.main-top {
-
-}

resources/sass/components/nav.scss

@@ -4,7 +4,14 @@ nav {
     height: 100vh;
     width: 15rem;
     flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
     box-shadow: inset -3px -2px 3px rgba(0,0,0,0.2);
+    transition: width $transition-delay;
+
+    &.small {
+        width: 5.5rem;
+    }
 
     hr {
         width: 90%;
@@ -20,6 +27,10 @@ nav {
         padding-top: 1rem;
         padding-bottom: 1rem;
 
+        span {
+            overflow: hidden;
+        }
+
         svg {
             margin: 0 1rem;
             width: 3rem;
@@ -55,15 +66,38 @@ nav {
     }
 }
 
+.navhidden {
+    width: 0;
+}
+
 
 .site-logo-main {
     @extend .site-logo;
     display: block;
-    padding: 1rem 2rem;
-    width: 100%;
+    margin: 1rem;
+    width: 13rem;
+    transition: width $transition-delay;
 
     svg {
 
         width: 100%;
     }
+
+    &.small {
+        //padding-bottom: 10rem;
+        width: 3.5rem;
+    }
+}
+
+.nav-toggle {
+    @extend .site-logo;
+    align-self: center;
+
+    svg {
+        transition: transform $transition-delay;
+    }
+
+    svg.small {
+            transform: rotate(-180deg);
+    }
 }

resources/sass/components/topbar.scss

@@ -1,6 +1,6 @@
 .topbar {
     background-color: $medium;
-    width: calc(100vw - 15rem);
+    width: initial;
     box-shadow: 3px 2px 3px rgba(0,0,0,0.2);
 
     svg {

resources/sass/setup/_containers.scss

@@ -0,0 +1,40 @@
+.container-cards-list {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 10px;
+    grid-auto-rows: minmax(100px, auto);
+}
+
+.card {
+    background-color: $light;
+    display: flex;
+    padding: 1rem;
+    box-shadow: 1px 1px 2px $grey;
+    border-radius: 2px;
+
+    a {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        text-decoration: none;
+    }
+}
+
+
+.bg-b {
+    background-color: royalblue;
+}
+
+@media (max-width: 1200px) {
+    .container-cards-list {
+        grid-template-columns: repeat(3, 1fr);
+
+    }
+}
+
+@media (max-width: 800px) {
+    .container-cards-list {
+        grid-template-columns: repeat(2, 1fr);
+
+    }
+}

resources/sass/setup/_effects.scss

@@ -0,0 +1 @@
+$transition-delay: 0.2s;

resources/svg/arrow.svg

@@ -0,0 +1,11 @@
+<svg
+   xmlns="http://www.w3.org/2000/svg"
+   width="100mm"
+   height="100mm"
+   viewBox="0 0 100 100">
+  <g transform="translate(0,-197)">
+    <path
+       d="M 188.97656,0 C 84.607647,-9.9411436e-5 -9.9411436e-5,84.607647 0,188.97656 -9.9411436e-5,293.34547 84.607647,377.95322 188.97656,377.95312 293.34547,377.95322 377.95322,293.34547 377.95312,188.97656 377.95322,84.607647 293.34547,-9.9411436e-5 188.97656,0 Z m 92.66933,188.99525 c 0,3.81088 -136.06751,141.15219 -139.19531,139.34635 -3.1278,-1.80584 -3.91755,-276.707749 -0.13033,-278.69755 3.78721,-1.989802 139.32564,135.54032 139.32564,139.3512 z"
+       transform="matrix(0.26458333,0,0,0.26458333,0,197)" />
+  </g>
+</svg>