Fixes

Author: connorabbas

src/components/ToggleDarkModeButton.vue

@@ -33,10 +33,7 @@ export function useAxiosErrorHandling() {
             const status = error.response.status;
             const responseData = error.response.data;
 
-            if (status === 401) {
-                //router.push({ name: 'login' });
-                showErrorToast('Unauthorized', 'Please log in to continue.');
-            } else if (status === 419) {
+            if (status === 419) {
                 router.push({ name: 'login' });
                 showErrorToast('Session Expired', 'Please log in again.');
             } else if (status === 422 && responseData?.errors) {

src/composables/useAxiosErrorHandling.js

@@ -41,7 +41,7 @@ const sidebarNavItems = computed(() => [
         <div class="flex flex-col gap-6 lg:gap-8 lg:flex-row">
             <aside class="w-full md:max-w-2xl lg:w-48">
                 <nav class="flex flex-col space-x-0 space-y-1">
-                    <!-- <RouterLink
+                    <RouterLink
                         v-for="item in sidebarNavItems"
                         :key="item.route"
                         :to="item.route"
@@ -52,28 +52,11 @@ const sidebarNavItems = computed(() => [
                             :severity="item.active ? 'secondary' : ''"
                             :variant="item.active ? 'outlined' : 'text'"
                             :href="item.route"
-                            as="RouterLink"
+                            fluid
                         >
                             {{ item.title }}
                         </Button>
-                    </RouterLink> -->
-                    <!-- TODO -->
-                    <Button
-                        v-for="item in sidebarNavItems"
-                        :key="item.route"
-                        :severity="item.active ? 'secondary' : ''"
-                        :variant="item.active ? 'outlined' : 'text'"
-                        class="flex items-center justify-start no-underline"
-                        v-slot="slotProps"
-                        asChild
-                    >
-                        <RouterLink
-                            :to="item.route"
-                            :class="slotProps.class"
-                        >
-                            {{ item.title }}
-                        </RouterLink>
-                    </Button>
+                    </RouterLink>
                 </nav>
             </aside>
 

src/layouts/UserSettingsLayout.vue

@@ -1,7 +1,6 @@
 <script setup>
-import ToggleDarkModeButton from '@/components/ToggleDarkModeButton.vue';
 import { useAuthStore } from '@/stores/auth';
-import { Card } from 'primevue';
+import { LayoutGrid, LogIn, Settings, UserPlus } from 'lucide-vue-next';
 
 const authStore = useAuthStore();
 await authStore.fetchUser();
@@ -35,37 +34,48 @@ await authStore.fetchUser();
                                 <RouterLink :to="{ name: 'dashboard' }">
                                     <Button
                                         label="Dashboard"
-                                        icon="pi pi-th-large"
                                         class="mr-4"
-                                    />
+                                    >
+                                        <template #icon>
+                                            <LayoutGrid />
+                                        </template>
+                                    </Button>
                                 </RouterLink>
                                 <RouterLink :to="{ name: 'settings.profile.edit' }">
                                     <Button
                                         outlined
-                                        label="Profile"
-                                        icon="pi pi-user"
+                                        label="Profile Settings"
                                         class="mr-4"
-                                    />
+                                    >
+                                        <template #icon>
+                                            <Settings />
+                                        </template>
+                                    </Button>
                                 </RouterLink>
                             </template>
                             <template v-else>
                                 <RouterLink :to="{ name: 'login' }">
                                     <Button
                                         label="Login"
-                                        icon="pi pi-sign-in"
                                         class="mr-4"
-                                    />
+                                    >
+                                        <template #icon>
+                                            <LogIn />
+                                        </template>
+                                    </Button>
                                 </RouterLink>
                                 <RouterLink :to="{ name: 'register' }">
                                     <Button
                                         outlined
                                         label="Register"
-                                        icon="pi pi-user-plus"
                                         class="mr-4"
-                                    />
+                                    >
+                                        <template #icon>
+                                            <UserPlus />
+                                        </template>
+                                    </Button>
                                 </RouterLink>
                             </template>
-                            <ToggleDarkModeButton outlined />
                         </section>
                     </div>
                 </template>

src/views/Welcome.vue

@@ -1,3 +1,7 @@
+<script setup>
+import { ArrowLeft } from 'lucide-vue-next';
+</script>
+
 <template>
     <main>
         <div class="h-screen flex items-center justify-center">
@@ -6,13 +10,15 @@
                     <div class="text-center">
                         <section>
                             <h2 class="mb-8 font-extrabold text-9xl"> <span class="sr-only">Error</span>404 </h2>
-                            <p class="mb-8 text-2xl font-semibold md:text-3xl text-muted-color">Sorry, we couldn't find
-                                this page.</p>
+                            <p class="mb-8 text-2xl font-semibold md:text-3xl text-muted-color">
+                                Sorry, we couldn't find this page.
+                            </p>
                             <RouterLink :to="{ name: 'welcome' }">
-                                <Button
-                                    label="Back to homepage"
-                                    icon="pi pi-arrow-left"
-                                />
+                                <Button label="Back to homepage">
+                                    <template #icon>
+                                        <ArrowLeft />
+                                    </template>
+                                </Button>
                             </RouterLink>
                         </section>
                     </div>