Switch User Settings from horizontal tabs to sidebar layout

Match the Company Settings design pattern: sidebar navigation on desktop
with dropdown on mobile, child routes rendered via RouterView. Each tab
(General, Profile Photo, Security) is now a BaseSettingCard with its own
route under /admin/user-settings/{general,profile-photo,security}.

resources/scripts/admin/admin-router.js

@@ -25,6 +25,12 @@ const SettingsIndex = () =>
   import('@/scripts/admin/views/settings/SettingsIndex.vue')
 const UserSettingsIndex = () =>
   import('@/scripts/admin/views/user-settings/UserSettingsIndex.vue')
+const UserSettingsGeneral = () =>
+  import('@/scripts/admin/views/user-settings/GeneralTab.vue')
+const UserSettingsProfilePhoto = () =>
+  import('@/scripts/admin/views/user-settings/ProfilePhotoTab.vue')
+const UserSettingsSecurity = () =>
+  import('@/scripts/admin/views/user-settings/SecurityTab.vue')
 const CompanyInfo = () =>
   import('@/scripts/admin/views/settings/CompanyInfoSettings.vue')
 const Preferences = () =>
@@ -248,6 +254,23 @@ export default [
         path: 'user-settings',
         name: 'user.settings',
         component: UserSettingsIndex,
+        children: [
+          {
+            path: 'general',
+            name: 'user.settings.general',
+            component: UserSettingsGeneral,
+          },
+          {
+            path: 'profile-photo',
+            name: 'user.settings.profile-photo',
+            component: UserSettingsProfilePhoto,
+          },
+          {
+            path: 'security',
+            name: 'user.settings.security',
+            component: UserSettingsSecurity,
+          },
+        ],
       },
 
       //settings

resources/scripts/admin/views/user-settings/GeneralTab.vue

@@ -1,5 +1,9 @@
 <template>
   <form @submit.prevent="updateGeneral">
+    <BaseSettingCard
+      :title="$t('settings.account_settings.general')"
+      :description="$t('settings.account_settings.general_description')"
+    >
     <BaseInputGrid>
       <BaseInputGroup
         :label="$t('settings.account_settings.name')"
@@ -48,6 +52,7 @@
       </template>
       {{ $t('settings.company_info.save') }}
     </BaseButton>
+    </BaseSettingCard>
   </form>
 </template>
 

resources/scripts/admin/views/user-settings/ProfilePhotoTab.vue

@@ -1,5 +1,9 @@
 <template>
   <form @submit.prevent="updateAvatar">
+    <BaseSettingCard
+      :title="$t('settings.account_settings.profile_picture')"
+      :description="$t('settings.account_settings.profile_picture_description')"
+    >
     <BaseInputGrid>
       <BaseInputGroup
         :label="$t('settings.account_settings.profile_picture')"
@@ -24,6 +28,7 @@
       </template>
       {{ $t('settings.company_info.save') }}
     </BaseButton>
+    </BaseSettingCard>
   </form>
 </template>
 

resources/scripts/admin/views/user-settings/SecurityTab.vue

@@ -1,5 +1,9 @@
 <template>
   <form @submit.prevent="updatePassword">
+    <BaseSettingCard
+      :title="$t('settings.account_settings.security')"
+      :description="$t('settings.account_settings.security_description')"
+    >
     <BaseInputGrid>
       <BaseInputGroup
         :label="$t('settings.account_settings.password')"
@@ -37,6 +41,7 @@
       </template>
       {{ $t('settings.company_info.save') }}
     </BaseButton>
+    </BaseSettingCard>
   </form>
 </template>
 

resources/scripts/admin/views/user-settings/UserSettingsIndex.vue

@@ -1,47 +1,109 @@
 <template>
   <BasePage>
-    <BasePageHeader :title="$t('settings.account_settings.account_settings')">
-      <template #actions>
-        <router-link to="/admin/settings">
-          <BaseButton variant="primary-outline">
-            <template #left="slotProps">
-              <BaseIcon name="CogIcon" :class="slotProps.class" />
-            </template>
-            {{ $t('navigation.settings') }}
-          </BaseButton>
-        </router-link>
-      </template>
+    <BasePageHeader
+      :title="$t('settings.account_settings.account_settings')"
+      class="mb-6"
+    >
+      <BaseBreadcrumb>
+        <BaseBreadcrumbItem
+          :title="$t('general.home')"
+          to="/admin/dashboard"
+        />
+        <BaseBreadcrumbItem
+          :title="$t('settings.account_settings.account_settings')"
+          to="/admin/user-settings/general"
+          active
+        />
+      </BaseBreadcrumb>
     </BasePageHeader>
 
-    <BaseCard container-class="px-4 py-5 sm:px-8 sm:py-2">
-      <BaseTabGroup>
-        <BaseTab
-          tab-panel-container="py-4 mt-px"
-          :title="$t('settings.account_settings.general')"
-        >
-          <GeneralTab />
-        </BaseTab>
+    <div class="w-full mb-6 select-wrapper xl:hidden">
+      <BaseMultiselect
+        v-model="currentSetting"
+        :options="menuItems"
+        :can-deselect="false"
+        value-prop="title"
+        track-by="title"
+        label="title"
+        object
+        @update:modelValue="navigateToSetting"
+      />
+    </div>
 
-        <BaseTab
-          tab-panel-container="py-4 mt-px"
-          :title="$t('settings.account_settings.profile_picture')"
-        >
-          <ProfilePhotoTab />
-        </BaseTab>
+    <div class="flex">
+      <div class="hidden mt-1 xl:block min-w-[240px]">
+        <BaseList>
+          <BaseListItem
+            v-for="(menuItem, index) in menuItems"
+            :key="index"
+            :title="menuItem.title"
+            :to="menuItem.link"
+            :active="hasActiveUrl(menuItem.link)"
+            :index="index"
+            class="py-3"
+          >
+            <template #icon>
+              <BaseIcon :name="menuItem.icon" />
+            </template>
+          </BaseListItem>
+        </BaseList>
+      </div>
 
-        <BaseTab
-          tab-panel-container="py-4 mt-px"
-          :title="$t('settings.account_settings.security')"
-        >
-          <SecurityTab />
-        </BaseTab>
-      </BaseTabGroup>
-    </BaseCard>
+      <div class="w-full overflow-hidden">
+        <RouterView />
+      </div>
+    </div>
   </BasePage>
 </template>
 
 <script setup>
-import GeneralTab from './GeneralTab.vue'
-import ProfilePhotoTab from './ProfilePhotoTab.vue'
-import SecurityTab from './SecurityTab.vue'
+import { ref, watchEffect, computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import BaseList from '@/scripts/components/list/BaseList.vue'
+import BaseListItem from '@/scripts/components/list/BaseListItem.vue'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+
+let currentSetting = ref({})
+
+const menuItems = computed(() => [
+  {
+    title: t('settings.account_settings.general'),
+    link: '/admin/user-settings/general',
+    icon: 'UserIcon',
+  },
+  {
+    title: t('settings.account_settings.profile_picture'),
+    link: '/admin/user-settings/profile-photo',
+    icon: 'PhotoIcon',
+  },
+  {
+    title: t('settings.account_settings.security'),
+    link: '/admin/user-settings/security',
+    icon: 'LockClosedIcon',
+  },
+])
+
+watchEffect(() => {
+  if (route.path === '/admin/user-settings') {
+    router.push('/admin/user-settings/general')
+  }
+
+  const item = menuItems.value.find((item) => {
+    return item.link === route.path
+  })
+
+  currentSetting.value = item
+})
+
+function hasActiveUrl(url) {
+  return route.path.indexOf(url) > -1
+}
+
+function navigateToSetting(setting) {
+  return router.push(setting.link)
+}
 </script>