first

src/pages/sidebar/dashboards.vue

@@ -0,0 +1,27 @@
+<route lang="yaml">
+meta:
+  requiresAuth: true
+</route>
+
+<script setup lang="ts">
+const layoutSwitcher = useLayoutSwitcher()
+</script>
+
+<template>
+  <component
+    :is="(layoutSwitcher.dynamicLayoutComponent as any)"
+    v-bind="layoutSwitcher.dynamicLayoutProps"
+    close-on-change
+    default-sidebar="dashboard"
+  >
+    <!-- Content Wrapper -->
+    <RouterView v-slot="{ Component }">
+      <Transition
+        name="fade-fast"
+        mode="out-in"
+      >
+        <component :is="Component" />
+      </Transition>
+    </RouterView>
+  </component>
+</template>

src/pages/sidebar/dashboards/analytics.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Analytics Dashboard'
+})
+
+useHead({
+  title: 'Analytics Dashboard - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <AnalyticsDashboard />
+</template>

src/pages/sidebar/dashboards/banking-1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Banking 1'
+})
+
+useHead({
+  title: 'Banking 1 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <BankingDashboardV1 />
+</template>

src/pages/sidebar/dashboards/banking-2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Banking 2'
+})
+
+useHead({
+  title: 'Banking 2 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <BankingDashboardV2 />
+</template>

src/pages/sidebar/dashboards/banking-3.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Banking 3'
+})
+
+useHead({
+  title: 'Banking 3 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <BankingDashboardV3 />
+</template>

src/pages/sidebar/dashboards/charts-apex.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Charts Apex'
+})
+
+useHead({
+  title: 'Charts Apex - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <ApexDashboard />
+</template>

src/pages/sidebar/dashboards/charts-billboardsjs.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Charts BillboardJS'
+})
+
+useHead({
+  title: 'Charts BillboardJS - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <BillboardJsDashboard />
+</template>

src/pages/sidebar/dashboards/company.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Company Dashboard'
+})
+
+useHead({
+  title: 'Company Dashboard - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <CompanyDashboard />
+</template>

src/pages/sidebar/dashboards/course.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Course Dashboard'
+})
+
+useHead({
+  title: 'Course Dashboard - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <CourseDashboard />
+</template>

src/pages/sidebar/dashboards/ecommerce-1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Ecommerce 1'
+})
+
+useHead({
+  title: 'Ecommerce 1 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <EcommerceDashboardV1 />
+</template>

src/pages/sidebar/dashboards/flights.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Flights Dashboard'
+})
+
+useHead({
+  title: 'Flights Dashboard - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <FlightsDashboard />
+</template>

src/pages/sidebar/dashboards/food-delivery.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Food Delivery App'
+})
+
+useHead({
+  title: 'Food Delivery App - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <FoodDeliveryApp />
+</template>

src/pages/sidebar/dashboards/health.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Health Dashboard'
+})
+
+useHead({
+  title: 'Health Dashboard - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <LifestyleDashboardV3 />
+</template>

src/pages/sidebar/dashboards/hobbies.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Hobbies'
+})
+
+useHead({
+  title: 'Hobbies - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <LifestyleDashboardV2 />
+</template>

src/pages/sidebar/dashboards/human-ressources.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'HR Dashboard'
+})
+
+useHead({
+  title: 'HR Dashboard - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <HumanRessourcesDashboard />
+</template>

src/pages/sidebar/dashboards/index.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const { t } = useI18n()
+
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = t('pages.dashboard-personnal-1.page-title')
+})
+
+useHead(() => ({
+  title: `${t('pages.dashboard-personnal-1.page-title')} - Sidebar - Vuero`,
+}))
+</script>
+
+<template>
+  <PersonalDashboardV1 />
+</template>

src/pages/sidebar/dashboards/influencer.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Influencer Dashboard'
+})
+
+useHead({
+  title: 'Influencer Dashboard - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <div>
+    <Teleport to="[data-teleport-bg]">
+      <div class="lifestyle-dashboard-bg" />
+    </Teleport>
+
+    <LifestyleDashboardV1 />
+  </div>
+</template>

src/pages/sidebar/dashboards/jobs.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Jobs'
+})
+
+useHead({
+  title: 'Jobs Dashboard - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <JobsDashboard />
+</template>

src/pages/sidebar/dashboards/personal-2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Personal 2'
+})
+
+useHead({
+  title: 'Personal 2 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <PersonalDashboardV2 />
+</template>

src/pages/sidebar/dashboards/personal-3.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Personal 3'
+})
+
+useHead({
+  title: 'Personal 3 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <PersonalDashboardV3 />
+</template>

src/pages/sidebar/dashboards/sales.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Sales Dashboard'
+})
+
+useHead({
+  title: 'Sales Dashboard - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <SalesDashboard />
+</template>

src/pages/sidebar/dashboards/soccer.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Soccer'
+})
+
+useHead({
+  title: 'Soccer Dashboard - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <SoccerDashboard />
+</template>

src/pages/sidebar/dashboards/stocks.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Stock Dashboard'
+})
+
+useHead({
+  title: 'Stock Dashboard - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <StockDashboard />
+</template>

src/pages/sidebar/dashboards/video.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Video Dashboard'
+})
+
+useHead({
+  title: 'Video Dashboard - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <LifestyleDashboardV5 />
+</template>

src/pages/sidebar/dashboards/widgets-sample-creative.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Widgets Creative'
+})
+
+useHead({
+  title: 'Widgets Creative - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <WidgetsCreative />
+</template>

src/pages/sidebar/dashboards/widgets-sample-list.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Widgets List'
+})
+
+useHead({
+  title: 'Widgets List - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <WidgetsList />
+</template>

src/pages/sidebar/dashboards/widgets-sample-stats.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Widgets Stats'
+})
+
+useHead({
+  title: 'Widgets Stats - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <WidgetsStats />
+</template>

src/pages/sidebar/dashboards/widgets-sample-ui.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Widgets UI'
+})
+
+useHead({
+  title: 'Widgets UI - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <WidgetsUI />
+</template>

src/pages/sidebar/dashboards/writer.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Writer Dashboard'
+})
+
+useHead({
+  title: 'Writer Dashboard - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <LifestyleDashboardV4 />
+</template>

src/pages/sidebar/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const router = useRouter()
+
+onMounted(() => {
+  router.push('/sidebar/dashboards')
+})
+</script>
+
+<template>
+  <div />
+</template>

src/pages/sidebar/layouts.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const layoutSwitcher = useLayoutSwitcher()
+</script>
+
+<template>
+  <component
+    :is="(layoutSwitcher.dynamicLayoutComponent as any)"
+    v-bind="layoutSwitcher.dynamicLayoutProps"
+    close-on-change
+    default-sidebar="layout"
+  >
+    <!-- Content Wrapper -->
+    <RouterView v-slot="{ Component }">
+      <Transition
+        name="translate-page-x"
+        mode="out-in"
+      >
+        <component :is="Component" />
+      </Transition>
+    </RouterView>
+  </component>
+</template>

src/pages/sidebar/layouts/action-page-1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Action Page'
+})
+
+useHead({
+  title: 'Action Page - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <ActionPageV1 />
+</template>

src/pages/sidebar/layouts/action-page-2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Action Page 2'
+})
+
+useHead({
+  title: 'Action Page 2 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <ActionPageV2 />
+</template>

src/pages/sidebar/layouts/form-layouts-1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Form Layouts 1'
+})
+
+useHead({
+  title: 'Form Layouts 1 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <FormLayout />
+</template>

src/pages/sidebar/layouts/form-layouts-2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Form Layouts 2'
+})
+
+useHead({
+  title: 'Form Layouts 2 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <FormLayoutSplit />
+</template>

src/pages/sidebar/layouts/form-layouts-3.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Form Layouts 3'
+})
+
+useHead({
+  title: 'Form Layouts 3 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <FormLayoutSeparate />
+</template>

src/pages/sidebar/layouts/form-layouts-4.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Form Layouts 4'
+})
+
+useHead({
+  title: 'Form Layouts 4 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <FormLayoutStacked />
+</template>

src/pages/sidebar/layouts/form-layouts-5.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Form Layouts 5'
+})
+
+useHead({
+  title: 'Form Layouts 5 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <FormLayoutStepper />
+</template>

src/pages/sidebar/layouts/grid-cards-1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Grid Cards 1'
+})
+
+useHead({
+  title: 'Grid Cards 1 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <CardsGridV1 />
+</template>

src/pages/sidebar/layouts/grid-cards-2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Grid Cards 2'
+})
+
+useHead({
+  title: 'Grid Cards 2 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <CardsGridV2 />
+</template>

src/pages/sidebar/layouts/grid-cards-3.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Grid Cards 3'
+})
+
+useHead({
+  title: 'Grid Cards 3 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <CardsGridV3 />
+</template>

src/pages/sidebar/layouts/grid-cards-4.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Grid Cards 4'
+})
+
+useHead({
+  title: 'Grid Cards 4 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <CardsGridV4 />
+</template>

src/pages/sidebar/layouts/grid-tiles-1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Grid Tiles 1'
+})
+
+useHead({
+  title: 'Grid Tiles 1 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <TilesGridV1 />
+</template>

src/pages/sidebar/layouts/grid-tiles-2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Grid Tiles 2'
+})
+
+useHead({
+  title: 'Grid Tiles 2 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <TilesGridV2 />
+</template>

src/pages/sidebar/layouts/grid-tiles-3.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Grid Tiles 3'
+})
+
+useHead({
+  title: 'Grid Tiles 3 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <TilesGridV3 />
+</template>

src/pages/sidebar/layouts/grid-users-1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Grid Users 1'
+})
+
+useHead({
+  title: 'Grid Users 1 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <UsersGridV1 />
+</template>

src/pages/sidebar/layouts/grid-users-2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Grid Users 2'
+})
+
+useHead({
+  title: 'Grid Users 2 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <UsersGridV2 />
+</template>

src/pages/sidebar/layouts/grid-users-3.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+type TabId = 'all' | 'team'
+const activeTab = ref<TabId>('all')
+
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Grid Users 3'
+})
+
+useHead({
+  title: 'Grid Users 3 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <UsersGridV3 :active-tab="activeTab" />
+</template>

src/pages/sidebar/layouts/grid-users-4.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Grid Users 4'
+})
+
+useHead({
+  title: 'Grid Users 4 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <UsersGridV4 />
+</template>

src/pages/sidebar/layouts/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'List View 1'
+})
+
+useHead({
+  title: 'List View 1 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <ViewListV1 />
+</template>

src/pages/sidebar/layouts/kanban-board.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Kanban Board'
+})
+
+useHead({
+  title: 'Kanban Board - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <KanbanApp />
+</template>

src/pages/sidebar/layouts/list-datatable-1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Table List 1'
+})
+
+useHead({
+  title: 'Table List 1 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <TableListV1 />
+</template>

src/pages/sidebar/layouts/list-datatable-2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Table List 2'
+})
+
+useHead({
+  title: 'Table List 2 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <TableListV2 />
+</template>

src/pages/sidebar/layouts/list-datatable-3.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Table List 3'
+})
+
+useHead({
+  title: 'Table List 3 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <TableListV3 />
+</template>

src/pages/sidebar/layouts/list-flex-1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'List Flex 1'
+})
+
+useHead({
+  title: 'List Flex 1 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <FlexListV1 />
+</template>

src/pages/sidebar/layouts/list-flex-2.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+type TabId = 'active' | 'closed'
+const activeTab = ref<TabId>('active')
+
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'List Flex 2'
+})
+
+useHead({
+  title: 'List Flex 2 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <FlexListV2 :active-tab="activeTab" />
+</template>

src/pages/sidebar/layouts/list-flex-3.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+type TabId = 'all' | 'saved'
+const activeTab = ref<TabId>('all')
+
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'List Flex 3'
+})
+
+useHead({
+  title: 'List Flex 3 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <FlexListV3 :active-tab="activeTab" />
+</template>

src/pages/sidebar/layouts/list-view-2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'List View 2'
+})
+
+useHead({
+  title: 'List View 2 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <ViewListV2 />
+</template>

src/pages/sidebar/layouts/list-view-3.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'List View 3'
+})
+
+useHead({
+  title: 'List View 3 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <ViewListV3 />
+</template>

src/pages/sidebar/layouts/list-view-4.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+type TabId = 'all' | 'saved'
+const activeTab = ref<TabId>('all')
+
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'List View 4'
+})
+
+useHead({
+  title: 'List View 4 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <ViewListV4 :active-tab="activeTab" />
+</template>

src/pages/sidebar/layouts/onboarding-page-1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Onboarding Page 1'
+})
+
+useHead({
+  title: 'Onboarding Page 1 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <OnboardingV1 />
+</template>

src/pages/sidebar/layouts/onboarding-page-2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Onboarding Page 2'
+})
+
+useHead({
+  title: 'Onboarding Page 2 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <OnboardingV2 />
+</template>

src/pages/sidebar/layouts/onboarding-page-3.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Onboarding Page 3'
+})
+
+useHead({
+  title: 'Onboarding Page 3 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <OnboardingV3 />
+</template>

src/pages/sidebar/layouts/onboarding-page-4.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Onboarding Page 4'
+})
+
+useHead({
+  title: 'Onboarding Page 4 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <OnboardingV4 />
+</template>

src/pages/sidebar/layouts/onboarding-page-5.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Onboarding Page 5'
+})
+
+useHead({
+  title: 'Onboarding Page 5 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <OnboardingV5 />
+</template>

src/pages/sidebar/layouts/onboarding-welcome.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Welcome'
+})
+
+useHead({
+  title: 'Welcome - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <OnboardingStandard />
+</template>

src/pages/sidebar/layouts/placeload-1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Placeload List'
+})
+
+useHead({
+  title: 'Placeload List - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <PlaceloadV1 />
+</template>

src/pages/sidebar/layouts/placeload-2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Placeload Table'
+})
+
+useHead({
+  title: 'Placeload Table - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <PlaceloadV2 />
+</template>

src/pages/sidebar/layouts/placeload-3.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Placeload Grid'
+})
+
+useHead({
+  title: 'Placeload Grid - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <PlaceloadV3 />
+</template>

src/pages/sidebar/layouts/placeload-4.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Placeload Tiles'
+})
+
+useHead({
+  title: 'Placeload Tiles - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <PlaceloadV4 />
+</template>

src/pages/sidebar/layouts/profile-edit.vue

@@ -0,0 +1,454 @@
+<template>
+  <div>
+    <!--Edit Profile-->
+    <div class="account-wrapper">
+      <div class="columns">
+        <!--Navigation-->
+        <div class="column is-4">
+          <div class="account-box is-navigation">
+            <VBlock
+              title="Erik Kovalsky"
+              subtitle="Product Manager"
+              center
+            >
+              <template #icon>
+                <VAvatar
+                  size="large"
+                  picture="/images/avatars/svg/vuero-1.svg"
+                  badge="/images/icons/flags/united-states-of-america.svg"
+                />
+              </template>
+            </VBlock>
+
+            <div class="account-menu">
+              <RouterLink
+                to="/sidebar/layouts/profile-edit"
+                class="account-menu-item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="lnil lnil-user-alt"
+                />
+                <span>General</span>
+                <span class="end rtl-reflect">
+                  <i
+                    aria-hidden="true"
+                    class="fas fa-arrow-right"
+                  />
+                </span>
+              </RouterLink>
+              <RouterLink
+                to="/sidebar/layouts/profile-edit/experience"
+                class="account-menu-item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="lnil lnil-crown-alt"
+                />
+                <span>Experience</span>
+                <span class="end rtl-reflect">
+                  <i
+                    aria-hidden="true"
+                    class="fas fa-arrow-right"
+                  />
+                </span>
+              </RouterLink>
+              <RouterLink
+                to="/sidebar/layouts/profile-edit/skills"
+                class="account-menu-item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="lnil lnil-quill"
+                />
+                <span>Skills</span>
+                <span class="end rtl-reflect">
+                  <i
+                    aria-hidden="true"
+                    class="fas fa-arrow-right"
+                  />
+                </span>
+              </RouterLink>
+              <RouterLink
+                to="/sidebar/layouts/profile-edit/settings"
+                class="account-menu-item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="lnil lnil-cog"
+                />
+                <span>Settings</span>
+                <span class="end rtl-reflect">
+                  <i
+                    aria-hidden="true"
+                    class="fas fa-arrow-right"
+                  />
+                </span>
+              </RouterLink>
+            </div>
+          </div>
+        </div>
+        <div class="column is-8">
+          <RouterView v-slot="{ Component }">
+            <Transition
+              name="translate-page-y"
+              mode="out-in"
+            >
+              <component :is="Component" />
+            </Transition>
+          </RouterView>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@import '/@src/scss/abstracts/all';
+
+.is-navbar {
+  .account-wrapper {
+    margin-top: 30px;
+  }
+}
+
+.account-wrapper {
+  padding-bottom: 60px;
+
+  .account-box {
+    @include vuero-s-card;
+
+    &.is-navigation {
+      .media-flex-center {
+        padding-bottom: 20px;
+
+        .flex-meta {
+          span {
+            &:first-child {
+              font-size: 1.3rem;
+            }
+          }
+        }
+      }
+
+      .account-menu {
+        .account-menu-item {
+          display: flex;
+          align-items: center;
+          padding: 12px 16px;
+          border: 1px solid transparent;
+          border-radius: 8px;
+          margin-bottom: 5px;
+          transition: all 0.3s; // transition-all test
+
+          &.router-link-exact-active {
+            box-shadow: var(--light-box-shadow);
+            border-color: color-mix(in oklab, var(--fade-grey), black 3%);
+
+            span,
+            .lnil {
+              color: var(--primary);
+            }
+
+            .end {
+              display: block;
+            }
+          }
+
+          &:not(.router-link-exact-active) {
+            &:hover {
+              background: color-mix(in oklab, var(--fade-grey), white 3%);
+            }
+          }
+
+          .lnil {
+            margin-inline-end: 8px;
+            font-size: 1.1rem;
+            color: var(--light-text);
+
+            &.fas,
+            .fal,
+            .far {
+              font-size: 0.9rem;
+            }
+          }
+
+          span {
+            font-family: var(--font-alt);
+            font-size: 0.95rem;
+            color: var(--dark-text);
+          }
+
+          .end {
+            margin-inline-start: auto;
+            display: none;
+          }
+        }
+      }
+    }
+
+    &.is-form {
+      padding: 0;
+
+      &.is-footerless {
+        padding-bottom: 20px;
+      }
+
+      .form-head,
+      .form-foot {
+        padding: 12px 20px;
+
+        .form-head-inner,
+        .form-foot-inner {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }
+      }
+
+      .form-head {
+        border-bottom: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
+        transition: all 0.3s; // transition-all test
+
+        &.is-stuck {
+          background: var(--white);
+          padding-inline-end: 80px;
+          border-inline-start: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
+        }
+
+        .left {
+          h3 {
+            font-family: var(--font-alt);
+            font-size: 1.2rem;
+            line-height: 1.3;
+          }
+
+          p {
+            font-size: 0.95rem;
+          }
+        }
+      }
+
+      .form-foot {
+        border-top: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
+      }
+
+      .form-body {
+        padding: 20px;
+
+        .fieldset {
+          padding: 20px 0;
+          max-width: 480px;
+          margin: 0 auto;
+
+          .fieldset-heading {
+            margin-bottom: 20px;
+
+            h4 {
+              font-family: var(--font-alt);
+              font-weight: 600;
+              font-size: 1rem;
+            }
+
+            p {
+              font-size: 0.9rem;
+            }
+          }
+
+          .v-avatar {
+            position: relative;
+            display: block;
+            margin: 0 auto;
+
+            .edit-button {
+              position: absolute;
+              bottom: 0;
+              inset-inline-end: 0;
+            }
+          }
+
+          .setting-list {
+            .setting-form {
+              text-align: center;
+
+              .filepond-profile-wrap {
+                margin: 0 auto 10px !important;
+              }
+            }
+
+            .setting-item {
+              display: flex;
+              align-items: center;
+              margin-bottom: 24px;
+
+              .icon-wrap {
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 50px;
+                min-width: 50px;
+                height: 50px;
+                border-radius: var(--radius-rounded);
+                background: color-mix(in oklab, var(--fade-grey), white 2%);
+                border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
+                color: var(--light-text);
+
+                &.has-img {
+                  border-color: var(--primary);
+
+                  img {
+                    width: 36px;
+                    min-width: 36px;
+                    height: 36px;
+                  }
+                }
+
+                .lnil {
+                  font-size: 1.4rem;
+                }
+              }
+
+              img {
+                display: block;
+                width: 50px;
+                min-width: 50px;
+                height: 50px;
+                border-radius: var(--radius-rounded);
+                border: 1px solid transparent;
+              }
+
+              .meta {
+                margin-inline-start: 10px;
+
+                > span {
+                  font-family: var(--font);
+                  display: block;
+
+                  &:first-child {
+                    font-family: var(--font-alt);
+                    font-weight: 600;
+                    color: var(--dark-text);
+                    font-size: 0.9rem;
+                  }
+
+                  &:nth-child(2),
+                  &:nth-child(3) {
+                    font-size: 0.85rem;
+                    color: var(--light-text);
+
+                    .fas {
+                      position: relative;
+                      top: -2px;
+                      font-size: 4px;
+                      margin: 0 6px;
+                    }
+                  }
+
+                  &:nth-child(3) {
+                    color: var(--primary);
+                  }
+
+                  span {
+                    display: inline-block;
+                  }
+                }
+              }
+
+              .end {
+                margin-inline-start: auto;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.is-dark {
+  .account-wrapper {
+    .account-box {
+      @include vuero-card--dark;
+
+      &.is-navigation {
+        .account-menu {
+          .account-menu-item {
+            &.router-link-exact-active {
+              background: color-mix(in oklab, var(--dark-sidebar), white 8%);
+              border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
+
+              i,
+              span {
+                color: var(--primary);
+              }
+            }
+
+            &:not(.router-link-exact-active) {
+              &:hover {
+                background: color-mix(in oklab, var(--dark-sidebar), white 10%);
+              }
+            }
+
+            span {
+              color: var(--dark-dark-text);
+            }
+          }
+        }
+      }
+
+      &.is-form {
+        .form-head,
+        .form-foot {
+          border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
+        }
+
+        .form-head {
+          &.is-stuck {
+            background: var(--dark-sidebar);
+            border-color: color-mix(in oklab, var(--dark-sidebar), white 6%);
+          }
+
+          .left {
+            h3 {
+              color: var(--dark-dark-text);
+            }
+          }
+        }
+
+        .form-body {
+          .fieldset {
+            .fieldset-heading {
+              h4 {
+                color: var(--dark-dark-text);
+              }
+            }
+
+            .setting-list {
+              .setting-item {
+                > img,
+                > .icon-wrap,
+                > .icon-wrap img {
+                  border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
+                }
+
+                > .icon-wrap {
+                  background: color-mix(in oklab, var(--dark-sidebar), white 2%);
+                }
+
+                .meta {
+                  > span {
+                    &:nth-child(3) {
+                      color: var(--primary);
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/sidebar/layouts/profile-edit/experience.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Profile Edit 2'
+})
+
+useHead({
+  title: 'Profile Edit 2 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <EditProfileExperience />
+</template>

src/pages/sidebar/layouts/profile-edit/index.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Profile Edit 1'
+})
+
+useHead({
+  title: 'Profile Edit 1 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <EditProfileGeneral />
+</template>

src/pages/sidebar/layouts/profile-edit/settings.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Profile Edit 4'
+})
+
+useHead({
+  title: 'Profile Edit 4 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <EditProfileSettings />
+</template>

src/pages/sidebar/layouts/profile-edit/skills.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Profile Edit 3'
+})
+
+useHead({
+  title: 'Profile Edit 3 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <EditProfileSkills />
+</template>

src/pages/sidebar/layouts/profile-notifications.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Profile Notifications'
+})
+
+useHead({
+  title: 'Profile Notifications - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <NotificationPage />
+</template>

src/pages/sidebar/layouts/profile-settings.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Profile Settings'
+})
+
+useHead({
+  title: 'Profile Settings - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <SettingsProfile />
+</template>

src/pages/sidebar/layouts/profile-view.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Profile View'
+})
+
+useHead({
+  title: 'Profile View - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <ViewProfile />
+</template>

src/pages/sidebar/layouts/projects-details.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Projects project'
+})
+
+useHead({
+  title: 'Projects project - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <ProjectDetailsV1 />
+</template>

src/pages/sidebar/layouts/projects-projects-1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Projects projects'
+})
+
+useHead({
+  title: 'Projects projects - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <ProjectsViewV1 />
+</template>

src/pages/sidebar/layouts/projects-projects-2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Projects projects 2'
+})
+
+useHead({
+  title: 'Projects projects 2 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <ProjectsViewV2 />
+</template>

src/pages/sidebar/layouts/projects-projects-3.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Projects projects 3'
+})
+
+useHead({
+  title: 'Projects projects 3 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <ProjectsViewV3 />
+</template>

src/pages/sidebar/layouts/saas-billing.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Saas Billing'
+})
+
+useHead({
+  title: 'Saas Billing - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <SaasBillingApp />
+</template>

src/pages/sidebar/layouts/search-empty.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Search Empty'
+})
+
+useHead({
+  title: 'Search Empty - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <EmptySearch />
+</template>

src/pages/sidebar/layouts/search-results.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Search Results'
+})
+
+useHead({
+  title: 'Search Results - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <FacetSearch />
+</template>

src/pages/sidebar/layouts/utility-account-confirm.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Utility Account Confirm'
+})
+
+useHead({
+  title: 'Utility Account Confirm - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <ConfirmAccount />
+</template>

src/pages/sidebar/layouts/utility-invoice.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Utility Invoice'
+})
+
+useHead({
+  title: 'Utility Invoice - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <Invoice />
+</template>

src/pages/sidebar/layouts/utility-promotion.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Utility Promotion'
+})
+
+useHead({
+  title: 'Utility Promotion - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <Promotion />
+</template>

src/pages/sidebar/maps-1.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const panels = usePanels()
+const layoutSwitcher = useLayoutSwitcher()
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Maps 1'
+})
+
+useHead({
+  title: 'Maps 1 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <component
+    :is="(layoutSwitcher.dynamicLayoutComponent as any)"
+    v-bind="layoutSwitcher.dynamicLayoutProps"
+    open-on-mounted
+    default-sidebar="dashboard"
+    size="full"
+  >
+    <template #page-heading>
+      <span />
+    </template>
+
+    <MapsDashboard>
+      <template #header>
+        <div class="content-section-header">
+          <h2 class="title is-4 is-narrow">
+            Maps 1
+          </h2>
+
+          <div class="toolbar desktop-toolbar">
+            <ToolbarNotification />
+
+            <a
+              class="toolbar-link right-panel-trigger"
+              aria-label="View activity"
+              tabindex="0"
+              role="button"
+              @keydown.enter.prevent="panels.setActive('activity')"
+              @click="panels.setActive('activity')"
+            >
+              <VIcon
+                icon="lucide:grid"
+              />
+            </a>
+          </div>
+        </div>
+      </template>
+    </MapsDashboard>
+  </component>
+</template>

src/pages/sidebar/maps-2.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+const panels = usePanels()
+const layoutSwitcher = useLayoutSwitcher()
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Maps 1'
+})
+
+useHead({
+  title: 'Maps 1 - Sidebar - Vuero',
+})
+</script>
+
+<template>
+  <component
+    :is="(layoutSwitcher.dynamicLayoutComponent as any)"
+    v-bind="layoutSwitcher.dynamicLayoutProps"
+    open-on-mounted
+    default-sidebar="dashboard"
+    size="full"
+  >
+    <template #page-heading>
+      <span />
+    </template>
+
+    <MapsDashboard reversed>
+      <template #header>
+        <div class="content-section-header">
+          <h2 class="title is-4 is-narrow">
+            Maps 2
+          </h2>
+
+          <div class="toolbar desktop-toolbar">
+            <ToolbarNotification />
+
+            <a
+              class="toolbar-link right-panel-trigger"
+              aria-label="View activity"
+              tabindex="0"
+              role="button"
+              @keydown.enter.prevent="panels.setActive('activity')"
+              @click="panels.setActive('activity')"
+            >
+              <VIcon
+                icon="lucide:grid"
+              />
+            </a>
+          </div>
+        </div>
+      </template>
+    </MapsDashboard>
+  </component>
+</template>

src/pages/sidebar/priceSearchManage/PriceSearchList.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="content-wrapper">
+    <h1>가격조사 목록</h1>
+    <table v-if="prcsList.length > 0">
+      <thead>
+      <tr>
+        <th>ID</th>
+        <th>상품명</th>
+        <th>가격</th>
+        <th>조사일</th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="item in prcsList" :key="item.id">
+        <td>{{ item.id }}</td>
+        <td>{{ item.productName }}</td>
+        <td>{{ item.price }}</td>
+        <td>{{ item.date }}</td>
+      </tr>
+      </tbody>
+    </table>
+    <p v-else>데이터가 없습니다.</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      prcsList: [
+        { id: 1, productName: '상품A', price: 10000, date: '2025-05-08' },
+        { id: 2, productName: '상품B', price: 20000, date: '2025-05-09' }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+.content-wrapper {
+  padding: 20px;
+}
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px;
+  text-align: left;
+}
+th {
+  background-color: #f2f2f2;
+}
+</style>