Reworking the layouts to allow for the new design

src/router/router.js

@@ -1,4 +1,4 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import {createRouter, createWebHistory} from 'vue-router'
 import About from '@/views/documentation/About.vue'
 import ContentPolicy from '@/views/documentation/ContentPolicy.vue'
 import FAQ from '@/views/documentation/FAQ.vue'
@@ -14,27 +14,24 @@ import Register from '../views/main/Register.vue'
 import Home from '../views/main/Home.vue'
 import Wallet from '../views/main/Wallet.vue'
 import ProfilePage from '@/views/profile/ProfilePage.vue'
-import CreatorList from '@/views/creators/CreatorList.vue'
-import CreatorPage from "@/views/creators/CreatorPage.vue";
-import ContentPage from "@/views/contents/ContentPage.vue";
+import CreatorList from '@/views/browser/CreatorList.vue'
 import PostContent from "@/views/contents/PostContent.vue";
 import Explorer from "@/views/explorer/explorer.vue";
 import {useAuthStore} from "@/stores/authStore.js";
 import ForYouPage from "@/views/profile/ForYouPage.vue";
-import CreatorPresentation from "@/views/creators/CreatorPresentation.vue";
-import CreatorExclusiveContent from "@/views/creators/CreatorExclusiveContent.vue";
+
+import CreatorLayout from "@/views/creators/CreatorLayout.vue";
+import ContentPage from "@/views/contents/ContentPage.vue";
+import CreatorContent from "@/views/creators/CreatorContent.vue";
+import CreatorNews from "@/views/creators/CreatorNews.vue";
+import CreatorHome from "@/views/creators/CreatorHome.vue";
 
 
 const routes = [
     {
         path: '/',
         component: Home,
-        meta: { hideSideBar: true }
-    },
-    {
-        path: '/presentation/@:creator',
-        component: CreatorPresentation,
-       
+        meta: {hideSideBar: true}
     },
     {
         path: '/browse',
@@ -46,69 +43,81 @@ const routes = [
     },
     {
         path: '/@:creator',
-        component: CreatorPage
+        component: CreatorLayout,
+        meta: {
+            requiresAuth: true,
+        },
+        children: [
+            {
+                path: '',
+                component: CreatorHome,
+            },
+            {
+                path: 'news',
+                component: CreatorNews,
+            },
+            {
+                path: 'content',
+                component: CreatorContent
+            },
+        ]
     },
     {
         path: '/content/post',
         component: PostContent,
     },
-    {
-        path: '/@:creator/exclusivecontent',
-        component: CreatorExclusiveContent
-    },
-
     {
         path: '/helpandcontact',
         component: HelpAndContact,
-        meta: { hideSideBar: true }
+        meta: {hideSideBar: true}
     },
     {
         path: '/termsandconditions',
         name: 'termsandconditions',
         component: TermsAndConditions,
-        meta: { hideSideBar: true }
+        meta: {hideSideBar: true}
     },
     {
         path: '/contentpolicy',
         name: 'contentpolicy',
         component: ContentPolicy,
-        meta: { hideSideBar: true }
+        meta: {hideSideBar: true}
     },
     {
         path: '/faq',
         name: 'FAQ',
         component: FAQ,
-        meta: { hideSideBar: true }
+        meta: {hideSideBar: true}
     },
     {
         path: '/guideforcreators',
         name: 'guideforcreators',
         component: CreatorGuide,
-        meta: { hideSideBar: true }
+        meta: {hideSideBar: true}
     },
     {
         path: '/about',
         name: 'about',
         component: About,
-        meta: { hideSideBar: true }
+        meta: {hideSideBar: true}
     },
     {
         path: '/pricing',
         name: 'pricing',
         component: Pricing,
-        meta: { hideSideBar: true }
+        meta: {hideSideBar: true}
     },
     {
         path: '/join',
         name: 'join',
         component: Join,
-        meta: { hideSideBar: true }
+        meta: {hideSideBar: true}
     },
     {
         path: '/register',
         name: 'register',
         component: Register,
-        meta: { hideSideBar: true }
+        meta: {hideSideBar: true}
     },
     {
         path: '/signup',
@@ -122,32 +131,31 @@ const routes = [
     },
     {
         path: '/paymentcompleted',
-        name: 'PayementCompleted',
+        name: 'PaymentCompleted',
         component: PaymentCompleted,
     },
     {
         path: '/wallet',
         name: 'wallet',
         component: Wallet,
-        meta: { requiresAuth: true }
+        meta: {requiresAuth: true}
     },
     {
         path: '/profile',
         name: 'profile',
         component: ProfilePage,
-        meta: { requiresAuth: true }
+        meta: {requiresAuth: true}
     },
     {
         path: '/explorer',
         name: 'explorer',
         component: Explorer,
-        
+
     },
     {
         path: '/feed',
         name: 'feed',
         component: ForYouPage,
-
     },
 ]
 
@@ -156,18 +164,18 @@ const router = createRouter({
     routes
 })
 
-// Navigation gards
+// Navigation guards
 router.beforeEach((to, from, next) => {
-    const authStore = useAuthStore();  
-   
+    const authStore = useAuthStore();
+
     if (to.matched.some(record => record.meta.requiresAuth)) {
-        if (!authStore.isAuthenticated) {              
-            next('/'); 
-        } else {           
-            next();  
+        if (!authStore.isAuthenticated) {
+            next('/');
+        } else {
+            next();
         }
     } else {
-        next(); 
+        next();
     }
 })