From 58bb7bdc8eda377ccd4d84995b2ae15dab02028c Mon Sep 17 00:00:00 2001
From: isabellirosa <isabelli.ifc@gmail.com>
Date: Fri, 12 Jul 2024 14:19:51 -0300
Subject: [PATCH] FEAT: Adding children layouts #31

---
 src/components/home/DefaultHome.vue |  1 -
 src/layouts/BlankLayout.vue         |  5 ++
 src/layouts/DefaultLayout.vue       | 11 ++++
 src/layouts/GraphLayout.vue         | 10 ++++
 src/pages/AboutView.vue             |  5 --
 src/pages/ArticleView.vue           |  5 --
 src/pages/AuthorView.vue            |  5 --
 src/pages/FavoriteView.vue          |  6 --
 src/pages/GraphView.vue             |  3 +-
 src/pages/HomeView.vue              |  5 +-
 src/pages/ProfileView.vue           | 11 +---
 src/router/index.ts                 | 93 +++++++++++++++++------------
 12 files changed, 85 insertions(+), 75 deletions(-)
 create mode 100644 src/layouts/BlankLayout.vue
 create mode 100644 src/layouts/DefaultLayout.vue
 create mode 100644 src/layouts/GraphLayout.vue

diff --git a/src/components/home/DefaultHome.vue b/src/components/home/DefaultHome.vue
index e3cf3ba..bd504bd 100644
--- a/src/components/home/DefaultHome.vue
+++ b/src/components/home/DefaultHome.vue
@@ -32,7 +32,6 @@ const templateStore = useTemplateStore();
       <GraphImage />
     </div>
   </div>
-  <DefaultFooter />
 </template>
 
 <style scoped>
diff --git a/src/layouts/BlankLayout.vue b/src/layouts/BlankLayout.vue
new file mode 100644
index 0000000..d8bf972
--- /dev/null
+++ b/src/layouts/BlankLayout.vue
@@ -0,0 +1,5 @@
+<template>
+<main>
+<RouterView/>
+</main>
+</template>
\ No newline at end of file
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
new file mode 100644
index 0000000..9fba9ac
--- /dev/null
+++ b/src/layouts/DefaultLayout.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DefaultHeader, DefaultFooter } from '@/components';
+</script>
+
+<template>
+<main>
+<DefaultHeader/>
+<RouterView/>
+<DefaultFooter/>
+</main>
+</template>
\ No newline at end of file
diff --git a/src/layouts/GraphLayout.vue b/src/layouts/GraphLayout.vue
new file mode 100644
index 0000000..5cf8129
--- /dev/null
+++ b/src/layouts/GraphLayout.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { DefaultHeader } from '@/components';
+</script>
+
+<template>
+<main>
+<DefaultHeader/>
+<RouterView/>
+</main>
+</template>
\ No newline at end of file
diff --git a/src/pages/AboutView.vue b/src/pages/AboutView.vue
index a74dbb2..bdc8aa9 100644
--- a/src/pages/AboutView.vue
+++ b/src/pages/AboutView.vue
@@ -1,8 +1,3 @@
-<script setup lang="ts">
-import { DefaultHeader } from '@/components';
-</script>
-
 <template>
-  <DefaultHeader/>
   <h1>About</h1>
 </template>
\ No newline at end of file
diff --git a/src/pages/ArticleView.vue b/src/pages/ArticleView.vue
index 91d5175..7ad052b 100644
--- a/src/pages/ArticleView.vue
+++ b/src/pages/ArticleView.vue
@@ -1,8 +1,3 @@
-<script setup lang="ts">
-import { DefaultHeader } from '@/components';
-</script>
-
 <template>
-  <DefaultHeader/>
   <h1>Article</h1>
 </template>
\ No newline at end of file
diff --git a/src/pages/AuthorView.vue b/src/pages/AuthorView.vue
index fcb3ab3..42dba3b 100644
--- a/src/pages/AuthorView.vue
+++ b/src/pages/AuthorView.vue
@@ -1,8 +1,3 @@
-<script setup lang="ts">
-import { DefaultHeader } from '@/components';
-</script>
-
 <template>
-  <DefaultHeader/>
   <h1>Author</h1>
 </template>
\ No newline at end of file
diff --git a/src/pages/FavoriteView.vue b/src/pages/FavoriteView.vue
index b256cdd..fe8808f 100644
--- a/src/pages/FavoriteView.vue
+++ b/src/pages/FavoriteView.vue
@@ -1,9 +1,3 @@
-<script setup lang="ts">
-import { DefaultHeader, DefaultFooter } from '@/components';
-</script>
-
 <template>
-  <DefaultHeader/>
   <h1>favorite</h1>
-  <DefaultFooter/>
 </template>
\ No newline at end of file
diff --git a/src/pages/GraphView.vue b/src/pages/GraphView.vue
index 9c5f3d2..82f502f 100644
--- a/src/pages/GraphView.vue
+++ b/src/pages/GraphView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { GraphContainer, PainelControl, DefaultHeader } from '@/components';
+import { GraphContainer } from '@/components';
 
 import { useAuth, useSetGraph } from '@/composables';
 import { useGraphStore } from '@/stores';
@@ -12,7 +12,6 @@ useAuth();
 
 <template>
   <div>
-    <DefaultHeader/>
       <div class="container">
         <GraphContainer :nodes="currentConnections.nodes" :edges="currentConnections.edges" :configs="configs"/>
       </div>
diff --git a/src/pages/HomeView.vue b/src/pages/HomeView.vue
index 8be5e4f..ab62a6c 100644
--- a/src/pages/HomeView.vue
+++ b/src/pages/HomeView.vue
@@ -1,9 +1,6 @@
 <script lang="ts" setup>
-import { DefaultHeader, DefaultHome } from "@/components";
+import { DefaultHome } from "@/components";
 </script>
 <template>
-  <DefaultHeader />
   <DefaultHome />
 </template>
-
-<style scoped></style>
diff --git a/src/pages/ProfileView.vue b/src/pages/ProfileView.vue
index aa10cd8..d5a74f4 100644
--- a/src/pages/ProfileView.vue
+++ b/src/pages/ProfileView.vue
@@ -1,12 +1,3 @@
-<script setup lang="ts">
-
-</script>
-
 <template>
   <h1>Profile</h1>
-</template>
-
-
-<style scoped>
-
-</style>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index b58d7ee..5fd7d1b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -5,49 +5,68 @@ const router = createRouter({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: () => import('../pages/HomeView.vue')
+      component: () => import('../layouts/DefaultLayout.vue'),
+      children: [
+        {
+          path: '/',
+          name: 'home',
+          component: () => import('../pages/HomeView.vue'),
+        },
+        {
+          path: '/about',
+          name: 'about',
+          component: () => import('../pages/AboutView.vue'),
+        },
+        {
+          path: '/article',
+          name: 'article',
+          component: () => import('../pages/ArticleView.vue'),
+        },
+        {
+          path: '/author',
+          name: 'author',
+          component: () => import('../pages/AuthorView.vue'),
+        },
+        {
+          path: '/favorite',
+          name: 'favorite',
+          component: () => import('../pages/FavoriteView.vue'),
+          meta: {
+            requiresAuth: true
+          }
+        },
+        {
+          path: '/profile',
+          name: 'profile',
+          component: () => import('../pages/ProfileView.vue'), 
+          meta: {
+            requiresAuth: true
+          }
+        },
+     
+      ],
     },
     {
       path: '/graph',
-      name: 'graph',
-      component: () => import('../pages/GraphView.vue')
-    },
-    {
-      path: '/about',
-      name: 'about',
-      component: () => import('../pages/AboutView.vue')
-    },
-    {
-      path: '/article',
-      name: 'article',
-      component: () => import('../pages/ArticleView.vue')
-    },
-    {
-      path: '/author',
-      name: 'author',
-      component: () => import('../pages/AuthorView.vue')
-    },
-    {
-      path: '/favorite',
-      name: 'favorite',
-      component: () => import('../pages/FavoriteView.vue'),
-      meta: {
-        requiresAuth: true
-      }
-    },
-    {
-      path: '/profile',
-      name: 'profile',
-      component: () => import('../pages/ProfileView.vue'),
-      meta: {
-        requiresAuth: true
-      }
+      component: () => import('../layouts/GraphLayout.vue'),
+      children: [
+        {
+          path: '/',
+          name: 'graph',
+          component: () => import('../pages/GraphView.vue'),
+        },
+      ]
     },
     {
       path: '/login',
-      name: 'login',
-      component: () => import('../pages/LoginView.vue')
+      component: () => import('../layouts/BlankLayout.vue'),
+      children: [
+        {
+          path: '/',
+          name: 'login',
+          component: () => import('../pages/LoginView.vue'),
+        },
+      ]
     }
   ]
 })