Working on UI

vue/routes/index.vue

@@ -1,22 +1,10 @@
 <template>
-  <p>{{ t('app.world') }}</p>
-  <p v-for="value in j">
-    {{ value }}
-  </p>
+  <h1 class="title">{{ t('menu.dashboard') }}</h1>
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n'
-
+import { useI18n } from 'vue-i18n';
 const { t } = useI18n();
 
-const j = ref([]);
-
-onMounted(async () => {
-  const res = await fetch("/php/notifications.php")
-  j.value = await res.json();
-});
-
-
 </script>

vue/routes/settings.vue

@@ -0,0 +1,26 @@
+<template>
+  <h1 class="title">{{ t('menu.settings') }}</h1>
+  <div class="tabs">
+    <ul>
+      <li v-for="i in routes" :class="{ 'is-active': route.path === i.path }">
+        <RouterLink :to="i.path">
+          {{ t(i.title) }}
+        </RouterLink>
+      </li>
+    </ul>
+  </div>
+  <RouterView />
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const routes = [
+  {"title": "settings.users", "path": "/settings/users"},
+  {"title": "settings.groups", "path": "/settings/groups"}
+];
+
+</script>

vue/routes/settings/groups.vue

@@ -0,0 +1,8 @@
+<template>
+
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
+</script>

vue/routes/settings/users.vue

@@ -0,0 +1,16 @@
+<template>
+<table class="table">
+  <thead>
+    <tr>
+      <th>user</th>
+      <th>email</th>
+      <th>group</th>
+    </tr>
+  </thead>
+</table>
+</template>
+<script setup>
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+
+</script>

vue/routes/user_settings.vue

@@ -0,0 +1,16 @@
+<template>
+  <h1 class="title">{{ t('menu.userSettings') }}</h1>
+
+  <LanguageSwitcher />
+  <ThemeSwitcher />
+
+
+</template>
+
+<script setup>
+import ThemeSwitcher from '@/components/ThemeSwitcher.vue';
+import LanguageSwitcher from '@/components/LanguageSwitcher.vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+</script>