feat(auth, home, tasks, users): footer enabled from router ✨ (#1750)

Author: PierreBrisorgueil

src/config/defaults/development.cjs

@@ -63,7 +63,6 @@ module.exports = {
     theme: {
       dark: 'auto', // dark theme true / false / auto (based on prefers-color-scheme)
       flat: true, // flat by default
-      footer: false, // display footer
       snackbar: {
         // kind of notifications on requests
         status: true, // activate for error

src/modules/_app/app.vue

@@ -24,7 +24,12 @@
       <router-view />
     </v-main>
 
-    <waosFooter v-if="config.vuetify.theme.footer" />
+    <waosFooter
+      v-bind:links="config.home.links"
+      v-bind:custom="{
+        section: { background: config.vuetify.theme.themes[theme].colors.surface, 'min-width': '100%' },
+      }"
+    />
   </v-app>
 </template>
 
@@ -121,9 +126,4 @@ export default {
 .v-card {
   border: none !important;
 }
-.footer {
-  position: fixed;
-  width: 100%;
-  bottom: 0;
-}
 </style>

src/modules/_core/components/core.footer.component.vue

@@ -1,16 +1,27 @@
 <template>
-  <v-footer
-    :style="{
-      background: this.config.vuetify.theme.themes[theme].colors.primary,
-      color: config.vuetify.theme.themes[theme].colors.onPrimary,
-    }"
-    app
-  >
-    <div class="flex-grow-1"></div>
-    <div>
-      <span role="img" aria-label="copyright"> &copy; </span> 2019
-      <a href="https://weareopensource.me" style="color: white; text-decoration: none">We Are Open Source</a>
-    </div>
+  <v-footer v-if="enabled" class="pa-0 align-end" :style="{ background: config.vuetify.theme.themes[theme].colors.background }" app>
+    <v-container class="footer pa-6" :style="custom && custom.section ? custom.section : null" v-if="links.length > 0">
+      <v-row>
+        <v-col
+          v-for="({ items, title }, i) in links.filter((section) => section.items)"
+          :key="i"
+          cols="12"
+          :md="12 / links.filter((section) => section.items).length"
+        >
+          <v-card :flat="config.vuetify.theme.flat" :style="custom && custom.section ? custom.section : null">
+            <v-card-title class="justify-center text-h6 text-medium-emphasis" v-text="title"></v-card-title>
+            <v-list :style="custom && custom.section ? custom.section : null">
+              <v-list-item v-for="(item, i) in items" :key="i" :to="item.url" class="justify-center">
+                <v-list-item-title>
+                  <v-icon size="16" class="mr-2 text-onSurface text-medium-emphasis">{{ item.icon }}</v-icon>
+                  <span class="text-secondary text-subtitle-2"> {{ item.label }} </span>
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
   </v-footer>
 </template>
 
@@ -24,8 +35,21 @@ import { mapGetters } from 'vuex';
  */
 export default {
   name: 'waosFooter',
+  data() {
+    return {
+      enabled: false,
+    };
+  },
+  props: ['links', 'custom'],
+
   computed: {
     ...mapGetters(['theme']),
   },
+  watch: {
+    $route(route) {
+      if (route.meta && route.meta.footer) this.enabled = true;
+      else this.enabled = false;
+    },
+  },
 };
 </script>

src/modules/auth/router/auth.router.js

@@ -17,39 +17,39 @@ export default [
     component: signin,
     meta: {
       icon: 'fa-solid fa-user',
-      display: false, // hide any time
+      display: false, // hide from drawer any time
     },
   },
   {
     path: '/signup',
     name: 'Signup',
     component: signup,
     meta: {
-      display: false, // hide any time
+      display: false, // hide from drawer any time
     },
   },
   {
     path: '/forgot',
     name: 'Forgot',
     component: forgot,
     meta: {
-      display: false, // hide any time
+      display: false, // hide from drawer any time
     },
   },
   {
     path: '/reset',
     name: 'Reset',
     component: reset,
     meta: {
-      display: false, // hide any time
+      display: false, // hide from drawer any time
     },
   },
   {
     path: '/token',
     name: 'Token',
     component: token,
     meta: {
-      display: false, // hide any time
+      display: false, // hide from drawer any time
     },
   },
 ];

src/modules/home/components/home.links.component.vue

@@ -15,41 +15,45 @@ export default [
     component: home,
     meta: {
       icon: 'fa-solid fa-house',
+      footer: true, // display footer
     },
   },
   {
     path: '/changelogs',
     name: 'changelogs',
     component: pages,
     meta: {
-      display: false, // hide any time
+      display: false, // hide from drawer any time
       title: 'Changelogs',
       data: 'getChangelogs', // array of {title: ..., markdown: ...}
+      footer: true, // display footer
     },
   },
   {
     path: '/team',
     name: 'Team',
     component: team,
     meta: {
-      display: false, // hide any time
+      display: false, // hide from drawer any time
       title: 'Team',
+      footer: true, // display footer
     },
   },
   {
     path: '/pages/:name',
     name: 'Pages',
     component: pages,
     meta: {
-      display: false, // hide any time
+      display: false, // hide from drawer any time
       data: 'getPages', // array of {title: ..., markdown: ...}
+      footer: true, // display footer
     },
   },
   {
     path: '/:catchAll(.*)',
     redirect: { name: 'Home' },
     meta: {
-      display: false, // hide any time
+      display: false, // hide from drawer any time
     },
   },
 ];

src/modules/home/router/home.router.js

@@ -28,13 +28,6 @@
       }"
     ></homeBlogComponent>
     <homeContactComponent></homeContactComponent>
-    <homeLinksComponent
-      v-bind:links="config.home.links"
-      v-bind:custom="{
-        section: { background: config.vuetify.theme.themes[theme].colors.surface },
-      }"
-      class="footer"
-    ></homeLinksComponent>
   </div>
 </template>
 
@@ -50,7 +43,6 @@ import homeSlideshowComponent from '../components/home.slideshow.component.vue';
 import homeStatsComponent from '../components/home.stats.component.vue';
 import homeBlogComponent from '../components/home.blog.component.vue';
 import homeContactComponent from '../components/home.contact.component.vue';
-import homeLinksComponent from '../components/home.links.component.vue';
 
 /**
  * Export default
@@ -64,7 +56,6 @@ export default {
     homeStatsComponent,
     homeBlogComponent,
     homeContactComponent,
-    homeLinksComponent,
   },
   computed: {
     ...mapGetters(['theme', 'news', 'statistics']),

src/modules/home/views/home.view.vue

@@ -7,12 +7,12 @@
     ></homeBannerComponent>
     <section id="page">
       <!-- Multiple Pages -->
-      <v-container v-if="contents.length > 1" class="pb-12">
+      <v-container v-if="contents.length > 1" class="my-6">
         <v-card flat>
           <v-tabs v-model="tab" background-color="background" fixed-tabs>
             <v-tab v-for="content in contents" :key="content.title" :value="content.title" color="secondary">{{ content.title }}</v-tab>
           </v-tabs>
-          <v-card-text>
+          <v-card-text class="pa-12">
             <v-window v-model="tab">
               <v-window-item
                 v-for="content in contents"
@@ -30,27 +30,20 @@
         </v-card>
       </v-container>
       <!-- One Page -->
-      <v-container v-if="contents.length === 1">
+      <v-container v-if="contents.length === 1" class="my-6">
         <v-card
           flat
           :style="{
             background: config.vuetify.theme.themes[theme].colors.surface,
             color: config.vuetify.theme.themes[theme].colors.onSurface,
           }"
         >
-          <v-card-text class="pa-8">
+          <v-card-text class="pa-12">
             <v-markdown :source="contents[0].markdown" :class="contents[0].style" />
           </v-card-text>
         </v-card>
       </v-container>
     </section>
-    <homeLinksComponent
-      v-bind:links="config.home.links"
-      v-bind:custom="{
-        section: { background: config.vuetify.theme.themes[theme].colors.surface },
-      }"
-      class="footer"
-    ></homeLinksComponent>
   </div>
 </template>
 
@@ -61,7 +54,6 @@
 import { mapGetters } from 'vuex';
 import _ from 'lodash';
 import homeBannerComponent from '../components/home.banner.component.vue';
-import homeLinksComponent from '../components/home.links.component.vue';
 
 /**
  * Export default
@@ -76,7 +68,6 @@ export default {
   },
   components: {
     homeBannerComponent,
-    homeLinksComponent,
   },
   computed: {
     ...mapGetters(['theme', 'contents']),

src/modules/home/views/pages.view.vue

@@ -6,13 +6,6 @@
         <teamMemberComponent v-for="(item, index) in team" v-bind:item="item" v-bind:index="index" v-bind:key="item.id"></teamMemberComponent>
       </v-layout>
     </v-container>
-    <homeLinksComponent
-      v-bind:links="config.home.links"
-      v-bind:custom="{
-        section: { background: config.vuetify.theme.themes[theme].colors.surface },
-      }"
-      class="footer"
-    ></homeLinksComponent>
   </div>
 </template>
 
@@ -23,7 +16,6 @@
 import { mapGetters } from 'vuex';
 import teamMemberComponent from '../components/team.member.component.vue';
 import homeBannerComponent from '../components/home.banner.component.vue';
-import homeLinksComponent from '../components/home.links.component.vue';
 
 /**
  * Export default
@@ -41,7 +33,6 @@ export default {
   components: {
     homeBannerComponent,
     teamMemberComponent,
-    homeLinksComponent,
   },
   computed: {
     ...mapGetters(['theme', 'team']),