|
@@ -1,98 +1,75 @@
|
|
|
<template>
|
|
|
- <header class="z-40" :class="{ dark: store.semidark && store.menu === 'horizontal' }">
|
|
|
+ <header class="z-40" :class="{ dark: store.state.semidark && store.state.menu === 'horizontal' }">
|
|
|
<div class="shadow-sm">
|
|
|
<div class="relative bg-white flex w-full items-center px-5 py-2.5 dark:bg-[#0e1726]">
|
|
|
<div class="horizontal-logo flex lg:hidden justify-between items-center ltr:mr-2 rtl:ml-2">
|
|
|
<router-link to="/" class="main-logo flex items-center shrink-0">
|
|
|
<img class="w-8 ltr:-ml-1 rtl:-mr-1 inline" src="/src/assets/images/logo.png" alt="" />
|
|
|
<span
|
|
|
- class="text-2xl ltr:ml-1.5 rtl:mr-1.5 font-semibold align-middle hidden md:inline dark:text-white-light transition-all duration-300"
|
|
|
- >V3studio App</span
|
|
|
- >
|
|
|
+ class="text-2xl ltr:ml-1.5 rtl:mr-1.5 font-semibold align-middle hidden md:inline dark:text-white-light transition-all duration-300">V3studio
|
|
|
+ App</span>
|
|
|
|
|
|
</router-link>
|
|
|
-<!-- 原导航 -->
|
|
|
- <!-- <a
|
|
|
- href="javascript:;"
|
|
|
+ <!-- 原导航 -->
|
|
|
+ <a href="javascript:;"
|
|
|
class="collapse-icon flex-none dark:text-[#d0d2d6] hover:text-primary dark:hover:text-primary flex lg:hidden ltr:ml-2 rtl:mr-2 p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:bg-white-light/90 dark:hover:bg-dark/60"
|
|
|
- @click="store.toggleSidebar()"
|
|
|
- >
|
|
|
+ @click="toggleSidebars">
|
|
|
<icon-menu class="w-5 h-5" />
|
|
|
- </a> -->
|
|
|
+ </a>
|
|
|
</div>
|
|
|
|
|
|
<!-- 头部中间功能--待开发 -->
|
|
|
- <!-- <div class="ltr:mr-2 rtl:ml-2 hidden sm:block">
|
|
|
+ <div class="ltr:mr-2 rtl:ml-2 hidden sm:block">
|
|
|
<ul class="flex items-center space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]">
|
|
|
<li>
|
|
|
- <router-link
|
|
|
- to="/apps/calendar"
|
|
|
- class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
|
|
|
- >
|
|
|
+ <router-link to="/apps/calendar"
|
|
|
+ class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60">
|
|
|
<icon-calendar />
|
|
|
</router-link>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <router-link
|
|
|
- to="/apps/todolist"
|
|
|
- class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
|
|
|
- >
|
|
|
+ <router-link to="/apps/todolist"
|
|
|
+ class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60">
|
|
|
<icon-edit />
|
|
|
</router-link>
|
|
|
</li>
|
|
|
<li>
|
|
|
- <router-link
|
|
|
- to="/apps/chat"
|
|
|
- class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
|
|
|
- >
|
|
|
+ <router-link to="/apps/chat"
|
|
|
+ class="block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60">
|
|
|
<icon-chat-notification />
|
|
|
</router-link>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
<div
|
|
|
- class="sm:flex-1 ltr:sm:ml-0 ltr:ml-auto sm:rtl:mr-0 rtl:mr-auto flex items-center space-x-1.5 lg:space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]"
|
|
|
- >
|
|
|
- <!-- <div class="sm:ltr:mr-auto sm:rtl:ml-auto">
|
|
|
+ class="sm:flex-1 ltr:sm:ml-0 ltr:ml-auto sm:rtl:mr-0 rtl:mr-auto flex items-center space-x-1.5 lg:space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]">
|
|
|
+ <div class="sm:ltr:mr-auto sm:rtl:ml-auto">
|
|
|
<form
|
|
|
class="sm:relative absolute inset-x-0 sm:top-0 top-1/2 sm:translate-y-0 -translate-y-1/2 sm:mx-0 mx-4 z-10 sm:block hidden"
|
|
|
- :class="{ '!block': search }"
|
|
|
- @submit.prevent="search = false"
|
|
|
- >
|
|
|
-
|
|
|
+ :class="{ '!block': search }" @submit.prevent="search = false">
|
|
|
+
|
|
|
</form>
|
|
|
|
|
|
- <button
|
|
|
- type="button"
|
|
|
+ <button type="button"
|
|
|
class="search_btn sm:hidden p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:bg-white-light/90 dark:hover:bg-dark/60"
|
|
|
- @click="search = !search"
|
|
|
- >
|
|
|
+ @click="search = !search">
|
|
|
<icon-search class="w-4.5 h-4.5 mx-auto dark:text-[#d0d2d6]" />
|
|
|
</button>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
<div>
|
|
|
- <a
|
|
|
- href="javascript:;"
|
|
|
- v-show="store.theme === 'light'"
|
|
|
+ <a href="javascript:;" v-show="store.state.theme === 'light'"
|
|
|
class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
|
|
|
- @click="store.toggleTheme('dark')"
|
|
|
- >
|
|
|
+ @click="toggleTheme('dark')">
|
|
|
<icon-sun />
|
|
|
</a>
|
|
|
- <a
|
|
|
- href="javascript:;"
|
|
|
- v-show="store.theme === 'dark'"
|
|
|
+ <a href="javascript:;" v-show="store.state.theme === 'dark'"
|
|
|
class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
|
|
|
- @click="store.toggleTheme('system')"
|
|
|
- >
|
|
|
+ @click="toggleTheme('system')">
|
|
|
<icon-moon />
|
|
|
</a>
|
|
|
- <a
|
|
|
- href="javascript:;"
|
|
|
- v-show="store.theme === 'system'"
|
|
|
+ <a href="javascript:;" v-show="store.state.theme === 'system'"
|
|
|
class="flex items-center p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
|
|
|
- @click="store.toggleTheme('dark')"
|
|
|
- >
|
|
|
+ @click="toggleTheme('dark')">
|
|
|
<!-- <icon-laptop /> -->
|
|
|
<icon-sun />
|
|
|
|
|
@@ -100,30 +77,30 @@
|
|
|
</div>
|
|
|
|
|
|
|
|
|
-
|
|
|
+
|
|
|
|
|
|
<!-- <div class="dropdown shrink-0">
|
|
|
- <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="8">
|
|
|
- <button
|
|
|
- type="button"
|
|
|
- class="relative block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60"
|
|
|
- >
|
|
|
+ <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'"
|
|
|
+ offsetDistance="8">
|
|
|
+ <button type="button"
|
|
|
+ class="relative block p-2 rounded-full bg-white-light/40 dark:bg-dark/40 hover:text-primary hover:bg-white-light/90 dark:hover:bg-dark/60">
|
|
|
<icon-bell-bing />
|
|
|
|
|
|
<span class="flex absolute w-3 h-3 ltr:right-0 rtl:left-0 top-0">
|
|
|
<span
|
|
|
- class="animate-ping absolute ltr:-left-[3px] rtl:-right-[3px] -top-[3px] inline-flex h-full w-full rounded-full bg-success/50 opacity-75"
|
|
|
- ></span>
|
|
|
+ class="animate-ping absolute ltr:-left-[3px] rtl:-right-[3px] -top-[3px] inline-flex h-full w-full rounded-full bg-success/50 opacity-75"></span>
|
|
|
<span class="relative inline-flex rounded-full w-[6px] h-[6px] bg-success"></span>
|
|
|
</span>
|
|
|
</button>
|
|
|
<template #content="{ close }">
|
|
|
- <ul class="!py-0 text-dark dark:text-white-dark w-[300px] sm:w-[350px] divide-y dark:divide-white/10">
|
|
|
+ <ul
|
|
|
+ class="!py-0 text-dark dark:text-white-dark w-[300px] sm:w-[350px] divide-y dark:divide-white/10">
|
|
|
<li>
|
|
|
<div class="flex items-center px-4 py-2 justify-between font-semibold">
|
|
|
<h4 class="text-lg">Notification</h4>
|
|
|
<template v-if="notifications.length">
|
|
|
- <span class="badge bg-primary/80" v-text="notifications.length + 'New'"></span>
|
|
|
+ <span class="badge bg-primary/80"
|
|
|
+ v-text="notifications.length + 'New'"></span>
|
|
|
</template>
|
|
|
</div>
|
|
|
</li>
|
|
@@ -132,24 +109,21 @@
|
|
|
<div class="group flex items-center px-4 py-2">
|
|
|
<div class="grid place-content-center rounded">
|
|
|
<div class="w-12 h-12 relative">
|
|
|
- <img
|
|
|
- class="w-12 h-12 rounded-full object-cover"
|
|
|
- :src="`/assets/images/${notification.profile}`"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- <span class="bg-success w-2 h-2 rounded-full block absolute right-[6px] bottom-0"></span>
|
|
|
+ <img class="w-12 h-12 rounded-full object-cover"
|
|
|
+ :src="`/assets/images/${notification.profile}`" alt="" />
|
|
|
+ <span
|
|
|
+ class="bg-success w-2 h-2 rounded-full block absolute right-[6px] bottom-0"></span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ltr:pl-3 rtl:pr-3 flex flex-auto">
|
|
|
<div class="ltr:pr-3 rtl:pl-3">
|
|
|
<h6 v-html="notification.message"></h6>
|
|
|
- <span class="text-xs block font-normal dark:text-gray-500" v-text="notification.time"></span>
|
|
|
+ <span class="text-xs block font-normal dark:text-gray-500"
|
|
|
+ v-text="notification.time"></span>
|
|
|
</div>
|
|
|
- <button
|
|
|
- type="button"
|
|
|
+ <button type="button"
|
|
|
class="ltr:ml-auto rtl:mr-auto text-neutral-300 hover:text-danger opacity-0 group-hover:opacity-100"
|
|
|
- @click="removeNotification(notification.id)"
|
|
|
- >
|
|
|
+ @click="removeNotification(notification.id)">
|
|
|
<icon-x-circle />
|
|
|
</button>
|
|
|
</div>
|
|
@@ -159,14 +133,17 @@
|
|
|
<template v-if="notifications.length">
|
|
|
<li>
|
|
|
<div class="p-4">
|
|
|
- <button class="btn btn-primary block w-full btn-small" @click="close()">Read All Notifications</button>
|
|
|
+ <button class="btn btn-primary block w-full btn-small"
|
|
|
+ @click="close()">Read All Notifications</button>
|
|
|
</div>
|
|
|
</li>
|
|
|
</template>
|
|
|
<template v-if="!notifications.length">
|
|
|
<li>
|
|
|
- <div class="!grid place-content-center hover:!bg-transparent text-lg min-h-[200px]">
|
|
|
- <div class="mx-auto ring-4 ring-primary/30 rounded-full mb-4 text-primary">
|
|
|
+ <div
|
|
|
+ class="!grid place-content-center hover:!bg-transparent text-lg min-h-[200px]">
|
|
|
+ <div
|
|
|
+ class="mx-auto ring-4 ring-primary/30 rounded-full mb-4 text-primary">
|
|
|
<icon-info-circle :fill="true" class="w-10 h-10" />
|
|
|
</div>
|
|
|
No data available.
|
|
@@ -179,28 +156,28 @@
|
|
|
</div> -->
|
|
|
|
|
|
<div class="dropdown shrink-0">
|
|
|
- <Popper :placement="store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="8" class="!block">
|
|
|
+ <Popper :placement="store.state.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'"
|
|
|
+ offsetDistance="8" class="!block">
|
|
|
<button type="button" class="relative group block">
|
|
|
- <img
|
|
|
- class="w-9 h-9 rounded-full object-cover saturate-50 group-hover:saturate-100"
|
|
|
- src="/assets/images/me.jpg"
|
|
|
- alt=""
|
|
|
- />
|
|
|
+ <img class="w-9 h-9 rounded-full object-cover saturate-50 group-hover:saturate-100"
|
|
|
+ src="/assets/images/me.jpg" alt="" />
|
|
|
</button>
|
|
|
<template #content="{ close }">
|
|
|
- <ul class="text-dark dark:text-white-dark !py-0 w-[230px] font-semibold dark:text-white-light/90">
|
|
|
+ <ul
|
|
|
+ class="text-dark dark:text-white-dark !py-0 w-[230px] font-semibold dark:text-white-light/90">
|
|
|
<li>
|
|
|
<div class="flex items-center px-4 py-4">
|
|
|
<div class="flex-none">
|
|
|
- <img class="rounded-md w-10 h-10 object-cover" src="/assets/images/me.jpg" alt="" />
|
|
|
+ <img class="rounded-md w-10 h-10 object-cover"
|
|
|
+ src="/assets/images/me.jpg" alt="" />
|
|
|
</div>
|
|
|
<div class="ltr:pl-4 rtl:pr-4 truncate">
|
|
|
<h4 class="text-base">
|
|
|
- Johnny Liang<span class="text-xs bg-success-light rounded text-success px-1 ltr:ml-2 rtl:ml-2">Pro</span>
|
|
|
+ Johnny Liang<span
|
|
|
+ class="text-xs bg-success-light rounded text-success px-1 ltr:ml-2 rtl:ml-2">Pro</span>
|
|
|
</h4>
|
|
|
- <a class="text-black/60 hover:text-primary dark:text-dark-light/60 dark:hover:text-white" href="javascript:;"
|
|
|
- >johndoe@gmail.com</a
|
|
|
- >
|
|
|
+ <a class="text-black/60 hover:text-primary dark:text-dark-light/60 dark:hover:text-white"
|
|
|
+ href="javascript:;">johndoe@gmail.com</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
@@ -211,10 +188,10 @@
|
|
|
个人信息
|
|
|
</router-link>
|
|
|
</li>
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
<li class="border-t border-white-light dark:border-white-light/10">
|
|
|
- <router-link to="/auth/boxed-signin" class="text-danger !py-3" @click="close()">
|
|
|
+ <router-link to="/login" class="text-danger !py-3" @click="close()">
|
|
|
<icon-logout class="w-4.5 h-4.5 ltr:mr-2 rtl:ml-2 rotate-90 shrink-0" />
|
|
|
|
|
|
退出
|
|
@@ -227,147 +204,155 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
+
|
|
|
</div>
|
|
|
</header>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, onMounted, computed, reactive, watch } from 'vue';
|
|
|
- import { useI18n } from 'vue-i18n';
|
|
|
-
|
|
|
- import appSetting from '@/app-setting';
|
|
|
-
|
|
|
- import { useRoute } from 'vue-router';
|
|
|
- import { useStore } from 'vuex';
|
|
|
-
|
|
|
- import IconMenu from '@/components/icon/icon-menu.vue';
|
|
|
- import IconCalendar from '@/components/icon/icon-calendar.vue';
|
|
|
- import IconEdit from '@/components/icon/icon-edit.vue';
|
|
|
- import IconChatNotification from '@/components/icon/icon-chat-notification.vue';
|
|
|
- import IconSearch from '@/components/icon/icon-search.vue';
|
|
|
- import IconXCircle from '@/components/icon/icon-x-circle.vue';
|
|
|
- import IconSun from '@/components/icon/icon-sun.vue';
|
|
|
- import IconMoon from '@/components/icon/icon-moon.vue';
|
|
|
- import IconLaptop from '@/components/icon/icon-laptop.vue';
|
|
|
- import IconMailDot from '@/components/icon/icon-mail-dot.vue';
|
|
|
- import IconArrowLeft from '@/components/icon/icon-arrow-left.vue';
|
|
|
- import IconInfoCircle from '@/components/icon/icon-info-circle.vue';
|
|
|
- import IconBellBing from '@/components/icon/icon-bell-bing.vue';
|
|
|
- import IconUser from '@/components/icon/icon-user.vue';
|
|
|
- import IconMail from '@/components/icon/icon-mail.vue';
|
|
|
- import IconLockDots from '@/components/icon/icon-lock-dots.vue';
|
|
|
- import IconLogout from '@/components/icon/icon-logout.vue';
|
|
|
- import IconMenuDashboard from '@/components/icon/menu/icon-menu-dashboard.vue';
|
|
|
- import IconCaretDown from '@/components/icon/icon-caret-down.vue';
|
|
|
- import IconMenuApps from '@/components/icon/menu/icon-menu-apps.vue';
|
|
|
- import IconMenuComponents from '@/components/icon/menu/icon-menu-components.vue';
|
|
|
- import IconMenuElements from '@/components/icon/menu/icon-menu-elements.vue';
|
|
|
- import IconMenuDatatables from '@/components/icon/menu/icon-menu-datatables.vue';
|
|
|
- import IconMenuForms from '@/components/icon/menu/icon-menu-forms.vue';
|
|
|
- import IconMenuPages from '@/components/icon/menu/icon-menu-pages.vue';
|
|
|
- import IconMenuMore from '@/components/icon/menu/icon-menu-more.vue';
|
|
|
-
|
|
|
- const store = useStore();
|
|
|
- const route = useRoute();
|
|
|
- const search = ref(false);
|
|
|
-
|
|
|
- // multi language
|
|
|
- const i18n = reactive(useI18n());
|
|
|
- const changeLanguage = (item: any) => {
|
|
|
- i18n.locale = item.code;
|
|
|
- appSetting.toggleLanguage(item);
|
|
|
- };
|
|
|
- const currentFlag = computed(() => {
|
|
|
- return `/assets/images/flags/${i18n.locale.toUpperCase()}.svg`;
|
|
|
- });
|
|
|
-
|
|
|
- const notifications = ref([
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- profile: 'user-profile.jpeg',
|
|
|
- message: '<strong class="text-sm mr-1">John Doe</strong>invite you to <strong>Prototyping</strong>',
|
|
|
- time: '45 min ago',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- profile: 'profile-34.jpeg',
|
|
|
- message: '<strong class="text-sm mr-1">Adam Nolan</strong>mentioned you to <strong>UX Basics</strong>',
|
|
|
- time: '9h Ago',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- profile: 'profile-16.jpeg',
|
|
|
- message: '<strong class="text-sm mr-1">Anna Morgan</strong>Upload a file',
|
|
|
- time: '9h Ago',
|
|
|
- },
|
|
|
- ]);
|
|
|
-
|
|
|
- const messages = ref([
|
|
|
- {
|
|
|
- id: 1,
|
|
|
- image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-success-light dark:bg-success text-success dark:text-success-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></span>',
|
|
|
- title: 'Congratulations!',
|
|
|
- message: 'Your OS has been updated.',
|
|
|
- time: '1hr',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 2,
|
|
|
- image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-info-light dark:bg-info text-info dark:text-info-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span>',
|
|
|
- title: 'Did you know?',
|
|
|
- message: 'You can switch between artboards.',
|
|
|
- time: '2hr',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 3,
|
|
|
- image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-danger-light dark:bg-danger text-danger dark:text-danger-light"> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>',
|
|
|
- title: 'Something went wrong!',
|
|
|
- message: 'Send Reposrt',
|
|
|
- time: '2days',
|
|
|
- },
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-warning-light dark:bg-warning text-warning dark:text-warning-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line></svg></span>',
|
|
|
- title: 'Warning',
|
|
|
- message: 'Your password strength is low.',
|
|
|
- time: '5days',
|
|
|
- },
|
|
|
- ]);
|
|
|
-
|
|
|
- onMounted(() => {
|
|
|
- setActiveDropdown();
|
|
|
- });
|
|
|
-
|
|
|
- watch(route, (to, from) => {
|
|
|
- setActiveDropdown();
|
|
|
- });
|
|
|
-
|
|
|
- const setActiveDropdown = () => {
|
|
|
- const selector = document.querySelector('ul.horizontal-menu a[href="' + window.location.pathname + '"]');
|
|
|
- if (selector) {
|
|
|
- selector.classList.add('active');
|
|
|
- const all: any = document.querySelectorAll('ul.horizontal-menu .nav-link.active');
|
|
|
- for (let i = 0; i < all.length; i++) {
|
|
|
- all[0]?.classList.remove('active');
|
|
|
- }
|
|
|
- const ul: any = selector.closest('ul.sub-menu');
|
|
|
- if (ul) {
|
|
|
- let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link');
|
|
|
- if (ele) {
|
|
|
- ele = ele[0];
|
|
|
- setTimeout(() => {
|
|
|
- ele?.classList.add('active');
|
|
|
- });
|
|
|
- }
|
|
|
+import { ref, onMounted, computed, reactive, watch } from 'vue';
|
|
|
+import { useI18n } from 'vue-i18n';
|
|
|
+
|
|
|
+import appSetting from '@/app-setting';
|
|
|
+
|
|
|
+import { useRoute } from 'vue-router';
|
|
|
+import { useStore } from 'vuex';
|
|
|
+
|
|
|
+import IconMenu from '@/components/icon/icon-menu.vue';
|
|
|
+import IconCalendar from '@/components/icon/icon-calendar.vue';
|
|
|
+import IconEdit from '@/components/icon/icon-edit.vue';
|
|
|
+import IconChatNotification from '@/components/icon/icon-chat-notification.vue';
|
|
|
+import IconSearch from '@/components/icon/icon-search.vue';
|
|
|
+import IconXCircle from '@/components/icon/icon-x-circle.vue';
|
|
|
+import IconSun from '@/components/icon/icon-sun.vue';
|
|
|
+import IconMoon from '@/components/icon/icon-moon.vue';
|
|
|
+import IconLaptop from '@/components/icon/icon-laptop.vue';
|
|
|
+import IconMailDot from '@/components/icon/icon-mail-dot.vue';
|
|
|
+import IconArrowLeft from '@/components/icon/icon-arrow-left.vue';
|
|
|
+import IconInfoCircle from '@/components/icon/icon-info-circle.vue';
|
|
|
+import IconBellBing from '@/components/icon/icon-bell-bing.vue';
|
|
|
+import IconUser from '@/components/icon/icon-user.vue';
|
|
|
+import IconMail from '@/components/icon/icon-mail.vue';
|
|
|
+import IconLockDots from '@/components/icon/icon-lock-dots.vue';
|
|
|
+import IconLogout from '@/components/icon/icon-logout.vue';
|
|
|
+import IconMenuDashboard from '@/components/icon/menu/icon-menu-dashboard.vue';
|
|
|
+import IconCaretDown from '@/components/icon/icon-caret-down.vue';
|
|
|
+import IconMenuApps from '@/components/icon/menu/icon-menu-apps.vue';
|
|
|
+import IconMenuComponents from '@/components/icon/menu/icon-menu-components.vue';
|
|
|
+import IconMenuElements from '@/components/icon/menu/icon-menu-elements.vue';
|
|
|
+import IconMenuDatatables from '@/components/icon/menu/icon-menu-datatables.vue';
|
|
|
+import IconMenuForms from '@/components/icon/menu/icon-menu-forms.vue';
|
|
|
+import IconMenuPages from '@/components/icon/menu/icon-menu-pages.vue';
|
|
|
+import IconMenuMore from '@/components/icon/menu/icon-menu-more.vue';
|
|
|
+
|
|
|
+const store = useStore();
|
|
|
+const route = useRoute();
|
|
|
+const search = ref(false);
|
|
|
+
|
|
|
+// multi language
|
|
|
+const i18n = reactive(useI18n());
|
|
|
+const changeLanguage = (item: any) => {
|
|
|
+ i18n.locale = item.code;
|
|
|
+ appSetting.toggleLanguage(item);
|
|
|
+};
|
|
|
+const currentFlag = computed(() => {
|
|
|
+ return `/assets/images/flags/${i18n.locale.toUpperCase()}.svg`;
|
|
|
+});
|
|
|
+
|
|
|
+const notifications = ref([
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ profile: 'user-profile.jpeg',
|
|
|
+ message: '<strong class="text-sm mr-1">John Doe</strong>invite you to <strong>Prototyping</strong>',
|
|
|
+ time: '45 min ago',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ profile: 'profile-34.jpeg',
|
|
|
+ message: '<strong class="text-sm mr-1">Adam Nolan</strong>mentioned you to <strong>UX Basics</strong>',
|
|
|
+ time: '9h Ago',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ profile: 'profile-16.jpeg',
|
|
|
+ message: '<strong class="text-sm mr-1">Anna Morgan</strong>Upload a file',
|
|
|
+ time: '9h Ago',
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+const messages = ref([
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-success-light dark:bg-success text-success dark:text-success-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path></svg></span>',
|
|
|
+ title: 'Congratulations!',
|
|
|
+ message: 'Your OS has been updated.',
|
|
|
+ time: '1hr',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-info-light dark:bg-info text-info dark:text-info-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg></span>',
|
|
|
+ title: 'Did you know?',
|
|
|
+ message: 'You can switch between artboards.',
|
|
|
+ time: '2hr',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-danger-light dark:bg-danger text-danger dark:text-danger-light"> <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>',
|
|
|
+ title: 'Something went wrong!',
|
|
|
+ message: 'Send Reposrt',
|
|
|
+ time: '2days',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ image: '<span class="grid place-content-center w-9 h-9 rounded-full bg-warning-light dark:bg-warning text-warning dark:text-warning-light"><svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <line x1="12" y1="8" x2="12" y2="12"></line> <line x1="12" y1="16" x2="12.01" y2="16"></line></svg></span>',
|
|
|
+ title: 'Warning',
|
|
|
+ message: 'Your password strength is low.',
|
|
|
+ time: '5days',
|
|
|
+ },
|
|
|
+]);
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ setActiveDropdown();
|
|
|
+});
|
|
|
+
|
|
|
+watch(route, (to, from) => {
|
|
|
+ setActiveDropdown();
|
|
|
+});
|
|
|
+
|
|
|
+const setActiveDropdown = () => {
|
|
|
+ const selector = document.querySelector('ul.horizontal-menu a[href="' + window.location.pathname + '"]');
|
|
|
+ if (selector) {
|
|
|
+ selector.classList.add('active');
|
|
|
+ const all: any = document.querySelectorAll('ul.horizontal-menu .nav-link.active');
|
|
|
+ for (let i = 0; i < all.length; i++) {
|
|
|
+ all[0]?.classList.remove('active');
|
|
|
+ }
|
|
|
+ const ul: any = selector.closest('ul.sub-menu');
|
|
|
+ if (ul) {
|
|
|
+ let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link');
|
|
|
+ if (ele) {
|
|
|
+ ele = ele[0];
|
|
|
+ setTimeout(() => {
|
|
|
+ ele?.classList.add('active');
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
- };
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const removeNotification = (value: number) => {
|
|
|
+ notifications.value = notifications.value.filter((d) => d.id !== value);
|
|
|
+};
|
|
|
+
|
|
|
+const removeMessage = (value: number) => {
|
|
|
+ messages.value = messages.value.filter((d) => d.id !== value);
|
|
|
+};
|
|
|
+const toggleSidebars = () => {
|
|
|
+ store.dispatch('toggleSidebar');
|
|
|
+};
|
|
|
|
|
|
- const removeNotification = (value: number) => {
|
|
|
- notifications.value = notifications.value.filter((d) => d.id !== value);
|
|
|
- };
|
|
|
+const toggleTheme = (theme) => {
|
|
|
+ store.dispatch('toggleTheme', theme);
|
|
|
+};
|
|
|
|
|
|
- const removeMessage = (value: number) => {
|
|
|
- messages.value = messages.value.filter((d) => d.id !== value);
|
|
|
- };
|
|
|
</script>
|