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