New Layouts, settings pages, WIP

Author: connorabbas

package-lock.json

@@ -24,7 +24,6 @@
         "eslint-plugin-vue": "^9.32.0",
         "nprogress": "^0.2.0",
         "pinia": "^2.1.7",
-        "primeicons": "^7.0.0",
         "primevue": "^4.3.0",
         "tailwindcss": "^4.1.0",
         "tailwindcss-primeui": "^0.5.0",

package.json

@@ -1,9 +1,8 @@
 import './assets/css/app.css';
 import './assets/css/tailwind.css';
 import 'nprogress/nprogress.css';
-import 'primeicons/primeicons.css';
 
-import { useDark } from '@vueuse/core';
+import { useColorMode } from '@vueuse/core';
 import customThemePreset from './theme/noir-preset';
 
 import { createApp } from 'vue';
@@ -20,9 +19,9 @@ import PageTitleSection from '@/components/PageTitleSection.vue';
 
 const app = createApp(App);
 const pinia = createPinia();
-const darkMode = useDark(); // set Light/Dark Mode
+const colorMode = useColorMode({ emitAuto: true });
 
-app.provide('darkMode', darkMode)
+app.provide('colorMode', colorMode)
     .use(pinia)
     .use(router)
     .use(PrimeVue, {

src/app.js

@@ -11,4 +11,9 @@ body {
 #nprogress .bar {
     background: var(--p-primary-500) !important;
     z-index: 9999999 !important;
+}
+
+.lucide {
+    width: 16px;
+    height: 16px;
 }

src/assets/css/app.css

@@ -0,0 +1,27 @@
+<script setup>
+import { useTemplateRef } from 'vue';
+
+const modalOpen = defineModel(false, {
+    type: Boolean,
+});
+const passwordInput = useTemplateRef('password-input');
+
+function focusPasswordInput() {
+    passwordInput.value.$el.focus();
+}
+</script>
+
+<template>
+    <Dialog
+        v-model:visible="modalOpen"
+        position="center"
+        header="Are you sure you want to delete your account?"
+        :style="{ width: '40rem' }"
+        :draggable="false"
+        dismissableMask
+        modal
+        @show="focusPasswordInput"
+    >
+       
+    </Dialog>
+</template>

src/components/DeleteUserModal.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue';
+import Breadcrumb from 'primevue/breadcrumb';
+import { ChevronRight } from 'lucide-vue-next';
+import type { ExtendedMenuItem } from '@/types';
+
+const componentProps = defineProps<{
+    model: ExtendedMenuItem[]
+}>();
+
+type BreadcrumbType = InstanceType<typeof Breadcrumb>;
+const childRef = useTemplateRef<BreadcrumbType>('child-ref');
+defineExpose({
+    childRef,
+});
+</script>
+
+<template>
+    <Breadcrumb
+        ref="child-ref"
+        :model="componentProps.model"
+        pt:root:class="p-0 bg-transparent"
+    >
+        <template #item="{ item, props }">
+            <RouterLink
+                v-if="item.route"
+                v-slot="{ href, navigate }"
+                :to="item.route"
+                custom
+            >
+                <a
+                    :href="href"
+                    v-bind="props.action"
+                    class="p-breadcrumb-item-link"
+                    @click="navigate"
+                >
+                    <i
+                        v-if="item.icon"
+                        :class="item.icon"
+                        class="p-breadcrumb-item-icon"
+                    />
+                    <component
+                        :is="item.lucideIcon"
+                        v-else-if="item.lucideIcon"
+                        class="p-breadcrumb-item-icon"
+                    />
+                    <span class="p-breadcrumb-item-label">{{ item.label }}</span>
+                </a>
+            </RouterLink>
+            <a
+                v-else
+                :href="item.url"
+                :target="item.target"
+                v-bind="props.action"
+            >
+                <i
+                    v-if="item.icon"
+                    :class="item.icon"
+                    class="p-breadcrumb-item-icon"
+                />
+                <component
+                    :is="item.lucideIcon"
+                    v-else-if="item.lucideIcon"
+                    class="p-breadcrumb-item-icon"
+                />
+                <span class="p-breadcrumb-item-label">{{ item.label }}</span>
+            </a>
+        </template>
+        <template #separator>
+            <ChevronRight />
+        </template>
+    </Breadcrumb>
+</template>

src/components/primevue/menu/Breadcrumb.vue

@@ -0,0 +1,87 @@
+import { ref, computed, onMounted, onUnmounted, watchEffect } from 'vue';
+import { useRoute } from 'vue-router';
+import { LayoutGrid, House, Info, Github, Code, Settings, LogOut } from 'lucide-vue-next';
+import { useAuthStore } from '@/stores/auth';
+
+export function useAppLayout() {
+    const authStore = useAuthStore();
+    const route = useRoute();
+    const currentRoute = computed(() => route.name);
+
+    const userName = computed(() => authStore?.user?.name ?? 'User');
+
+    // Menu items
+    const menuItems = computed(() => [
+        {
+            label: 'Home',
+            lucideIcon: House,
+            route: { name: 'welcome' },
+            active: currentRoute.value == 'welcome',
+        },
+        {
+            label: 'Dashboard',
+            lucideIcon: LayoutGrid,
+            route: { name: 'dashboard' },
+            active: currentRoute.value == 'dashboard',
+        },
+        {
+            label: 'Info',
+            lucideIcon: Info,
+            items: [
+                {
+                    label: 'PrimeVue Docs',
+                    url: 'https://primevue.org/',
+                    lucideIcon: Code,
+                },
+                {
+                    label: 'Starter Kit Repo',
+                    url: 'https://github.com/connorabbas/laravel-primevue-starter-kit',
+                    lucideIcon: Github,
+                },
+            ],
+        },
+    ]);
+
+    // User menu and logout functionality.
+    const userMenuItems = [
+        {
+            label: 'Settings',
+            route: { name: 'settings.profile.edit' },
+            lucideIcon: Settings,
+        },
+        {
+            separator: true,
+        },
+        {
+            label: 'Log Out',
+            lucideIcon: LogOut,
+            command: () => authStore.logout(),
+        },
+    ];
+
+    // Mobile menu
+    const mobileMenuOpen = ref(false);
+    const windowWidth = ref(window.innerWidth);
+    const updateWidth = () => {
+        windowWidth.value = window.innerWidth;
+    };
+    onMounted(() => {
+        window.addEventListener('resize', updateWidth);
+    });
+    onUnmounted(() => {
+        window.removeEventListener('resize', updateWidth);
+    });
+    watchEffect(() => {
+        if (windowWidth.value > 1024) {
+            mobileMenuOpen.value = false;
+        }
+    });
+
+    return {
+        userName,
+        currentRoute,
+        menuItems,
+        userMenuItems,
+        mobileMenuOpen,
+    };
+}