Finalize Typescript restructure

resources/scripts-v2/features/company/settings/views/UserSettingsLayoutView.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { ref, computed, watchEffect } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+interface MenuItem {
+  title: string
+  link: string
+  icon: string
+}
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+
+const currentSetting = ref<MenuItem | undefined>(undefined)
+
+const menuItems = computed<MenuItem[]>(() => [
+  {
+    title: t('settings.account_settings.general'),
+    link: '/admin/account-settings/general',
+    icon: 'UserIcon',
+  },
+  {
+    title: t('settings.account_settings.profile_picture'),
+    link: '/admin/account-settings/profile-photo',
+    icon: 'PhotoIcon',
+  },
+  {
+    title: t('settings.account_settings.security'),
+    link: '/admin/account-settings/security',
+    icon: 'LockClosedIcon',
+  },
+])
+
+watchEffect(() => {
+  if (route.path === '/admin/account-settings') {
+    router.push('/admin/account-settings/general')
+  }
+
+  const item = menuItems.value.find((item) => item.link === route.path)
+  currentSetting.value = item
+})
+
+function hasActiveUrl(url: string): boolean {
+  return route.path.indexOf(url) > -1
+}
+
+function navigateToSetting(setting: MenuItem): void {
+  router.push(setting.link)
+}
+</script>
+
+<template>
+  <BasePage>
+    <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="#"
+          active
+        />
+      </BaseBreadcrumb>
+    </BasePageHeader>
+
+    <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:model-value="navigateToSetting"
+      />
+    </div>
+
+    <div class="flex gap-8">
+      <div class="hidden mt-1 xl:block min-w-[240px] sticky top-20 self-start">
+        <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>
+
+      <div class="w-full overflow-hidden">
+        <RouterView />
+      </div>
+    </div>
+  </BasePage>
+</template>