first

src/pages/navbar/dashboards.vue

@@ -0,0 +1,25 @@
+<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"
+  >
+    <!-- Content Wrapper -->
+    <RouterView v-slot="{ Component }">
+      <Transition
+        name="fade-fast"
+        mode="out-in"
+      >
+        <component :is="Component" />
+      </Transition>
+    </RouterView>
+  </component>
+</template>

src/pages/navbar/dashboards/analytics.vue

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

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <BankingDashboardV1 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <BankingDashboardV2 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <BankingDashboardV3 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <ApexDashboard />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <BillboardJsDashboard />
+</template>

src/pages/navbar/dashboards/company.vue

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

src/pages/navbar/dashboards/course.vue

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

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

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

src/pages/navbar/dashboards/flights.vue

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

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

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

src/pages/navbar/dashboards/health.vue

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

src/pages/navbar/dashboards/hobbies.vue

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

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <HumanRessourcesDashboard class="has-navbar-spacing" />
+</template>

src/pages/navbar/dashboards/index.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <PersonalDashboardV1 />
+</template>

src/pages/navbar/dashboards/influencer.vue

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

src/pages/navbar/dashboards/jobs.vue

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

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <PersonalDashboardV2 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <PersonalDashboardV3 class="has-navbar-spacing" />
+</template>

src/pages/navbar/dashboards/sales.vue

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

src/pages/navbar/dashboards/soccer.vue

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

src/pages/navbar/dashboards/stocks.vue

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

src/pages/navbar/dashboards/video.vue

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

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <WidgetsCreative />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <WidgetsList />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <WidgetsStats />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <WidgetsUI />
+</template>

src/pages/navbar/dashboards/writer.vue

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

src/pages/navbar/index.vue

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

src/pages/navbar/layouts.vue

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

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

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

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <ActionPageV2 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <FormLayout class="is-navbar" />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <FormLayoutSplit class="is-navbar" />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <FormLayoutSeparate />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <FormLayoutStacked class="is-navbar" />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <FormLayoutStepper class="is-navbar" />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <CardsGridV1 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <CardsGridV2 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <CardsGridV3 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <CardsGridV4 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <TilesGridV1 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <TilesGridV2 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <TilesGridV3 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <UsersGridV1 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <UsersGridV2 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <UsersGridV3 :active-tab="activeTab" />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <UsersGridV4 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <ViewListV1 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <KanbanApp />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <TableListV1 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <TableListV2 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <TableListV3 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <FlexListV1 />
+</template>

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

@@ -0,0 +1,20 @@
+<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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <FlexListV2
+    class="is-navbar"
+    :active-tab="activeTab"
+  />
+</template>

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

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

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'List View 2'
+})
+
+useHead({
+  title: 'List View 2 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <div
+    class="page-content is-relative tabs-wrapper is-slider is-squared is-inverted is-navbar-lg"
+  >
+    <ViewListV2 />
+  </div>
+</template>

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

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+type TabId = 'active' | 'inactive'
+const activeTab = ref<TabId>('active')
+
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'List View 3'
+})
+
+useHead({
+  title: 'List View 3 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <div
+    class="page-content is-relative tabs-wrapper is-slider is-squared is-inverted is-navbar-lg"
+  >
+    <ViewListV3 :active-tab="activeTab" />
+  </div>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'List View 4'
+})
+
+useHead({
+  title: 'List View 4 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <div
+    class="page-content is-relative tabs-wrapper is-slider is-squared is-inverted is-navbar-lg"
+  >
+    <ViewListV4 />
+  </div>
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <OnboardingV1 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <OnboardingV2 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <OnboardingV3 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <OnboardingV4 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <OnboardingV5 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <OnboardingStandard />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <PlaceloadV1 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <PlaceloadV2 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <PlaceloadV3 />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <PlaceloadV4 />
+</template>

src/pages/navbar/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="/navbar/layouts/profile-edit"
+                class="account-menu-item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="lnil lnil-user-alt"
+                />
+                <span>General</span>
+                <span class="end">
+                  <i
+                    aria-hidden="true"
+                    class="fas fa-arrow-right"
+                  />
+                </span>
+              </RouterLink>
+              <RouterLink
+                to="/navbar/layouts/profile-edit-experience"
+                class="account-menu-item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="lnil lnil-crown-alt"
+                />
+                <span>Experience</span>
+                <span class="end">
+                  <i
+                    aria-hidden="true"
+                    class="fas fa-arrow-right"
+                  />
+                </span>
+              </RouterLink>
+              <RouterLink
+                to="/navbar/layouts/profile-edit-skills"
+                class="account-menu-item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="lnil lnil-quill"
+                />
+                <span>Skills</span>
+                <span class="end">
+                  <i
+                    aria-hidden="true"
+                    class="fas fa-arrow-right"
+                  />
+                </span>
+              </RouterLink>
+              <RouterLink
+                to="/navbar/layouts/profile-edit-settings"
+                class="account-menu-item"
+              >
+                <i
+                  aria-hidden="true"
+                  class="lnil lnil-cog"
+                />
+                <span>Settings</span>
+                <span class="end">
+                  <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="in-out"
+            >
+              <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/navbar/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/navbar/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/navbar/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/navbar/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/navbar/layouts/profile-notifications.vue

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

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <SettingsProfile />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <ViewProfile />
+</template>

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Projects Project 3'
+})
+
+useHead({
+  title: 'Projects Projects 3 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <div class="is-navbar-lg">
+    <ProjectsViewV3 />
+  </div>
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <SaasBillingApp />
+</template>

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

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

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

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

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <ConfirmAccount />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <Invoice class="is-navbar" />
+</template>

src/pages/navbar/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 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <Promotion />
+</template>

src/pages/navbar/maps-1.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const layoutSwitcher = useLayoutSwitcher()
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Maps 1'
+})
+
+useHead({
+  title: 'Maps 1 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <component
+    :is="(layoutSwitcher.dynamicLayoutComponent as any)"
+    v-bind="layoutSwitcher.dynamicLayoutProps"
+    size="full"
+  >
+    <template #page-heading>
+      <span />
+    </template>
+    <MapsDashboard />
+  </component>
+</template>

src/pages/navbar/maps-2.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const layoutSwitcher = useLayoutSwitcher()
+const pageTitle = useVueroContext<string>('page-title')
+onMounted(() => {
+  pageTitle.value = 'Maps 2'
+})
+
+useHead({
+  title: 'Maps 2 - Navbar - Vuero',
+})
+</script>
+
+<template>
+  <component
+    :is="(layoutSwitcher.dynamicLayoutComponent as any)"
+    v-bind="layoutSwitcher.dynamicLayoutProps"
+    size="full"
+  >
+    <template #page-heading>
+      <span />
+    </template>
+
+    <MapsDashboard reversed />
+  </component>
+</template>