Modification layout de la page Creator (dynamique)

src/router/index.js

@@ -8,151 +8,147 @@ import HelpAndContact from '@/views/tos/HelpAndContact.vue'
 import TermsAndConditions from '@/views/tos/TermsAndConditions.vue'
 import Transactions from '@/views/tos/Transactions.vue'
 import { createRouter, createWebHistory } from 'vue-router'
+import UserProfile from '../layouts/UserProfile.vue'
 import LoginView from '../views/LoginView.vue'
 import PaymentCompleted from '../views/PayementCompleted.vue'
 import SignupView from '../views/SignupView.vue'
-import UserBrowser from '../views/UsersBrowser.vue'
 import ContactView from '../views/main/ContactView.vue'
 import CreatorFolio from '../views/main/CreatorFolio.vue'
 import HomeView from '../views/main/HomeView.vue'
+import UserBrowser from '../views/main/UsersBrowser.vue'
 import YourProfile from '../views/main/YourProfile.vue'
 import ChloeBeaugrand from '../views/manualusers/ChloeProfile.vue'
 import Hutopy from '../views/manualusers/HutopyProfile.vue'
 import Leffet from '../views/manualusers/LeffetProfile.vue'
 import MathieuCaron from '../views/manualusers/MathieuCaron.vue'
 
+const routes = [
+  {
+    path: '/',
+    name: 'main',
+    component: HomeView
+  },
+  {
+    path: '/creatorfolio',
+    name: 'creatorfolio',
+    component: CreatorFolio
+  },
+  {
+    path: '/paymentcompleted',
+    name: 'PayementCompleted',
+    component: PaymentCompleted
+  },
+  {
+    path: '/yourprofile',
+    name: 'yourprofile',
+    component: YourProfile
+  },
+  {
+    path: '/contact',
+    name: 'contact',
+    component: ContactView
+  },
+  {
+    path: '/signup',
+    name: 'signup',
+    component: SignupView
+  },
+  {
+    path: '/login',
+    name: 'login',
+    component: LoginView
+  },
+  {
+    path: '/home',
+    name: 'home',
+    component: HomeView
+  },
+  {
+    path: '/helpandcontact',
+    name: 'helpandcontact',
+    component: HelpAndContact
+  },
+  {
+    path: '/termsandconditions',
+    name: 'termsandconditions',
+    component: TermsAndConditions
+  },
+  {
+    path: '/contentpolicy',
+    name: 'contentpolicy',
+    component: ContentPolicy
+  },
+  {
+    path: '/faq',
+    name: 'FAQ',
+    component: FAQ
+  },
+  {
+    path: '/guideforcreators',
+    name: 'guideforcreators',
+    component: GuideForCreators
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: About
+  },
+  {
+    path: '/transactions',
+    name: 'transactions',
+    component: Transactions
+  },
+  {
+    path: '/Hutopy',
+    name: 'Hutopy',
+    component: Hutopy
+  },
+  {
+    path: '/Leffet',
+    name: 'Leffet',
+    component: Leffet
+  },
+  {
+    path: '/userbrowser',
+    name: 'userbrowser',
+    component: UserBrowser
+  },
+  {
+    path: '/chloebeaugrand',
+    name: 'chloebeaugrand',
+    component: ChloeBeaugrand
+  },
+  {
+    path: '/guillaumeaime',
+    name: 'guillaumeaime',
+    component: GuillaumeAime
+  },
+  {
+    path: '/mathieucaron',
+    name: 'mathieucaron',
+    component: MathieuCaron
+  },
+  {
+    path: '/arps',
+    name: 'arps',
+    component: ARPS
+  },
+  {
+    path: '/:username',
+    name: 'user-profile',
+    component: UserProfile
+  },
+
+  {
+    path: '/creatorFolio',
+    name: 'creatorFolio',
+    component: CreatorFolio
+  }
+]
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
-    {
-      path: '/',
-      name: 'main',
-      component: HomeView
-    },
-    {
-      path: '/creatorfolio',
-      name: 'creatorfolio',
-      component: CreatorFolio
-    },
-
-    {
-      path: '/paymentcompleted',
-      name: 'PayementCompleted',
-      component: PaymentCompleted
-    },
-    {
-      path: '/yourprofile',
-      name: 'yourprofile',
-      component: YourProfile
-    },
-    {
-      path: '/contact',
-      name: 'contact',
-      component: ContactView
-    },
-    {
-      path: '/signup',
-      name: 'signup',
-      component: SignupView
-    },
-    {
-      path: '/login',
-      name: 'login',
-      component: LoginView
-    },
-    {
-      path: '/home',
-      name: 'home',
-      component: HomeView
-    },
-    {
-      path: '/helpandcontact',
-      name: 'helpandcontact',
-      component: HelpAndContact
-    },
-    {
-      path: '/termsandconditions',
-      name: 'termsandconditions',
-      component: TermsAndConditions
-    },
-    {
-      path: '/contentpolicy',
-      name: 'contentpolicy',
-      component: ContentPolicy
-    },
-    {
-      path: '/faq',
-      name: 'FAQ',
-      component: FAQ
-    },
-    {
-      path: '/guideforcreators',
-      name: 'guideforcreators',
-      component: GuideForCreators
-    },
-
-    {
-      path: '/about',
-      name: 'about',
-      component: About
-    },
-
-    {
-      path: '/transactions',
-      name: 'transactions',
-      component: Transactions
-    },
-
-    {
-      path: '/Hutopy',
-      name: 'Hutopy',
-      component: Hutopy
-    },
-
-    {
-      path: '/Leffet',
-      name: 'Leffet',
-      component: Leffet
-    },
-
-    {
-      path: '/userbrowser',
-      name: 'userbrowser',
-      component: UserBrowser
-    },
-
-    {
-      path: '/chloebeaugrand',
-      name: 'chloebeaugrand',
-      component: ChloeBeaugrand
-    },
-
-    {
-      path: '/guillaumeaime',
-      name: 'guillaumeaime',
-      component: GuillaumeAime
-    },
-
-    {
-      path: '/mathieucaron',
-      name: 'mathieucaron',
-      component: MathieuCaron
-    },
-
-    {
-      path: '/arps',
-      name: 'arps',
-      component: ARPS
-    },
-
-    {
-      path: '/guillaumeaime',
-      name: 'guillaumeaime',
-      component: GuillaumeAime
-    },
-
-
-  ],
+  routes,
   scrollBehavior(to, from, savedPosition) {
     return { top: 0 };
   }