merapikan koding
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="dark:text-white-dark text-center ltr:sm:text-left rtl:sm:text-right p-6 pt-0 mt-auto">
|
||||
© {{ new Date().getFullYear() }}. Vristo All rights reserved.
|
||||
© {{ new Date().getFullYear() }}. Freekake All rights reserved.
|
||||
</div>
|
||||
</template>
|
||||
|
||||
+13
-526
@@ -4,10 +4,10 @@
|
||||
<div class="relative flex w-full items-center bg-white px-5 py-2.5 dark:bg-[#0e1726]">
|
||||
<div class="horizontal-logo flex items-center justify-between ltr:mr-2 rtl:ml-2 lg:hidden">
|
||||
<NuxtLink to="/" class="main-logo flex shrink-0 items-center">
|
||||
<img class="inline w-8 ltr:-ml-1 rtl:-mr-1" src="/assets/images/logo.svg" alt="" />
|
||||
<img class="inline w-8 ltr:-ml-1 rtl:-mr-1" src="/assets/images/freekake.png" alt="" />
|
||||
<span
|
||||
class="hidden align-middle text-2xl font-semibold transition-all duration-300 ltr:ml-1.5 rtl:mr-1.5 dark:text-white-light md:inline"
|
||||
>VRISTO</span
|
||||
>ADMIN</span
|
||||
>
|
||||
</NuxtLink>
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<icon-menu class="h-5 w-5" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="hidden ltr:mr-2 rtl:ml-2 sm:block">
|
||||
<!-- <div class="hidden ltr:mr-2 rtl:ml-2 sm:block">
|
||||
<ul class="flex items-center space-x-2 rtl:space-x-reverse dark:text-[#d0d2d6]">
|
||||
<li>
|
||||
<NuxtLink
|
||||
@@ -46,12 +46,12 @@
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
<div
|
||||
class="flex items-center space-x-1.5 ltr:ml-auto rtl:mr-auto rtl:space-x-reverse dark:text-[#d0d2d6] sm:flex-1 ltr:sm:ml-0 sm:rtl:mr-0 lg:space-x-2"
|
||||
>
|
||||
<div class="sm:ltr:mr-auto sm:rtl:ml-auto">
|
||||
<form
|
||||
<!-- <form
|
||||
class="absolute inset-x-0 top-1/2 z-10 mx-4 hidden -translate-y-1/2 sm:relative sm:top-0 sm:mx-0 sm:block sm:translate-y-0"
|
||||
:class="{ '!block': search }"
|
||||
@submit.prevent="search = false"
|
||||
@@ -81,7 +81,7 @@
|
||||
@click="search = !search"
|
||||
>
|
||||
<icon-search class="mx-auto h-4.5 w-4.5 dark:text-[#d0d2d6]" />
|
||||
</button>
|
||||
</button> -->
|
||||
</div>
|
||||
<div>
|
||||
<a
|
||||
@@ -110,7 +110,7 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="dropdown shrink-0">
|
||||
<!-- <div class="dropdown shrink-0">
|
||||
<client-only>
|
||||
<Popper :placement="store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="8">
|
||||
<button
|
||||
@@ -145,9 +145,9 @@
|
||||
</template>
|
||||
</Popper>
|
||||
</client-only>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="dropdown shrink-0">
|
||||
<!-- <div class="dropdown shrink-0">
|
||||
<client-only>
|
||||
<Popper :placement="store.rtlClass === 'rtl' ? 'bottom-start' : 'bottom-end'" offsetDistance="8">
|
||||
<button
|
||||
@@ -210,9 +210,9 @@
|
||||
</template>
|
||||
</Popper>
|
||||
</client-only>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="dropdown shrink-0">
|
||||
<!-- <div class="dropdown shrink-0">
|
||||
<client-only>
|
||||
<Popper :placement="store.rtlClass === 'rtl' ? 'bottom-end' : 'bottom-start'" offsetDistance="8">
|
||||
<button
|
||||
@@ -288,7 +288,7 @@
|
||||
</template>
|
||||
</Popper>
|
||||
</client-only>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="dropdown shrink-0">
|
||||
<client-only>
|
||||
@@ -355,520 +355,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- horizontal menu -->
|
||||
<ul
|
||||
class="horizontal-menu hidden border-t border-[#ebedf2] bg-white px-6 py-1.5 font-semibold text-black rtl:space-x-reverse dark:border-[#191e3a] dark:bg-[#0e1726] dark:text-white-dark lg:space-x-1.5 xl:space-x-8"
|
||||
>
|
||||
<li class="menu nav-item relative">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-dashboard class="shrink-0" />
|
||||
|
||||
<span class="px-2">{{ $t('dashboard') }}</span>
|
||||
</div>
|
||||
<div class="right_arrow">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul class="sub-menu">
|
||||
<li>
|
||||
<NuxtLink to="/">{{ $t('sales') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/analytics">{{ $t('analytics') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/finance">{{ $t('finance') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/crypto">{{ $t('crypto') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu nav-item relative">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-apps class="shrink-0" />
|
||||
|
||||
<span class="px-2">{{ $t('apps') }}</span>
|
||||
</div>
|
||||
<div class="right_arrow">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul class="sub-menu">
|
||||
<li>
|
||||
<NuxtLink to="/apps/chat">{{ $t('chat') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/apps/mailbox">{{ $t('mailbox') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/apps/todolist">{{ $t('todo_list') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/apps/notes">{{ $t('notes') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/apps/scrumboard">{{ $t('scrumboard') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/apps/contacts">{{ $t('contacts') }}</NuxtLink>
|
||||
</li>
|
||||
<li class="relative">
|
||||
<a href="javascript:;"
|
||||
>{{ $t('invoice') }}
|
||||
<div class="-rotate-90 ltr:ml-auto rtl:mr-auto rtl:rotate-90">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul
|
||||
class="absolute top-0 z-[10] hidden min-w-[180px] rounded bg-white p-0 py-2 text-dark shadow ltr:left-[95%] rtl:right-[95%] dark:bg-[#1b2e4b] dark:text-white-dark"
|
||||
>
|
||||
<li>
|
||||
<NuxtLink to="/apps/invoice/list">{{ $t('list') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/apps/invoice/preview">{{ $t('preview') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/apps/invoice/add">{{ $t('add') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/apps/invoice/edit">{{ $t('edit') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/apps/calendar">{{ $t('calendar') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu nav-item relative">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-components class="shrink-0" />
|
||||
<span class="px-2">{{ $t('components') }}</span>
|
||||
</div>
|
||||
<div class="right_arrow">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul class="sub-menu">
|
||||
<li>
|
||||
<NuxtLink to="/components/tabs">{{ $t('tabs') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/accordions">{{ $t('accordions') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/modals">{{ $t('modals') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/cards">{{ $t('cards') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/carousel">{{ $t('carousel') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/countdown">{{ $t('countdown') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/counter">{{ $t('counter') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/sweetalert">{{ $t('sweet_alerts') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/timeline">{{ $t('timeline') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/notifications">{{ $t('notifications') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/media-object">{{ $t('media_object') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/list-group">{{ $t('list_group') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/pricing-table">{{ $t('pricing_tables') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/lightbox">{{ $t('lightbox') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu nav-item relative">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-elements class="shrink-0" />
|
||||
<span class="px-2">{{ $t('elements') }}</span>
|
||||
</div>
|
||||
<div class="right_arrow">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul class="sub-menu">
|
||||
<li>
|
||||
<NuxtLink to="/elements/alerts">{{ $t('alerts') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/avatar">{{ $t('avatar') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/badges">{{ $t('badges') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/breadcrumbs">{{ $t('breadcrumbs') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/buttons">{{ $t('buttons') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/buttons-group">{{ $t('button_groups') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/color-library">{{ $t('color_library') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/dropdown">{{ $t('dropdown') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/infobox">{{ $t('infobox') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/jumbotron">{{ $t('jumbotron') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/loader">{{ $t('loader') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/pagination">{{ $t('pagination') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/popovers">{{ $t('popovers') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/progress-bar">{{ $t('progress_bar') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/search">{{ $t('search') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/tooltips">{{ $t('tooltips') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/treeview">{{ $t('treeview') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/typography">{{ $t('typography') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu nav-item relative">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-datatables class="shrink-0" />
|
||||
<span class="px-2">{{ $t('tables') }}</span>
|
||||
</div>
|
||||
<div class="right_arrow">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul class="sub-menu">
|
||||
<li>
|
||||
<NuxtLink to="/tables">{{ $t('tables') }}</NuxtLink>
|
||||
</li>
|
||||
<li class="relative">
|
||||
<a href="javascript:;"
|
||||
>{{ $t('datatables') }}
|
||||
<div class="-rotate-90 ltr:ml-auto rtl:mr-auto rtl:rotate-90">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul
|
||||
class="absolute top-0 z-[10] hidden min-w-[180px] rounded bg-white p-0 py-2 text-dark shadow ltr:left-[95%] rtl:right-[95%] dark:bg-[#1b2e4b] dark:text-white-dark"
|
||||
>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/basic">{{ $t('basic') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/advanced">{{ $t('advanced') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/skin">{{ $t('skin') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/order-sorting">{{ $t('order_sorting') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/columns-filter">{{ $t('columns_filter') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/multi-column">{{ $t('multi_column') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/multiple-tables">{{ $t('multiple_tables') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/alt-pagination">{{ $t('alt_pagination') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/checkbox">{{ $t('checkbox') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/range-search">{{ $t('range_search') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/export">{{ $t('export') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/sticky-header">{{ $t('sticky_header') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/clone-header">{{ $t('clone_header') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/column-chooser">{{ $t('column_chooser') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu nav-item relative">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-forms class="shrink-0" />
|
||||
<span class="px-2">{{ $t('forms') }}</span>
|
||||
</div>
|
||||
<div class="right_arrow">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul class="sub-menu">
|
||||
<li>
|
||||
<NuxtLink to="/forms/basic">{{ $t('basic') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/input-group">{{ $t('input_group') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/layouts">{{ $t('layouts') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/validation">{{ $t('validation') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/input-mask">{{ $t('input_mask') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/select2">{{ $t('select2') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/touchspin">{{ $t('touchspin') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/checkbox-radio">{{ $t('checkbox_and_radio') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/switches">{{ $t('switches') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/wizards">{{ $t('wizards') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/file-upload">{{ $t('file_upload') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/quill-editor">{{ $t('quill_editor') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/markdown-editor">{{ $t('markdown_editor') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/date-picker">{{ $t('date_and_range_picker') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/clipboard">{{ $t('clipboard') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu nav-item relative">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-pages class="shrink-0" />
|
||||
<span class="px-2">{{ $t('pages') }}</span>
|
||||
</div>
|
||||
<div class="right_arrow">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul class="sub-menu">
|
||||
<li class="relative">
|
||||
<a href="javascript:;"
|
||||
>{{ $t('users') }}
|
||||
<div class="-rotate-90 ltr:ml-auto rtl:mr-auto rtl:rotate-90">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul
|
||||
class="absolute top-0 z-[10] hidden min-w-[180px] rounded bg-white p-0 py-2 text-dark shadow ltr:left-[95%] rtl:right-[95%] dark:bg-[#1b2e4b] dark:text-white-dark"
|
||||
>
|
||||
<li>
|
||||
<NuxtLink to="/users/profile">{{ $t('profile') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/users/user-account-settings">{{ $t('account_settings') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/pages/knowledge-base">{{ $t('knowledge_base') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/pages/contact-us-boxed" target="_blank">{{ $t('contact_us_boxed') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/pages/contact-us-cover" target="_blank">{{ $t('contact_us_cover') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/pages/faq">FAQ</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/pages/coming-soon-boxed" target="_blank">{{ $t('coming_soon_boxed') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/pages/coming-soon-cover" target="_blank">{{ $t('coming_soon_cover') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/pages/maintenence" target="_blank">{{ $t('maintenence') }}</NuxtLink>
|
||||
</li>
|
||||
<li class="relative">
|
||||
<a href="javascript:;"
|
||||
>{{ $t('error') }}
|
||||
<div class="-rotate-90 ltr:ml-auto rtl:mr-auto rtl:rotate-90">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul
|
||||
class="absolute top-0 z-[10] hidden min-w-[180px] rounded bg-white p-0 py-2 text-dark shadow ltr:left-[95%] rtl:right-[95%] dark:bg-[#1b2e4b] dark:text-white-dark"
|
||||
>
|
||||
<li>
|
||||
<NuxtLink to="/pages/error404" target="_blank">{{ $t('404') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/pages/error500" target="_blank">{{ $t('500') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/pages/error503" target="_blank">{{ $t('503') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="relative">
|
||||
<a href="javascript:;"
|
||||
>{{ $t('login') }}
|
||||
<div class="-rotate-90 ltr:ml-auto rtl:mr-auto rtl:rotate-90">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul
|
||||
class="absolute top-0 z-[10] hidden min-w-[180px] rounded bg-white p-0 py-2 text-dark shadow ltr:left-[95%] rtl:right-[95%] dark:bg-[#1b2e4b] dark:text-white-dark"
|
||||
>
|
||||
<li>
|
||||
<NuxtLink to="/auth/cover-login" target="_blank">{{ $t('login_cover') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/auth/boxed-signin" target="_blank">{{ $t('login_boxed') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="relative">
|
||||
<a href="javascript:;"
|
||||
>{{ $t('register') }}
|
||||
<div class="-rotate-90 ltr:ml-auto rtl:mr-auto rtl:rotate-90">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul
|
||||
class="absolute top-0 z-[10] hidden min-w-[180px] rounded bg-white p-0 py-2 text-dark shadow ltr:left-[95%] rtl:right-[95%] dark:bg-[#1b2e4b] dark:text-white-dark"
|
||||
>
|
||||
<li>
|
||||
<NuxtLink to="/auth/cover-register" target="_blank">{{ $t('register_cover') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/auth/boxed-signup" target="_blank">{{ $t('register_boxed') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="relative">
|
||||
<a href="javascript:;"
|
||||
>{{ $t('password_recovery') }}
|
||||
<div class="-rotate-90 ltr:ml-auto rtl:mr-auto rtl:rotate-90">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul
|
||||
class="absolute top-0 z-[10] hidden min-w-[180px] rounded bg-white p-0 py-2 text-dark shadow ltr:left-[95%] rtl:right-[95%] dark:bg-[#1b2e4b] dark:text-white-dark"
|
||||
>
|
||||
<li>
|
||||
<NuxtLink to="/auth/cover-password-reset" target="_blank">{{ $t('recover_id_cover') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/auth/boxed-password-reset" target="_blank">{{ $t('recover_id_boxed') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="relative">
|
||||
<a href="javascript:;"
|
||||
>{{ $t('lockscreen') }}
|
||||
<div class="-rotate-90 ltr:ml-auto rtl:mr-auto rtl:rotate-90">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul
|
||||
class="absolute top-0 z-[10] hidden min-w-[180px] rounded bg-white p-0 py-2 text-dark shadow ltr:left-[95%] rtl:right-[95%] dark:bg-[#1b2e4b] dark:text-white-dark"
|
||||
>
|
||||
<li>
|
||||
<NuxtLink to="/auth/cover-lockscreen" target="_blank">{{ $t('unlock_cover') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/auth/boxed-lockscreen" target="_blank">{{ $t('unlock_boxed') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="menu nav-item relative">
|
||||
<a href="javascript:;" class="nav-link">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-more class="shrink-0" />
|
||||
|
||||
<span class="px-2">{{ $t('more') }}</span>
|
||||
</div>
|
||||
<div class="right_arrow">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</a>
|
||||
<ul class="sub-menu">
|
||||
<li>
|
||||
<NuxtLink to="/dragndrop">{{ $t('drag_and_drop') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/charts">{{ $t('charts') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/font-icons">{{ $t('font_icons') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/widgets">{{ $t('widgets') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vristo.sbthemes.com" target="_blank">{{ $t('documentation') }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
@@ -1,742 +0,0 @@
|
||||
<template>
|
||||
<div :class="{ 'dark text-white-dark': store.semidark }">
|
||||
<nav class="sidebar fixed bottom-0 top-0 z-50 h-full min-h-screen w-[260px] shadow-[5px_0_25px_0_rgba(94,92,154,0.1)] transition-all duration-300">
|
||||
<div class="h-full bg-white dark:bg-[#0e1726]">
|
||||
<div class="flex items-center justify-between px-4 py-3">
|
||||
<NuxtLink to="/" class="main-logo flex shrink-0 items-center">
|
||||
<img class="ml-[5px] w-8 flex-none" src="/assets/images/logo.svg" alt="" />
|
||||
<span class="align-middle text-2xl font-semibold ltr:ml-1.5 rtl:mr-1.5 dark:text-white-light lg:inline">VRISTO</span>
|
||||
</NuxtLink>
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="collapse-icon flex h-8 w-8 items-center rounded-full transition duration-300 hover:bg-gray-500/10 hover:text-primary rtl:rotate-180 dark:text-white-light dark:hover:bg-dark-light/10"
|
||||
@click="store.toggleSidebar()"
|
||||
>
|
||||
<icon-carets-down class="m-auto rotate-90" />
|
||||
</a>
|
||||
</div>
|
||||
<client-only>
|
||||
<perfect-scrollbar
|
||||
:options="{
|
||||
swipeEasing: true,
|
||||
wheelPropagation: false,
|
||||
}"
|
||||
class="relative h-[calc(100vh-80px)]"
|
||||
>
|
||||
<ul class="relative space-y-0.5 p-4 py-0 font-semibold">
|
||||
<li class="menu nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link group w-full"
|
||||
:class="{ active: activeDropdown === 'dashboard' }"
|
||||
@click="activeDropdown === 'dashboard' ? (activeDropdown = null) : (activeDropdown = 'dashboard')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<icon-menu-dashboard class="shrink-0 group-hover:!text-primary" />
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">
|
||||
{{ $t('dashboard') }}
|
||||
</span>
|
||||
</div>
|
||||
<div :class="{ '-rotate-90 rtl:rotate-90': activeDropdown !== 'dashboard' }">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</button>
|
||||
<vue-collapsible :isOpen="activeDropdown === 'dashboard'">
|
||||
<ul class="sub-menu text-gray-500">
|
||||
<li>
|
||||
<NuxtLink to="/" @click="toggleMobileMenu">{{ $t('sales') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/analytics" @click="toggleMobileMenu">{{ $t('analytics') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/finance" @click="toggleMobileMenu">{{ $t('finance') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/crypto" @click="toggleMobileMenu">{{ $t('crypto') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-collapsible>
|
||||
</li>
|
||||
|
||||
<h2 class="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
|
||||
<icon-minus class="hidden h-5 w-4 flex-none" />
|
||||
<span>{{ $t('apps') }}</span>
|
||||
</h2>
|
||||
|
||||
<li class="nav-item">
|
||||
<ul>
|
||||
<li class="nav-item">
|
||||
<NuxtLink to="/apps/chat" class="group" @click="toggleMobileMenu">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-chat class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('chat')
|
||||
}}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NuxtLink to="/apps/mailbox" class="group" @click="toggleMobileMenu">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-mailbox class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('mailbox')
|
||||
}}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NuxtLink to="/apps/todolist" class="group" @click="toggleMobileMenu">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-todo class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('todo_list')
|
||||
}}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NuxtLink to="/apps/notes" class="group" @click="toggleMobileMenu">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-notes class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('notes')
|
||||
}}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NuxtLink to="/apps/scrumboard" class="group" @click="toggleMobileMenu">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-scrumboard class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('scrumboard')
|
||||
}}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<NuxtLink to="/apps/contacts" class="group" @click="toggleMobileMenu">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-contacts class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('contacts')
|
||||
}}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link group w-full"
|
||||
:class="{ active: activeDropdown === 'invoice' }"
|
||||
@click="activeDropdown === 'invoice' ? (activeDropdown = null) : (activeDropdown = 'invoice')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<icon-menu-invoice class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('invoice')
|
||||
}}</span>
|
||||
</div>
|
||||
<div :class="{ '-rotate-90 rtl:rotate-90': activeDropdown !== 'invoice' }">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</button>
|
||||
<vue-collapsible :isOpen="activeDropdown === 'invoice'">
|
||||
<ul class="sub-menu text-gray-500">
|
||||
<li>
|
||||
<NuxtLink to="/apps/invoice/list" @click="toggleMobileMenu">{{ $t('list') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/apps/invoice/preview" @click="toggleMobileMenu">{{ $t('preview') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/apps/invoice/add" @click="toggleMobileMenu">{{ $t('add') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/apps/invoice/edit" @click="toggleMobileMenu">{{ $t('edit') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-collapsible>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<NuxtLink to="/apps/calendar" class="group" @click="toggleMobileMenu">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-calendar class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('calendar')
|
||||
}}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<h2 class="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
|
||||
<icon-minus class="hidden h-5 w-4 flex-none" />
|
||||
<span>{{ $t('user_interface') }}</span>
|
||||
</h2>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link group w-full"
|
||||
:class="{ active: activeDropdown === 'components' }"
|
||||
@click="activeDropdown === 'components' ? (activeDropdown = null) : (activeDropdown = 'components')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<icon-menu-components class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('components')
|
||||
}}</span>
|
||||
</div>
|
||||
<div :class="{ '-rotate-90 rtl:rotate-90': activeDropdown !== 'components' }">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</button>
|
||||
<vue-collapsible :isOpen="activeDropdown === 'components'">
|
||||
<ul class="sub-menu text-gray-500">
|
||||
<li>
|
||||
<NuxtLink to="/components/tabs" @click="toggleMobileMenu">{{ $t('tabs') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/accordions" @click="toggleMobileMenu">{{ $t('accordions') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/modals" @click="toggleMobileMenu">{{ $t('modals') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/cards" @click="toggleMobileMenu">{{ $t('cards') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/carousel" @click="toggleMobileMenu">{{ $t('carousel') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/countdown" @click="toggleMobileMenu">{{ $t('countdown') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/counter" @click="toggleMobileMenu">{{ $t('counter') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/sweetalert" @click="toggleMobileMenu">{{ $t('sweet_alerts') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/timeline" @click="toggleMobileMenu">{{ $t('timeline') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/notifications" @click="toggleMobileMenu">{{ $t('notifications') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/media-object" @click="toggleMobileMenu">{{ $t('media_object') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/list-group" @click="toggleMobileMenu">{{ $t('list_group') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/pricing-table" @click="toggleMobileMenu">{{ $t('pricing_tables') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/components/lightbox" @click="toggleMobileMenu">{{ $t('lightbox') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-collapsible>
|
||||
</li>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link group w-full"
|
||||
:class="{ active: activeDropdown === 'elements' }"
|
||||
@click="activeDropdown === 'elements' ? (activeDropdown = null) : (activeDropdown = 'elements')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<icon-menu-elements class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('elements')
|
||||
}}</span>
|
||||
</div>
|
||||
<div :class="{ '-rotate-90 rtl:rotate-90': activeDropdown !== 'elements' }">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</button>
|
||||
<vue-collapsible :isOpen="activeDropdown === 'elements'">
|
||||
<ul class="sub-menu text-gray-500">
|
||||
<li>
|
||||
<NuxtLink to="/elements/alerts" @click="toggleMobileMenu">{{ $t('alerts') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/avatar" @click="toggleMobileMenu">{{ $t('avatar') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/badges" @click="toggleMobileMenu">{{ $t('badges') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/breadcrumbs" @click="toggleMobileMenu">{{ $t('breadcrumbs') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/buttons" @click="toggleMobileMenu">{{ $t('buttons') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/buttons-group" @click="toggleMobileMenu">{{ $t('button_groups') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/color-library" @click="toggleMobileMenu">{{ $t('color_library') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/dropdown" @click="toggleMobileMenu">{{ $t('dropdown') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/infobox" @click="toggleMobileMenu">{{ $t('infobox') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/jumbotron" @click="toggleMobileMenu">{{ $t('jumbotron') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/loader" @click="toggleMobileMenu">{{ $t('loader') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/pagination" @click="toggleMobileMenu">{{ $t('pagination') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/popovers" @click="toggleMobileMenu">{{ $t('popovers') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/progress-bar" @click="toggleMobileMenu">{{ $t('progress_bar') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/search" @click="toggleMobileMenu">{{ $t('search') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/tooltips" @click="toggleMobileMenu">{{ $t('tooltips') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/treeview" @click="toggleMobileMenu">{{ $t('treeview') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/elements/typography" @click="toggleMobileMenu">{{ $t('typography') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-collapsible>
|
||||
</li>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<NuxtLink to="/charts" class="nav-link group" @click="toggleMobileMenu">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-charts class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('charts')
|
||||
}}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<NuxtLink to="/widgets" class="nav-link group" @click="toggleMobileMenu">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-widgets class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('widgets')
|
||||
}}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<NuxtLink to="/font-icons" class="nav-link group" @click="toggleMobileMenu">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-font-icons class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('font_icons')
|
||||
}}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<NuxtLink to="/dragndrop" class="nav-link group" @click="toggleMobileMenu">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-drag-and-drop class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('drag_and_drop')
|
||||
}}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
|
||||
<h2 class="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
|
||||
<icon-minus class="hidden h-5 w-4 flex-none" />
|
||||
<span>{{ $t('tables_and_forms') }}</span>
|
||||
</h2>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<NuxtLink to="/tables" class="nav-link group" @click="toggleMobileMenu">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-tables class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('tables')
|
||||
}}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</li>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link group w-full"
|
||||
:class="{ active: activeDropdown === 'datatables' }"
|
||||
@click="activeDropdown === 'datatables' ? (activeDropdown = null) : (activeDropdown = 'datatables')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<icon-menu-datatables class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('datatables')
|
||||
}}</span>
|
||||
</div>
|
||||
<div :class="{ '-rotate-90 rtl:rotate-90': activeDropdown !== 'datatables' }">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</button>
|
||||
<vue-collapsible :isOpen="activeDropdown === 'datatables'">
|
||||
<ul class="sub-menu text-gray-500">
|
||||
<li>
|
||||
<NuxtLink to="/datatables/basic" @click="toggleMobileMenu">{{ $t('basic') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/advanced" @click="toggleMobileMenu">{{ $t('advanced') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/skin" @click="toggleMobileMenu">{{ $t('skin') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/order-sorting" @click="toggleMobileMenu">{{ $t('order_sorting') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/columns-filter" @click="toggleMobileMenu">{{ $t('columns_filter') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/multi-column" @click="toggleMobileMenu">{{ $t('multi_column') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/multiple-tables" @click="toggleMobileMenu">{{ $t('multiple_tables') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/alt-pagination" @click="toggleMobileMenu">{{ $t('alt_pagination') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/checkbox" @click="toggleMobileMenu">{{ $t('checkbox') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/range-search" @click="toggleMobileMenu">{{ $t('range_search') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/export" @click="toggleMobileMenu">{{ $t('export') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/sticky-header" @click="toggleMobileMenu">{{ $t('sticky_header') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/clone-header" @click="toggleMobileMenu">{{ $t('clone_header') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/datatables/column-chooser" @click="toggleMobileMenu">{{ $t('column_chooser') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-collapsible>
|
||||
</li>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link group w-full"
|
||||
:class="{ active: activeDropdown === 'forms' }"
|
||||
@click="activeDropdown === 'forms' ? (activeDropdown = null) : (activeDropdown = 'forms')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<icon-menu-forms class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{ $t('forms') }}</span>
|
||||
</div>
|
||||
<div :class="{ '-rotate-90 rtl:rotate-90': activeDropdown !== 'forms' }">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</button>
|
||||
<vue-collapsible :isOpen="activeDropdown === 'forms'">
|
||||
<ul class="sub-menu text-gray-500">
|
||||
<li>
|
||||
<NuxtLink to="/forms/basic" @click="toggleMobileMenu">{{ $t('basic') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/input-group" @click="toggleMobileMenu">{{ $t('input_group') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/layouts" @click="toggleMobileMenu">{{ $t('layouts') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/validation" @click="toggleMobileMenu">{{ $t('validation') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/input-mask" @click="toggleMobileMenu">{{ $t('input_mask') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/select2" @click="toggleMobileMenu">{{ $t('select2') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/touchspin" @click="toggleMobileMenu">{{ $t('touchspin') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/checkbox-radio" @click="toggleMobileMenu">{{ $t('checkbox_and_radio') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/switches" @click="toggleMobileMenu">{{ $t('switches') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/wizards" @click="toggleMobileMenu">{{ $t('wizards') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/file-upload" @click="toggleMobileMenu">{{ $t('file_upload') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/quill-editor" @click="toggleMobileMenu">{{ $t('quill_editor') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/markdown-editor" @click="toggleMobileMenu">{{ $t('markdown_editor') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/date-picker" @click="toggleMobileMenu">{{ $t('date_and_range_picker') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/forms/clipboard" @click="toggleMobileMenu">{{ $t('clipboard') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-collapsible>
|
||||
</li>
|
||||
|
||||
<h2 class="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
|
||||
<icon-minus class="hidden h-5 w-4 flex-none" />
|
||||
<span>{{ $t('user_and_pages') }}</span>
|
||||
</h2>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link group w-full"
|
||||
:class="{ active: activeDropdown === 'users' }"
|
||||
@click="activeDropdown === 'users' ? (activeDropdown = null) : (activeDropdown = 'users')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<icon-menu-users class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{ $t('users') }}</span>
|
||||
</div>
|
||||
<div :class="{ '-rotate-90 rtl:rotate-90': activeDropdown !== 'users' }">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</button>
|
||||
<vue-collapsible :isOpen="activeDropdown === 'users'">
|
||||
<ul class="sub-menu text-gray-500">
|
||||
<li>
|
||||
<NuxtLink to="/users/profile" @click="toggleMobileMenu">{{ $t('profile') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/users/user-account-settings" @click="toggleMobileMenu">{{ $t('account_settings') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-collapsible>
|
||||
</li>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link group w-full"
|
||||
:class="{ active: activeDropdown === 'pages' }"
|
||||
@click="activeDropdown === 'pages' ? (activeDropdown = null) : (activeDropdown = 'pages')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<icon-menu-pages class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{ $t('pages') }}</span>
|
||||
</div>
|
||||
<div :class="{ '-rotate-90 rtl:rotate-90': activeDropdown !== 'pages' }">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</button>
|
||||
<vue-collapsible :isOpen="activeDropdown === 'pages'">
|
||||
<ul class="sub-menu text-gray-500">
|
||||
<li>
|
||||
<NuxtLink to="/pages/knowledge-base" @click="toggleMobileMenu">{{ $t('knowledge_base') }}</NuxtLink>
|
||||
</li>
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/pages/contact-us-boxed" target="_blank">{{ $t('contact_us_boxed') }}</NuxtLink>
|
||||
</li>
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/pages/contact-us-cover" target="_blank">{{ $t('contact_us_cover') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/pages/faq" @click="toggleMobileMenu">{{ $t('faq') }}</NuxtLink>
|
||||
</li>
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/pages/coming-soon-boxed" target="_blank">{{ $t('coming_soon_boxed') }}</NuxtLink>
|
||||
</li>
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/pages/coming-soon-cover" target="_blank">{{ $t('coming_soon_cover') }}</NuxtLink>
|
||||
</li>
|
||||
<li class="menu nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="w-full before:h-[5px] before:w-[5px] before:rounded before:bg-gray-300 hover:bg-gray-100 ltr:before:mr-2 rtl:before:ml-2 dark:text-[#888ea8] dark:hover:bg-gray-900"
|
||||
@click="subActive === 'error' ? (subActive = null) : (subActive = 'error')"
|
||||
>
|
||||
{{ $t('error') }}
|
||||
<div class="ltr:ml-auto rtl:mr-auto" :class="{ '-rotate-90 rtl:rotate-90': subActive !== 'error' }">
|
||||
<icon-carets-down :fill="true" class="h-4 w-4" />
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<vue-collapsible :isOpen="subActive === 'error'">
|
||||
<ul :unmount="false" class="sub-menu text-gray-500">
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/pages/error404" target="_blank">{{ $t('404') }}</NuxtLink>
|
||||
</li>
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/pages/error500" target="_blank">{{ $t('500') }}</NuxtLink>
|
||||
</li>
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/pages/error503" target="_blank">{{ $t('503') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-collapsible>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/pages/maintenence" target="_blank">{{ $t('maintenence') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-collapsible>
|
||||
</li>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link group w-full"
|
||||
:class="{ active: activeDropdown === 'authentication' }"
|
||||
@click="activeDropdown === 'authentication' ? (activeDropdown = null) : (activeDropdown = 'authentication')"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<icon-menu-authentication class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('authentication')
|
||||
}}</span>
|
||||
</div>
|
||||
<div :class="{ '-rotate-90 rtl:rotate-90': activeDropdown !== 'authentication' }">
|
||||
<icon-caret-down />
|
||||
</div>
|
||||
</button>
|
||||
<vue-collapsible :isOpen="activeDropdown === 'authentication'">
|
||||
<ul class="sub-menu text-gray-500">
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/auth/boxed-signin" target="_blank">{{ $t('login_boxed') }}</NuxtLink>
|
||||
</li>
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/auth/boxed-signup" target="_blank">{{ $t('register_boxed') }}</NuxtLink>
|
||||
</li>
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/auth/boxed-lockscreen" target="_blank">{{ $t('unlock_boxed') }}</NuxtLink>
|
||||
</li>
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/auth/boxed-password-reset" target="_blank">{{ $t('recover_id_boxed') }}</NuxtLink>
|
||||
</li>
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/auth/cover-login" target="_blank">{{ $t('login_cover') }}</NuxtLink>
|
||||
</li>
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/auth/cover-register" target="_blank">{{ $t('register_cover') }}</NuxtLink>
|
||||
</li>
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/auth/cover-lockscreen" target="_blank">{{ $t('unlock_cover') }}</NuxtLink>
|
||||
</li>
|
||||
<li @click="toggleMobileMenu">
|
||||
<NuxtLink to="/auth/cover-password-reset" target="_blank">{{ $t('recover_id_cover') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-collapsible>
|
||||
</li>
|
||||
|
||||
<h2 class="-mx-4 mb-1 flex items-center bg-white-light/30 px-7 py-3 font-extrabold uppercase dark:bg-dark dark:bg-opacity-[0.08]">
|
||||
<icon-minus class="hidden h-5 w-4 flex-none" />
|
||||
<span>{{ $t('supports') }}</span>
|
||||
</h2>
|
||||
|
||||
<li class="menu nav-item">
|
||||
<a href="https://vristo.sbthemes.com" target="_blank" class="nav-link group">
|
||||
<div class="flex items-center">
|
||||
<icon-menu-documentation class="shrink-0 group-hover:!text-primary" />
|
||||
|
||||
<span class="text-black ltr:pl-3 rtl:pr-3 dark:text-[#506690] dark:group-hover:text-white-dark">{{
|
||||
$t('documentation')
|
||||
}}</span>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</perfect-scrollbar>
|
||||
</client-only>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
import { useAppStore } from '@/stores/index';
|
||||
import VueCollapsible from 'vue-height-collapsible/vue3';
|
||||
const store = useAppStore();
|
||||
const activeDropdown: any = ref('');
|
||||
const subActive: any = ref('');
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
const selector = document.querySelector('.sidebar ul a[href="' + window.location.pathname + '"]');
|
||||
|
||||
if (selector) {
|
||||
selector.classList.add('active');
|
||||
const ul: any = selector.closest('ul.sub-menu');
|
||||
if (ul) {
|
||||
let ele: any = ul.closest('li.menu').querySelectorAll('.nav-link') || [];
|
||||
|
||||
if (ele.length) {
|
||||
ele = ele[0];
|
||||
setTimeout(() => {
|
||||
ele.click();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
if (window.innerWidth < 1024) {
|
||||
store.toggleSidebar();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -4,8 +4,8 @@
|
||||
<div class="h-full bg-white dark:bg-[#0e1726]">
|
||||
<div class="flex items-center justify-between px-4 py-3">
|
||||
<NuxtLink to="/" class="main-logo flex shrink-0 items-center">
|
||||
<img class="ml-[5px] w-8 flex-none" src="/assets/images/logo.svg" alt="" />
|
||||
<span class="align-middle text-2xl font-semibold ltr:ml-1.5 rtl:mr-1.5 dark:text-white-light lg:inline">VRISTO</span>
|
||||
<img class="ml-[5px] w-8 flex-none" src="/assets/images/freekake.png" alt="" />
|
||||
<span class="align-middle text-2xl font-semibold ltr:ml-1.5 rtl:mr-1.5 dark:text-white-light lg:inline">ADMIN</span>
|
||||
</NuxtLink>
|
||||
<a
|
||||
href="javascript:;"
|
||||
@@ -46,15 +46,6 @@
|
||||
<li>
|
||||
<NuxtLink to="/" @click="toggleMobileMenu">{{ $t('sales') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/analytics" @click="toggleMobileMenu">{{ $t('analytics') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/finance" @click="toggleMobileMenu">{{ $t('finance') }}</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="/crypto" @click="toggleMobileMenu">{{ $t('crypto') }}</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-collapsible>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user