Merge pull request #26 from story2Dev/develop

Develop

components/app/AppBar.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <nav
+      class="grid h-full grid-cols-3 items-center justify-between border-b border-slate-100 border-s-teal-100 bg-white dark:border-slate-900 dark:bg-primary-500"
+    >
+      <ul class="flex h-full">
+        <li>
+          <div
+            class="flex h-full w-14 items-center justify-center bg-slate-100 transition-all hover:bg-primary-400 hover:text-white dark:bg-primary-500"
+          >
+            <Icon name="iconamoon:apps" size="18" />
+          </div>
+        </li>
+        <li
+          v-show="$route.fullPath !== '/'"
+          class="flex items-center justify-center px-2"
+        >
+          <span text="Go Back">
+            <button @click="$router.back()">
+              <Icon
+                name="fluent:arrow-left-12-regular"
+                class="text-xl text-primary-500"
+              />
+            </button>
+          </span>
+        </li>
+        <li
+          class="flex items-center justify-center"
+          :class="{
+            'px-3': $route.fullPath == '/',
+          }"
+        >
+          <nuxt-link to="/" class="text-base font-bold text-primary-500">
+            <span class="hidden md:block">{{ title }}</span>
+            <span class="md:hidden">NA</span>
+          </nuxt-link>
+        </li>
+      </ul>
+
+      <div class="flex h-full w-full max-w-md items-center justify-center">
+        <AppBarSearch />
+      </div>
+
+      <ul class="flex h-full items-center justify-end">
+        <li
+          class="flex h-full w-12 items-center justify-center rounded-xl p-2 transition-all duration-200 hover:bg-gray-200 dark:hover:bg-gray-800"
+        >
+          <AppNotification />
+        </li>
+        <li
+          class="flex h-full w-12 items-center justify-center rounded-xl p-2 transition-colors duration-500 hover:bg-gray-200 dark:hover:bg-gray-800"
+        >
+          <Icon name="system-uicons:question-circle" />
+        </li>
+        <li
+          class="rounded-xl p-2 transition-colors duration-500 hover:bg-gray-200 dark:hover:bg-gray-800"
+        >
+          <AppBarProfile />
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { title } = useApp();
+</script>

components/app/AppBarProfile.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <n-popover trigger="click">
+      <template #trigger>
+        <article class="flex h-10 w-10 items-center justify-center gap-2">
+          <img
+            alt="Mark AI"
+            src="https://avatars.githubusercontent.com/u/18229355?v=4"
+            class="h-full w-full rounded-full object-cover"
+          />
+        </article>
+      </template>
+      <section>
+        <article
+          class="flex flex-col items-center justify-center gap-2 px-4 py-2"
+        >
+          <h1 class="text-base font-semibold">[email protected]</h1>
+
+          <img
+            alt="Mark AI"
+            src="https://avatars.githubusercontent.com/u/18229355?v=4"
+            class="h-20 w-20 rounded-full object-cover"
+          />
+        </article>
+
+        <nav
+          class="mt-4 flex flex-col divide-y divide-slate-100 rounded-lg bg-slate-50 dark:divide-slate-700 dark:bg-slate-800"
+        >
+          <NuxtLink
+            to="/settings/accounts"
+            class="flex items-center gap-2 px-4 py-2"
+          >
+            <Icon name="heroicons:user-circle" size="20" />
+            <span>Account</span>
+          </NuxtLink>
+          <NuxtLink
+            to="/settings/accounts"
+            class="flex items-center gap-2 px-4 py-2"
+          >
+            <Icon name="heroicons:shield-check" size="20" />
+            <span>Security</span>
+          </NuxtLink>
+          <NuxtLink to="/settings" class="flex items-center gap-2 px-4 py-2">
+            <Icon name="heroicons:cog" size="20" />
+            <span>Systems</span>
+          </NuxtLink>
+        </nav>
+
+        <ul
+          class="mt-4 flex flex-col divide-y divide-slate-100 rounded-lg bg-slate-50 dark:divide-slate-700 dark:bg-slate-800"
+        >
+          <li class="flex items-center gap-2">
+            <div class="flex flex-grow items-center gap-2 p-2">
+              <Icon name="heroicons:moon" size="20" />
+              <span>{{ $t('theme') }}</span>
+            </div>
+            <div class="flex items-center justify-end gap-2 px-2">
+              <AppSwitchTheme mode="dropdown" />
+            </div>
+          </li>
+          <li class="flex items-center gap-2">
+            <div class="flex flex-grow items-center gap-2 p-2">
+              <Icon name="heroicons:globe-alt" size="20" />
+              <span>{{ $t('language') }}</span>
+            </div>
+            <div class="flex justify-end pr-2">
+              <AppSwitchLanguage mode="dropdown" />
+            </div>
+          </li>
+          <li class="flex items-center gap-2 px-4 py-2">
+            <Icon name="fluent:person-feedback-32-regular" size="20" />
+            <span>{{ $t('feedback') }}</span>
+          </li>
+        </ul>
+
+        <nav
+          class="mt-4 flex flex-col divide-y divide-slate-100 rounded-lg bg-slate-50 dark:divide-slate-700 dark:bg-slate-800"
+        >
+          <NuxtLink to="/settings" class="flex items-center gap-2 px-4 py-2">
+            <Icon name="heroicons:arrow-left-on-rectangle" size="20" />
+            <span>{{ $t('sign_out') }}</span>
+          </NuxtLink>
+        </nav>
+      </section>
+    </n-popover>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

components/app/AppBarSearch.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="w-full">
+    <n-input class="w-full" placeholder="Search">
+      <template #prefix>
+        <Icon name="fluent:search-20-regular" />
+      </template>
+    </n-input>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

components/app/AppNotification.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <n-badge :value="20" :max="15">
+      <Icon name="heroicons:bell" size="24" class="text-gray-500" />
+    </n-badge>
+  </div>
+</template>
+
+<script setup lang="ts"></script>

components/common/QuizAccessApp.vue → components/app/AppQuizAccess.vue

@@ -4,7 +4,7 @@
       <li v-for="(item, index) in quizAccessApp" :key="index">
         <nuxt-link
           :to="item.to"
-          class="group flex cursor-pointer flex-col items-center rounded-xl bg-white p-4 px-6 hover:bg-primary-50"
+          class="group flex cursor-pointer flex-col items-center rounded-xl bg-white p-4 px-6 hover:bg-primary-50 dark:bg-slate-900 dark:hover:bg-slate-950"
         >
           <Icon
             :name="item.icon"

components/app/AppSwitchLanguage.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <n-select
+      v-if="mode == 'select'"
+      v-model:value="locale"
+      :options="languages"
+      @update:value="setLocale"
+    />
+
+    <n-dropdown
+      v-if="mode == 'dropdown'"
+      :options="languages"
+      trigger="hover"
+      key-field="value"
+      @select="handleSelect"
+    >
+      <n-button text icon-placement="right">
+        {{ current?.label }}
+        <template #icon>
+          <Icon name="system-uicons:chevron-down" />
+        </template>
+      </n-button>
+    </n-dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  mode?: 'select' | 'link' | 'dropdown';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'select',
+});
+
+const { locale, locales, setLocale } = useI18n();
+
+const languages = locales.value.map((item: any) => ({
+  label: item.name,
+  value: item.code,
+}));
+
+const current = computed(() => {
+  return languages.find((item) => item.value === locale.value);
+});
+
+function handleSelect(code: string) {
+  setLocale(code);
+}
+</script>

components/app/AppSwitchTheme.vue

@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <ol v-if="mode == 'box'" class="mt-2 flex gap-4">
+      <li
+        v-for="(item, index) in themeItems"
+        :key="index"
+        class="flex cursor-pointer flex-col items-center rounded-xl border p-4 px-8 dark:border-slate-800"
+        :class="{
+          'bg-primary-500 text-white ':
+            colorModePreference.get() === item.value,
+        }"
+        @click="setTheme(item.value)"
+      >
+        <Icon :name="item.iconName" size="24" />
+        <span>{{ $t(item.label) }}</span>
+      </li>
+    </ol>
+
+    <n-dropdown
+      v-if="mode == 'dropdown'"
+      :options="themeItems"
+      trigger="hover"
+      key-field="value"
+      @select="setTheme"
+    >
+      <n-button text icon-placement="right">
+        {{ $t(colorModePreference.get()) }}
+        <template #icon>
+          <Icon name="system-uicons:chevron-down" />
+        </template>
+      </n-button>
+    </n-dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { h } from 'vue';
+import { Icon } from '#components';
+interface Props {
+  mode?: 'box' | 'dropdown';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'box',
+});
+
+const { colorModePreference } = useNaiveColorMode();
+const { t } = useI18n();
+
+const themeItems: any[] = [
+  {
+    label: t('system'),
+    value: 'system',
+    iconName: 'system-uicons:laptop',
+    icon: () => h(Icon, { name: 'system-uicons:laptop' }),
+  },
+  {
+    label: t('light'),
+    value: 'light',
+    iconName: 'system-uicons:lightbulb-on',
+    icon: () => h(Icon, { name: 'system-uicons:lightbulb-on' }),
+  },
+  {
+    label: t('dark'),
+    value: 'dark',
+    iconName: 'system-uicons:moon',
+    icon: () => h(Icon, { name: 'system-uicons:moon' }),
+  },
+];
+
+const setTheme = (theme: any) => {
+  colorModePreference.set(theme);
+};
+</script>