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',