From df0d5696bbd20ee4190f59716294960dab2e3377 Mon Sep 17 00:00:00 2001
From: WendellAdriel <11641518+WendellAdriel@users.noreply.github.com>
Date: Fri, 27 Feb 2026 12:00:23 +0000
Subject: [PATCH] General improvements

Co-authored-by: WendellAdriel <me@wendelladriel.com>
---
 resources/js/app.ts                           |  2 +-
 resources/js/components/AppHeader.vue         |  2 +-
 resources/js/components/AppSidebar.vue        |  8 +--
 resources/js/components/NavUser.vue           |  2 +-
 resources/js/components/ui/select/Select.vue  | 19 +++++++
 .../js/components/ui/select/SelectContent.vue | 51 +++++++++++++++++++
 .../js/components/ui/select/SelectGroup.vue   | 15 ++++++
 .../js/components/ui/select/SelectItem.vue    | 44 ++++++++++++++++
 .../components/ui/select/SelectItemText.vue   | 15 ++++++
 .../js/components/ui/select/SelectLabel.vue   | 17 +++++++
 .../ui/select/SelectScrollDownButton.vue      | 26 ++++++++++
 .../ui/select/SelectScrollUpButton.vue        | 26 ++++++++++
 .../components/ui/select/SelectSeparator.vue  | 19 +++++++
 .../js/components/ui/select/SelectTrigger.vue | 33 ++++++++++++
 .../js/components/ui/select/SelectValue.vue   | 15 ++++++
 resources/js/components/ui/select/index.ts    | 11 ++++
 .../js/components/ui/sidebar/SidebarRail.vue  |  4 +-
 .../components/ui/sidebar/SidebarTrigger.vue  |  2 +-
 resources/js/composables/useCurrentUrl.ts     | 21 +++++++-
 resources/js/layouts/settings/Layout.vue      |  4 +-
 resources/js/pages/Dashboard.vue              |  2 +-
 resources/js/pages/settings/Appearance.vue    |  2 +-
 resources/js/pages/settings/Profile.vue       |  2 +-
 23 files changed, 325 insertions(+), 17 deletions(-)
 create mode 100644 resources/js/components/ui/select/Select.vue
 create mode 100644 resources/js/components/ui/select/SelectContent.vue
 create mode 100644 resources/js/components/ui/select/SelectGroup.vue
 create mode 100644 resources/js/components/ui/select/SelectItem.vue
 create mode 100644 resources/js/components/ui/select/SelectItemText.vue
 create mode 100644 resources/js/components/ui/select/SelectLabel.vue
 create mode 100644 resources/js/components/ui/select/SelectScrollDownButton.vue
 create mode 100644 resources/js/components/ui/select/SelectScrollUpButton.vue
 create mode 100644 resources/js/components/ui/select/SelectSeparator.vue
 create mode 100644 resources/js/components/ui/select/SelectTrigger.vue
 create mode 100644 resources/js/components/ui/select/SelectValue.vue
 create mode 100644 resources/js/components/ui/select/index.ts

diff --git a/resources/js/app.ts b/resources/js/app.ts
index ba8da7aaf..c0986821b 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -3,7 +3,7 @@ import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 import type { DefineComponent } from 'vue';
 import { createApp, h } from 'vue';
 import '../css/app.css';
-import { initializeTheme } from './composables/useAppearance';
+import { initializeTheme } from '@/composables/useAppearance';
 
 const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
 
diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index b0cab69e9..507994b73 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -93,7 +93,7 @@ const rightNavItems: NavItem[] = [
                         </SheetTrigger>
                         <SheetContent side="left" class="w-[300px] p-6">
                             <SheetTitle class="sr-only"
-                                >Navigation Menu</SheetTitle
+                                >Navigation menu</SheetTitle
                             >
                             <SheetHeader class="flex justify-start text-left">
                                 <AppLogoIcon
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 41dee7067..964c385c1 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Link } from '@inertiajs/vue3';
-import { BookOpen, Folder, LayoutGrid } from 'lucide-vue-next';
+import { BookOpen, FolderGit2, LayoutGrid } from 'lucide-vue-next';
+import AppLogo from '@/components/AppLogo.vue';
 import NavFooter from '@/components/NavFooter.vue';
 import NavMain from '@/components/NavMain.vue';
 import NavUser from '@/components/NavUser.vue';
@@ -14,7 +15,6 @@ import {
     SidebarMenuItem,
 } from '@/components/ui/sidebar';
 import type { NavItem } from '@/types';
-import AppLogo from './AppLogo.vue';
 import { dashboard } from '@/routes';
 
 const mainNavItems: NavItem[] = [
@@ -27,9 +27,9 @@ const mainNavItems: NavItem[] = [
 
 const footerNavItems: NavItem[] = [
     {
-        title: 'Github Repo',
+        title: 'Repository',
         href: 'https://github.com/laravel/vue-starter-kit',
-        icon: Folder,
+        icon: FolderGit2,
     },
     {
         title: 'Documentation',
diff --git a/resources/js/components/NavUser.vue b/resources/js/components/NavUser.vue
index e3572c7f8..66046a926 100644
--- a/resources/js/components/NavUser.vue
+++ b/resources/js/components/NavUser.vue
@@ -14,7 +14,7 @@ import {
     useSidebar,
 } from '@/components/ui/sidebar';
 import UserInfo from '@/components/UserInfo.vue';
-import UserMenuContent from './UserMenuContent.vue';
+import UserMenuContent from '@/components/UserMenuContent.vue';
 
 const page = usePage();
 const user = computed(() => page.props.auth.user);
diff --git a/resources/js/components/ui/select/Select.vue b/resources/js/components/ui/select/Select.vue
new file mode 100644
index 000000000..c94bbe888
--- /dev/null
+++ b/resources/js/components/ui/select/Select.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from "reka-ui"
+import { SelectRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot
+    v-slot="slotProps"
+    data-slot="select"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </SelectRoot>
+</template>
diff --git a/resources/js/components/ui/select/SelectContent.vue b/resources/js/components/ui/select/SelectContent.vue
new file mode 100644
index 000000000..adf04ec81
--- /dev/null
+++ b/resources/js/components/ui/select/SelectContent.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  SelectContent,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import { SelectScrollDownButton, SelectScrollUpButton } from "."
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    position: "popper",
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      data-slot="select-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--reka-select-trigger-height)] w-full min-w-[var(--reka-select-trigger-width)] scroll-my-1')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/resources/js/components/ui/select/SelectGroup.vue b/resources/js/components/ui/select/SelectGroup.vue
new file mode 100644
index 000000000..e981c6c50
--- /dev/null
+++ b/resources/js/components/ui/select/SelectGroup.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from "reka-ui"
+import { SelectGroup } from "reka-ui"
+
+const props = defineProps<SelectGroupProps>()
+</script>
+
+<template>
+  <SelectGroup
+    data-slot="select-group"
+    v-bind="props"
+  >
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/resources/js/components/ui/select/SelectItem.vue b/resources/js/components/ui/select/SelectItem.vue
new file mode 100644
index 000000000..937176457
--- /dev/null
+++ b/resources/js/components/ui/select/SelectItem.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { SelectItemProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Check } from "lucide-vue-next"
+import {
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  useForwardProps,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    data-slot="select-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/resources/js/components/ui/select/SelectItemText.vue b/resources/js/components/ui/select/SelectItemText.vue
new file mode 100644
index 000000000..b6700b17b
--- /dev/null
+++ b/resources/js/components/ui/select/SelectItemText.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectItemTextProps } from "reka-ui"
+import { SelectItemText } from "reka-ui"
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText
+    data-slot="select-item-text"
+    v-bind="props"
+  >
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/resources/js/components/ui/select/SelectLabel.vue b/resources/js/components/ui/select/SelectLabel.vue
new file mode 100644
index 000000000..5b6650cb0
--- /dev/null
+++ b/resources/js/components/ui/select/SelectLabel.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { SelectLabel } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <SelectLabel
+    data-slot="select-label"
+    :class="cn('text-muted-foreground px-2 py-1.5 text-xs', props.class)"
+  >
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/resources/js/components/ui/select/SelectScrollDownButton.vue b/resources/js/components/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 000000000..7dc7670b3
--- /dev/null
+++ b/resources/js/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import { SelectScrollDownButton, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton
+    data-slot="select-scroll-down-button"
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
+    <slot>
+      <ChevronDown class="size-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/resources/js/components/ui/select/SelectScrollUpButton.vue b/resources/js/components/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 000000000..07fe87eab
--- /dev/null
+++ b/resources/js/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronUp } from "lucide-vue-next"
+import { SelectScrollUpButton, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton
+    data-slot="select-scroll-up-button"
+    v-bind="forwardedProps"
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
+  >
+    <slot>
+      <ChevronUp class="size-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/resources/js/components/ui/select/SelectSeparator.vue b/resources/js/components/ui/select/SelectSeparator.vue
new file mode 100644
index 000000000..4b5c88577
--- /dev/null
+++ b/resources/js/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { SelectSeparator } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <SelectSeparator
+    data-slot="select-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)"
+  />
+</template>
diff --git a/resources/js/components/ui/select/SelectTrigger.vue b/resources/js/components/ui/select/SelectTrigger.vue
new file mode 100644
index 000000000..667908b6d
--- /dev/null
+++ b/resources/js/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { ChevronDown } from "lucide-vue-next"
+import { SelectIcon, SelectTrigger, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"], size?: "sm" | "default" }>(),
+  { size: "default" },
+)
+
+const delegatedProps = reactiveOmit(props, "class", "size")
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    data-slot="select-trigger"
+    :data-size="size"
+    v-bind="forwardedProps"
+    :class="cn(
+      'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDown class="size-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/resources/js/components/ui/select/SelectValue.vue b/resources/js/components/ui/select/SelectValue.vue
new file mode 100644
index 000000000..d5ce58b55
--- /dev/null
+++ b/resources/js/components/ui/select/SelectValue.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectValueProps } from "reka-ui"
+import { SelectValue } from "reka-ui"
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue
+    data-slot="select-value"
+    v-bind="props"
+  >
+    <slot />
+  </SelectValue>
+</template>
diff --git a/resources/js/components/ui/select/index.ts b/resources/js/components/ui/select/index.ts
new file mode 100644
index 000000000..96eae60cf
--- /dev/null
+++ b/resources/js/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from "./Select.vue"
+export { default as SelectContent } from "./SelectContent.vue"
+export { default as SelectGroup } from "./SelectGroup.vue"
+export { default as SelectItem } from "./SelectItem.vue"
+export { default as SelectItemText } from "./SelectItemText.vue"
+export { default as SelectLabel } from "./SelectLabel.vue"
+export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue"
+export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue"
+export { default as SelectSeparator } from "./SelectSeparator.vue"
+export { default as SelectTrigger } from "./SelectTrigger.vue"
+export { default as SelectValue } from "./SelectValue.vue"
diff --git a/resources/js/components/ui/sidebar/SidebarRail.vue b/resources/js/components/ui/sidebar/SidebarRail.vue
index 1045a55ce..762a89c22 100644
--- a/resources/js/components/ui/sidebar/SidebarRail.vue
+++ b/resources/js/components/ui/sidebar/SidebarRail.vue
@@ -14,9 +14,9 @@ const { toggleSidebar } = useSidebar()
   <button
     data-sidebar="rail"
     data-slot="sidebar-rail"
-    aria-label="Toggle Sidebar"
+    aria-label="Toggle sidebar"
     :tabindex="-1"
-    title="Toggle Sidebar"
+    title="Toggle sidebar"
     :class="cn(
       'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex',
       'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
diff --git a/resources/js/components/ui/sidebar/SidebarTrigger.vue b/resources/js/components/ui/sidebar/SidebarTrigger.vue
index 9be2998e6..c99a6bdea 100644
--- a/resources/js/components/ui/sidebar/SidebarTrigger.vue
+++ b/resources/js/components/ui/sidebar/SidebarTrigger.vue
@@ -23,6 +23,6 @@ const { isMobile, state, toggleSidebar } = useSidebar()
   >
     <PanelLeftOpen v-if="isMobile || state === 'collapsed'" />
     <PanelLeftClose v-else />
-    <span class="sr-only">Toggle Sidebar</span>
+    <span class="sr-only">Toggle sidebar</span>
   </Button>
 </template>
diff --git a/resources/js/composables/useCurrentUrl.ts b/resources/js/composables/useCurrentUrl.ts
index 0736a9195..fa794e169 100644
--- a/resources/js/composables/useCurrentUrl.ts
+++ b/resources/js/composables/useCurrentUrl.ts
@@ -9,6 +9,11 @@ export type UseCurrentUrlReturn = {
     isCurrentUrl: (
         urlToCheck: NonNullable<InertiaLinkProps['href']>,
         currentUrl?: string,
+        startsWith?: boolean,
+    ) => boolean;
+    isCurrentOrParentUrl: (
+        urlToCheck: NonNullable<InertiaLinkProps['href']>,
+        currentUrl?: string,
     ) => boolean;
     whenCurrentUrl: <T, F = null>(
         urlToCheck: NonNullable<InertiaLinkProps['href']>,
@@ -26,23 +31,34 @@ export function useCurrentUrl(): UseCurrentUrlReturn {
     function isCurrentUrl(
         urlToCheck: NonNullable<InertiaLinkProps['href']>,
         currentUrl?: string,
+        startsWith: boolean = false,
     ) {
         const urlToCompare = currentUrl ?? currentUrlReactive.value;
         const urlString = toUrl(urlToCheck);
 
+        const comparePath = (path: string): boolean =>
+            startsWith ? urlToCompare.startsWith(path) : path === urlToCompare;
+
         if (!urlString.startsWith('http')) {
-            return urlString === urlToCompare;
+            return comparePath(urlString);
         }
 
         try {
             const absoluteUrl = new URL(urlString);
 
-            return absoluteUrl.pathname === urlToCompare;
+            return comparePath(absoluteUrl.pathname);
         } catch {
             return false;
         }
     }
 
+    function isCurrentOrParentUrl(
+        urlToCheck: NonNullable<InertiaLinkProps['href']>,
+        currentUrl?: string,
+    ) {
+        return isCurrentUrl(urlToCheck, currentUrl, true);
+    }
+
     function whenCurrentUrl(
         urlToCheck: NonNullable<InertiaLinkProps['href']>,
         ifTrue: any,
@@ -54,6 +70,7 @@ export function useCurrentUrl(): UseCurrentUrlReturn {
     return {
         currentUrl: readonly(currentUrlReactive),
         isCurrentUrl,
+        isCurrentOrParentUrl,
         whenCurrentUrl,
     };
 }
diff --git a/resources/js/layouts/settings/Layout.vue b/resources/js/layouts/settings/Layout.vue
index d2f59d7d7..3bbbd81e0 100644
--- a/resources/js/layouts/settings/Layout.vue
+++ b/resources/js/layouts/settings/Layout.vue
@@ -20,7 +20,7 @@ const sidebarNavItems: NavItem[] = [
     },
 ];
 
-const { isCurrentUrl } = useCurrentUrl();
+const { isCurrentOrParentUrl } = useCurrentUrl();
 </script>
 
 <template>
@@ -42,7 +42,7 @@ const { isCurrentUrl } = useCurrentUrl();
                         variant="ghost"
                         :class="[
                             'w-full justify-start',
-                            { 'bg-muted': isCurrentUrl(item.href) },
+                            { 'bg-muted': isCurrentOrParentUrl(item.href) },
                         ]"
                         as-child
                     >
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index f0bdaa1d3..602bae000 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Head } from '@inertiajs/vue3';
+import PlaceholderPattern from '@/components/PlaceholderPattern.vue';
 import AppLayout from '@/layouts/AppLayout.vue';
 import type { BreadcrumbItem } from '@/types';
-import PlaceholderPattern from '../components/PlaceholderPattern.vue';
 import { dashboard } from '@/routes';
 
 const breadcrumbs: BreadcrumbItem[] = [
diff --git a/resources/js/pages/settings/Appearance.vue b/resources/js/pages/settings/Appearance.vue
index e1191be3e..e0903874f 100644
--- a/resources/js/pages/settings/Appearance.vue
+++ b/resources/js/pages/settings/Appearance.vue
@@ -19,7 +19,7 @@ const breadcrumbItems: BreadcrumbItem[] = [
     <AppLayout :breadcrumbs="breadcrumbItems">
         <Head title="Appearance settings" />
 
-        <h1 class="sr-only">Appearance Settings</h1>
+        <h1 class="sr-only">Appearance settings</h1>
 
         <SettingsLayout>
             <div class="space-y-6">
diff --git a/resources/js/pages/settings/Profile.vue b/resources/js/pages/settings/Profile.vue
index 0126125cd..59eaab39a 100644
--- a/resources/js/pages/settings/Profile.vue
+++ b/resources/js/pages/settings/Profile.vue
@@ -34,7 +34,7 @@ const user = computed(() => page.props.auth.user);
     <AppLayout :breadcrumbs="breadcrumbItems">
         <Head title="Profile settings" />
 
-        <h1 class="sr-only">Profile Settings</h1>
+        <h1 class="sr-only">Profile settings</h1>
 
         <SettingsLayout>
             <div class="flex flex-col space-y-6">