mirrors2/vuejs-admin-dashboard-template
1
0
Fork 0
mirror of https://github.com/cruip/vuejs-admin-dashboard-template.git synced 2026-02-04 13:42:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

1.4.2

Browse Source
This commit is contained in:
pasqualevitiello
2023-02-13 15:44:58 +01:00
parent 1e00e994a6
commit 9cb186991b
8 changed files with 1151 additions and 1084 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
CHANGELOG.md
View File

@@ -1,5 +1,11 @@
# CHANGELOG.md # CHANGELOG.md
## [1.4.2] - 2023-02-13
- Update dependencies
- Improve sidebar icons color logic
## [1.4.0] - 2022-08-30 ## [1.4.0] - 2022-08-30
- Update sidebar - Update sidebar

1754
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

22
package.json
View File

@@ -7,21 +7,21 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@tailwindcss/forms": "^0.5.2", "@tailwindcss/forms": "^0.5.3",
"chart.js": "^3.8.0", "chart.js": "^4.2.1",
"chartjs-adapter-moment": "^1.0.0", "chartjs-adapter-moment": "^1.0.1",
"flatpickr": "^4.6.13", "flatpickr": "^4.6.13",
"moment": "^2.29.4", "moment": "^2.29.4",
"vue": "^3.2.20", "vue": "^3.2.20",
"vue-flatpickr-component": "^9.0.6", "vue-flatpickr-component": "^9.0.8",
"vue-router": "^4.1.2" "vue-router": "^4.1.6"
}, },
"devDependencies": { "devDependencies": {
"@vitejs/plugin-vue": "^3.0.0", "@vitejs/plugin-vue": "^4.0.0",
"@vue/compiler-sfc": "^3.2.20", "@vue/compiler-sfc": "^3.2.20",
"autoprefixer": "^10.4.7", "autoprefixer": "^10.4.13",
"postcss": "^8.4.14", "postcss": "^8.4.21",
"tailwindcss": "^3.1.6", "tailwindcss": "^3.2.6",
"vite": "^3.0.0" "vite": "^4.1.1"
} }
} }

8
src/charts/BarChart01.vue
View File

@@ -45,8 +45,8 @@ export default {
}, },
scales: { scales: {
y: { y: {
grid: { border: {
drawBorder: false, display: false,
}, },
ticks: { ticks: {
maxTicksLimit: 5, maxTicksLimit: 5,
@@ -62,9 +62,11 @@ export default {
month: 'MMM YY', month: 'MMM YY',
}, },
}, },
border: {
display: false,
},
grid: { grid: {
display: false, display: false,
drawBorder: false,
}, },
}, },
}, },

8
src/charts/BarChart02.vue
View File

@@ -39,8 +39,8 @@ export default {
scales: { scales: {
y: { y: {
stacked: true, stacked: true,
grid: { border: {
drawBorder: false, display: false,
}, },
beginAtZero: true, beginAtZero: true,
ticks: { ticks: {
@@ -58,9 +58,11 @@ export default {
month: 'MMM YY', month: 'MMM YY',
}, },
}, },
border: {
display: false,
},
grid: { grid: {
display: false, display: false,
drawBorder: false,
}, },
ticks: { ticks: {
autoSkipPadding: 48, autoSkipPadding: 48,

8
src/charts/LineChart02.vue
View File

@@ -48,8 +48,10 @@ export default {
}, },
scales: { scales: {
y: { y: {
border: {
display: false,
},
grid: { grid: {
drawBorder: false,
beginAtZero: true, beginAtZero: true,
}, },
ticks: { ticks: {
@@ -66,9 +68,11 @@ export default {
month: 'MMM YY', month: 'MMM YY',
}, },
}, },
border: {
display: false,
},
grid: { grid: {
display: false, display: false,
drawBorder: false,
}, },
ticks: { ticks: {
autoSkipPadding: 48, autoSkipPadding: 48,

8
src/charts/RealtimeChart.vue
View File

@@ -57,8 +57,8 @@ export default {
}, },
scales: { scales: {
y: { y: {
grid: { border: {
drawBorder: false, display: false,
}, },
suggestedMin: 30, suggestedMin: 30,
suggestedMax: 80, suggestedMax: 80,
@@ -77,9 +77,11 @@ export default {
second: 'H:mm:ss', second: 'H:mm:ss',
}, },
}, },
border: {
display: false,
},
grid: { grid: {
display: false, display: false,
drawBorder: false,
}, },
ticks: { ticks: {
autoSkipPadding: 48, autoSkipPadding: 48,

421
src/partials/Sidebar.vue
View File

@@ -4,23 +4,12 @@
<div class="fixed inset-0 bg-slate-900 bg-opacity-30 z-40 lg:hidden lg:z-auto transition-opacity duration-200" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'" aria-hidden="true"></div> <div class="fixed inset-0 bg-slate-900 bg-opacity-30 z-40 lg:hidden lg:z-auto transition-opacity duration-200" :class="sidebarOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'" aria-hidden="true"></div>
<!-- Sidebar --> <!-- Sidebar -->
<div <div id="sidebar" ref="sidebar" class="flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-screen overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 bg-slate-800 p-4 transition-all duration-200 ease-in-out" :class="sidebarOpen ? 'translate-x-0' : '-translate-x-64'">
id="sidebar"
ref="sidebar"
class="flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 h-screen overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 bg-slate-800 p-4 transition-all duration-200 ease-in-out"
:class="sidebarOpen ? 'translate-x-0' : '-translate-x-64'"
>
<!-- Sidebar header --> <!-- Sidebar header -->
<div class="flex justify-between mb-10 pr-3 sm:px-2"> <div class="flex justify-between mb-10 pr-3 sm:px-2">
<!-- Close button --> <!-- Close button -->
<button <button ref="trigger" class="lg:hidden text-slate-500 hover:text-slate-400" @click.stop="$emit('close-sidebar')" aria-controls="sidebar" :aria-expanded="sidebarOpen">
ref="trigger"
class="lg:hidden text-slate-500 hover:text-slate-400"
@click.stop="$emit('close-sidebar')"
aria-controls="sidebar"
:aria-expanded="sidebarOpen"
>
<span class="sr-only">Close sidebar</span> <span class="sr-only">Close sidebar</span>
<svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z" /> <path d="M10.7 18.7l1.4-1.4L7.8 13H20v-2H7.8l4.3-4.3-1.4-1.4L4 12z" />
@@ -58,13 +47,13 @@
<ul class="mt-3"> <ul class="mt-3">
<!-- Dashboard --> <!-- Dashboard -->
<SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath === '/' || currentRoute.fullPath.includes('dashboard')"> <SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath === '/' || currentRoute.fullPath.includes('dashboard')">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :class="(currentRoute.fullPath === '/' || currentRoute.fullPath.includes('dashboard')) && 'hover:text-slate-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true"> <a class="block text-slate-200 truncate transition duration-150" :class="(currentRoute.fullPath === '/' || currentRoute.fullPath.includes('dashboard')) ? 'hover:text-slate-200' : 'hover:text-white'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<path class="fill-current text-slate-400" :class="(currentRoute.fullPath === '/' || currentRoute.fullPath.includes('dashboard')) && '!text-indigo-500'" d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0z" /> <path class="fill-current" :class="(currentRoute.fullPath === '/' || currentRoute.fullPath.includes('dashboard')) ? 'text-indigo-500' : 'text-slate-400'" d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0z" />
<path class="fill-current text-slate-600" :class="(currentRoute.fullPath === '/' || currentRoute.fullPath.includes('dashboard')) && 'text-indigo-600'" d="M12 3c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9z" /> <path class="fill-current" :class="(currentRoute.fullPath === '/' || currentRoute.fullPath.includes('dashboard')) ? 'text-indigo-600' : 'text-slate-600'" d="M12 3c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9z" />
<path class="fill-current text-slate-400" :class="(currentRoute.fullPath === '/' || currentRoute.fullPath.includes('dashboard')) && 'text-indigo-200'" d="M12 15c-1.654 0-3-1.346-3-3 0-.462.113-.894.3-1.285L6 6l4.714 3.301A2.973 2.973 0 0112 9c1.654 0 3 1.346 3 3s-1.346 3-3 3z" /> <path class="fill-current" :class="(currentRoute.fullPath === '/' || currentRoute.fullPath.includes('dashboard')) ? 'text-indigo-200' : 'text-slate-400'" d="M12 15c-1.654 0-3-1.346-3-3 0-.462.113-.894.3-1.285L6 6l4.714 3.301A2.973 2.973 0 0112 9c1.654 0 3 1.346 3 3s-1.346 3-3 3z" />
</svg> </svg>
<span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Dashboard</span> <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Dashboard</span>
</div> </div>
@@ -80,37 +69,37 @@
<ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'"> <ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'">
<router-link to="/" custom v-slot="{ href, navigate, isExactActive }"> <router-link to="/" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :class="isExactActive && '!text-indigo-500'" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Main</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Main</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/dashboard/analytics" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Analytics</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Analytics</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/dashboard/fintech" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Fintech</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Fintech</span>
</a> </a>
</li> </li>
</router-link> </router-link>
</ul> </ul>
</div> </div>
</SidebarLinkGroup> </SidebarLinkGroup>
<!-- E-Commerce --> <!-- E-Commerce -->
<SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('ecommerce')"> <SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('ecommerce')">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :class="currentRoute.fullPath.includes('ecommerce') && 'hover:text-slate-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true"> <a class="block text-slate-200 truncate transition duration-150" :class="currentRoute.fullPath.includes('ecommerce') ? 'hover:text-slate-200' : 'hover:text-white'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<path class="fill-current text-slate-400" :class="currentRoute.fullPath.includes('ecommerce') && 'text-indigo-300'" d="M13 15l11-7L11.504.136a1 1 0 00-1.019.007L0 7l13 8z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('ecommerce') ? 'text-indigo-300' : 'text-slate-400'" d="M13 15l11-7L11.504.136a1 1 0 00-1.019.007L0 7l13 8z" />
<path class="fill-current text-slate-700" :class="currentRoute.fullPath.includes('ecommerce') && '!text-indigo-600'" d="M13 15L0 7v9c0 .355.189.685.496.864L13 24v-9z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('ecommerce') ? 'text-indigo-600' : 'text-slate-700'" d="M13 15L0 7v9c0 .355.189.685.496.864L13 24v-9z" />
<path class="fill-current text-slate-600" :class="currentRoute.fullPath.includes('ecommerce') && 'text-indigo-500'" d="M13 15.047V24l10.573-7.181A.999.999 0 0024 16V8l-11 7.047z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('ecommerce') ? 'text-indigo-500' : 'text-slate-600'" d="M13 15.047V24l10.573-7.181A.999.999 0 0024 16V8l-11 7.047z" />
</svg> </svg>
<span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">E-Commerce </span> <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">E-Commerce </span>
</div> </div>
@@ -124,72 +113,72 @@
</a> </a>
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block"> <div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'"> <ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'">
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/ecommerce/customers" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Customers</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Customers</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/ecommerce/orders" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Orders</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Orders</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/ecommerce/invoices" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Invoices</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Invoices</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/ecommerce/shop" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Shop</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Shop</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/-2" custom v-slot="{ href, navigate }"> <router-link to="/ecommerce/shop-2" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Shop 2</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Shop 2</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/ecommerce/product" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Single Product</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Single Product</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/ecommerce/cart" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Cart</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Cart</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/ecommerce/cart-2" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Cart 2</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Cart 2</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/ecommerce/cart-3" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Cart 3</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Cart 3</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/ecommerce/pay" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Pay</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Pay</span>
</a> </a>
</li> </li>
@@ -199,12 +188,12 @@
</SidebarLinkGroup> </SidebarLinkGroup>
<!-- Community --> <!-- Community -->
<SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('community')"> <SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('community')">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :class="currentRoute.fullPath.includes('community') && 'hover:text-slate-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true"> <a class="block text-slate-200 truncate transition duration-150" :class="currentRoute.fullPath.includes('community') ? 'hover:text-slate-200' : 'hover:text-white'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<path class="fill-current text-slate-600" :class="currentRoute.fullPath.includes('community') && 'text-indigo-500'" d="M18.974 8H22a2 2 0 012 2v6h-2v5a1 1 0 01-1 1h-2a1 1 0 01-1-1v-5h-2v-6a2 2 0 012-2h.974zM20 7a2 2 0 11-.001-3.999A2 2 0 0120 7zM2.974 8H6a2 2 0 012 2v6H6v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5H0v-6a2 2 0 012-2h.974zM4 7a2 2 0 11-.001-3.999A2 2 0 014 7z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('community') ? 'text-indigo-500' : 'text-slate-600'" d="M18.974 8H22a2 2 0 012 2v6h-2v5a1 1 0 01-1 1h-2a1 1 0 01-1-1v-5h-2v-6a2 2 0 012-2h.974zM20 7a2 2 0 11-.001-3.999A2 2 0 0120 7zM2.974 8H6a2 2 0 012 2v6H6v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5H0v-6a2 2 0 012-2h.974zM4 7a2 2 0 11-.001-3.999A2 2 0 014 7z" />
<path class="fill-current text-slate-400" :class="currentRoute.fullPath.includes('community') && 'text-indigo-300'" d="M12 6a3 3 0 110-6 3 3 0 010 6zm2 18h-4a1 1 0 01-1-1v-6H6v-6a3 3 0 013-3h6a3 3 0 013 3v6h-3v6a1 1 0 01-1 1z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('community') ? 'text-indigo-300' : 'text-slate-400'" d="M12 6a3 3 0 110-6 3 3 0 010 6zm2 18h-4a1 1 0 01-1-1v-6H6v-6a3 3 0 013-3h6a3 3 0 013 3v6h-3v6a1 1 0 01-1 1z" />
</svg> </svg>
<span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Community</span> <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Community</span>
</div> </div>
@@ -218,74 +207,74 @@
</a> </a>
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block"> <div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'"> <ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'">
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/community/users-tabs" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Users - Tabs</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Users - Tabs</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/community/users-tiles" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Users - Tiles</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Users - Tiles</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/community/profile" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Profile</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Profile</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/community/feed" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Feed</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Feed</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/community/forum" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Forum</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Forum</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/community/forum-post" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Forum - Post</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Forum - Post</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/c" custom v-slot="{ href, navigate }"> <router-link to="/community/meetups" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Meetups</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Meetups</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/community/meetups-post" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Meetups - Post</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Meetups - Post</span>
</a> </a>
</li> </li>
</router-link> </router-link>
</ul> </ul>
</div> </div>
</SidebarLinkGroup> </SidebarLinkGroup>
<!-- Finance --> <!-- Finance -->
<SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('finance')"> <SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('finance')">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :class="currentRoute.fullPath.includes('finance') && 'hover:text-slate-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true"> <a class="block text-slate-200 truncate transition duration-150" :class="currentRoute.fullPath.includes('finance') ? 'hover:text-slate-200' : 'hover:text-white'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<path class="fill-current text-slate-400" :class="currentRoute.fullPath.includes('finance') && 'text-indigo-300'" d="M13 6.068a6.035 6.035 0 0 1 4.932 4.933H24c-.486-5.846-5.154-10.515-11-11v6.067Z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('finance') ? 'text-indigo-300' : 'text-slate-400'" d="M13 6.068a6.035 6.035 0 0 1 4.932 4.933H24c-.486-5.846-5.154-10.515-11-11v6.067Z" />
<path class="fill-current text-slate-700" :class="currentRoute.fullPath.includes('finance') && '!text-indigo-500'" d="M18.007 13c-.474 2.833-2.919 5-5.864 5a5.888 5.888 0 0 1-3.694-1.304L4 20.731C6.131 22.752 8.992 24 12.143 24c6.232 0 11.35-4.851 11.857-11h-5.993Z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('finance') ? 'text-indigo-500' : 'text-slate-700'" d="M18.007 13c-.474 2.833-2.919 5-5.864 5a5.888 5.888 0 0 1-3.694-1.304L4 20.731C6.131 22.752 8.992 24 12.143 24c6.232 0 11.35-4.851 11.857-11h-5.993Z" />
<path class="fill-current text-slate-600" :class="currentRoute.fullPath.includes('finance') && 'text-indigo-600'" d="M6.939 15.007A5.861 5.861 0 0 1 6 11.829c0-2.937 2.167-5.376 5-5.85V0C4.85.507 0 5.614 0 11.83c0 2.695.922 5.174 2.456 7.17l4.483-3.993Z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('finance') ? 'text-indigo-600' : 'text-slate-600'" d="M6.939 15.007A5.861 5.861 0 0 1 6 11.829c0-2.937 2.167-5.376 5-5.85V0C4.85.507 0 5.614 0 11.83c0 2.695.922 5.174 2.456 7.17l4.483-3.993Z" />
</svg> </svg>
<span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Finance</span> <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Finance</span>
</div> </div>
@@ -299,39 +288,39 @@
</a> </a>
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block"> <div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'"> <ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'">
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/finance/cards" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Cards</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Cards</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/finance/transactions" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Transactions</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Transactions</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/finance/transaction-details" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Transaction Details</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Transaction Details</span>
</a> </a>
</li> </li>
</router-link> </router-link>
</ul> </ul>
</div> </div>
</SidebarLinkGroup> </SidebarLinkGroup>
<!-- Job Board --> <!-- Job Board -->
<SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('job')"> <SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('job')">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :class="currentRoute.fullPath.includes('job') && 'hover:text-slate-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true"> <a class="block text-slate-200 truncate transition duration-150" :class="currentRoute.fullPath.includes('job') ? 'hover:text-slate-200' : 'hover:text-white'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<path class="fill-current text-slate-700" :class="currentRoute.fullPath.includes('job') && '!text-indigo-600'" d="M4.418 19.612A9.092 9.092 0 0 1 2.59 17.03L.475 19.14c-.848.85-.536 2.395.743 3.673a4.413 4.413 0 0 0 1.677 1.082c.253.086.519.131.787.135.45.011.886-.16 1.208-.474L7 21.44a8.962 8.962 0 0 1-2.582-1.828Z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('job') ? 'text-indigo-600' : 'text-slate-700'" d="M4.418 19.612A9.092 9.092 0 0 1 2.59 17.03L.475 19.14c-.848.85-.536 2.395.743 3.673a4.413 4.413 0 0 0 1.677 1.082c.253.086.519.131.787.135.45.011.886-.16 1.208-.474L7 21.44a8.962 8.962 0 0 1-2.582-1.828Z" />
<path class="fill-current text-slate-600" :class="currentRoute.fullPath.includes('job') && '!text-indigo-500'" d="M10.034 13.997a11.011 11.011 0 0 1-2.551-3.862L4.595 13.02a2.513 2.513 0 0 0-.4 2.645 6.668 6.668 0 0 0 1.64 2.532 5.525 5.525 0 0 0 3.643 1.824 2.1 2.1 0 0 0 1.534-.587l2.883-2.882a11.156 11.156 0 0 1-3.861-2.556Z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('job') ? 'text-indigo-500' : 'text-slate-600'" d="M10.034 13.997a11.011 11.011 0 0 1-2.551-3.862L4.595 13.02a2.513 2.513 0 0 0-.4 2.645 6.668 6.668 0 0 0 1.64 2.532 5.525 5.525 0 0 0 3.643 1.824 2.1 2.1 0 0 0 1.534-.587l2.883-2.882a11.156 11.156 0 0 1-3.861-2.556Z" />
<path class="fill-current text-slate-400" :class="currentRoute.fullPath.includes('job') && '!text-indigo-300'" d="M21.554 2.471A8.958 8.958 0 0 0 18.167.276a3.105 3.105 0 0 0-3.295.467L9.715 5.888c-1.41 1.408-.665 4.275 1.733 6.668a8.958 8.958 0 0 0 3.387 2.196c.459.157.94.24 1.425.246a2.559 2.559 0 0 0 1.87-.715l5.156-5.146c1.415-1.406.666-4.273-1.732-6.666Zm.318 5.257c-.148.147-.594.2-1.256-.018A7.037 7.037 0 0 1 18.016 6c-1.73-1.728-2.104-3.475-1.73-3.845a.671.671 0 0 1 .465-.129c.27.008.536.057.79.146a7.07 7.07 0 0 1 2.6 1.711c1.73 1.73 2.105 3.472 1.73 3.846Z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('job') ? 'text-indigo-300' : 'text-slate-400'" d="M21.554 2.471A8.958 8.958 0 0 0 18.167.276a3.105 3.105 0 0 0-3.295.467L9.715 5.888c-1.41 1.408-.665 4.275 1.733 6.668a8.958 8.958 0 0 0 3.387 2.196c.459.157.94.24 1.425.246a2.559 2.559 0 0 0 1.87-.715l5.156-5.146c1.415-1.406.666-4.273-1.732-6.666Zm.318 5.257c-.148.147-.594.2-1.256-.018A7.037 7.037 0 0 1 18.016 6c-1.73-1.728-2.104-3.475-1.73-3.845a.671.671 0 0 1 .465-.129c.27.008.536.057.79.146a7.07 7.07 0 0 1 2.6 1.711c1.73 1.73 2.105 3.472 1.73 3.846Z" />
</svg> </svg>
<span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Job Board</span> <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Job Board</span>
</div> </div>
@@ -345,39 +334,39 @@
</a> </a>
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block"> <div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'"> <ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'">
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/job/job-listing" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Listing</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Listing</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/job/job-post" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Job Post</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Job Post</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/job/company-profile" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Company Profile</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Company Profile</span>
</a> </a>
</li> </li>
</router-link> </router-link>
</ul> </ul>
</div> </div>
</SidebarLinkGroup> </SidebarLinkGroup>
<!-- Tasks --> <!-- Tasks -->
<SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('tasks')"> <SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('tasks')">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :class="currentRoute.fullPath.includes('tasks') && 'hover:text-slate-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true"> <a class="block text-slate-200 truncate transition duration-150" :class="currentRoute.fullPath.includes('tasks') ? 'hover:text-slate-200' : 'hover:text-white'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<path class="fill-current text-slate-600" :class="currentRoute.fullPath.includes('tasks') && 'text-indigo-500'" d="M8 1v2H3v19h18V3h-5V1h7v23H1V1z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('tasks') ? 'text-indigo-500' : 'text-slate-600'" d="M8 1v2H3v19h18V3h-5V1h7v23H1V1z" />
<path class="fill-current text-slate-600" :class="currentRoute.fullPath.includes('tasks') && 'text-indigo-500'" d="M1 1h22v23H1z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('tasks') ? 'text-indigo-500' : 'text-slate-600'" d="M1 1h22v23H1z" />
<path class="fill-current text-slate-400" :class="currentRoute.fullPath.includes('tasks') && 'text-indigo-300'" d="M15 10.586L16.414 12 11 17.414 7.586 14 9 12.586l2 2zM5 0h14v4H5z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('tasks') ? 'text-indigo-300' : 'text-slate-400'" d="M15 10.586L16.414 12 11 17.414 7.586 14 9 12.586l2 2zM5 0h14v4H5z" />
</svg> </svg>
<span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Tasks</span> <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Tasks</span>
</div> </div>
@@ -391,32 +380,32 @@
</a> </a>
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block"> <div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'"> <ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'">
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/tasks/kanban" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Kanban</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Kanban</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/tasks/list" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">List</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">List</span>
</a> </a>
</li> </li>
</router-link> </router-link>
</ul> </ul>
</div> </div>
</SidebarLinkGroup> </SidebarLinkGroup>
<!-- Messages --> <!-- Messages -->
<router-link to="/messages" custom v-slot="{ href, navigate }"> <router-link to="/messages" custom v-slot="{ href, navigate, isExactActive }">
<li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0"> <li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0" :class="isExactActive && 'bg-slate-900'">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :href="href" @click="navigate"> <a class="block text-slate-200 truncate transition duration-150" :class="isExactActive ? 'hover:text-slate-200' : 'hover:text-white'" :href="href" @click="navigate">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="grow flex items-center"> <div class="grow flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<path class="fill-current text-slate-600" d="M14.5 7c4.695 0 8.5 3.184 8.5 7.111 0 1.597-.638 3.067-1.7 4.253V23l-4.108-2.148a10 10 0 01-2.692.37c-4.695 0-8.5-3.184-8.5-7.11C6 10.183 9.805 7 14.5 7z" /> <path class="fill-current" :class="isExactActive ? 'text-indigo-500' : 'text-slate-600'" d="M14.5 7c4.695 0 8.5 3.184 8.5 7.111 0 1.597-.638 3.067-1.7 4.253V23l-4.108-2.148a10 10 0 01-2.692.37c-4.695 0-8.5-3.184-8.5-7.11C6 10.183 9.805 7 14.5 7z" />
<path class="fill-current text-slate-400" d="M11 1C5.477 1 1 4.582 1 9c0 1.797.75 3.45 2 4.785V19l4.833-2.416C8.829 16.85 9.892 17 11 17c5.523 0 10-3.582 10-8s-4.477-8-10-8z" /> <path class="fill-current" :class="isExactActive ? 'text-indigo-300' : 'text-slate-400'" d="M11 1C5.477 1 1 4.582 1 9c0 1.797.75 3.45 2 4.785V19l4.833-2.416C8.829 16.85 9.892 17 11 17c5.523 0 10-3.582 10-8s-4.477-8-10-8z" />
</svg> </svg>
<span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Messages</span> <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Messages</span>
</div> </div>
@@ -429,13 +418,13 @@
</li> </li>
</router-link> </router-link>
<!-- Inbox --> <!-- Inbox -->
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/inbox" custom v-slot="{ href, navigate, isExactActive }">
<li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0"> <li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0" :class="isExactActive && 'bg-slate-900'">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :href="href" @click="navigate"> <a class="block text-slate-200 truncate transition duration-150" :class="isExactActive ? 'hover:text-slate-200' : 'hover:text-white'" :href="href" @click="navigate">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<path class="fill-current text-slate-600" d="M16 13v4H8v-4H0l3-9h18l3 9h-8Z" /> <path class="fill-current" :class="isExactActive ? 'text-indigo-500' : 'text-slate-600'" d="M16 13v4H8v-4H0l3-9h18l3 9h-8Z" />
<path class="fill-current text-slate-400" d="m23.72 12 .229.686A.984.984 0 0 1 24 13v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-8c0-.107.017-.213.051-.314L.28 12H8v4h8v-4H23.72ZM13 0v7h3l-4 5-4-5h3V0h2Z" /> <path class="fill-current" :class="isExactActive ? 'text-indigo-300' : 'text-slate-400'" d="m23.72 12 .229.686A.984.984 0 0 1 24 13v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-8c0-.107.017-.213.051-.314L.28 12H8v4h8v-4H23.72ZM13 0v7h3l-4 5-4-5h3V0h2Z" />
</svg> </svg>
<span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Inbox</span> <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Inbox</span>
</div> </div>
@@ -443,13 +432,13 @@
</li> </li>
</router-link> </router-link>
<!-- Calendar --> <!-- Calendar -->
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/calendar" custom v-slot="{ href, navigate, isExactActive }">
<li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0"> <li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0" :class="isExactActive && 'bg-slate-900'">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :href="href" @click="navigate"> <a class="block text-slate-200 truncate transition duration-150" :class="isExactActive ? 'hover:text-slate-200' : 'hover:text-white'" :href="href" @click="navigate">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<path class="fill-current text-slate-600" d="M1 3h22v20H1z" /> <path class="fill-current" :class="isExactActive ? 'text-indigo-500' : 'text-slate-600'" d="M1 3h22v20H1z" />
<path class="fill-current text-slate-400" d="M21 3h2v4H1V3h2V1h4v2h10V1h4v2Z" /> <path class="fill-current" :class="isExactActive ? 'text-indigo-300' : 'text-slate-400'" d="M21 3h2v4H1V3h2V1h4v2h10V1h4v2Z" />
</svg> </svg>
<span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Calendar</span> <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Calendar</span>
</div> </div>
@@ -457,29 +446,29 @@
</li> </li>
</router-link> </router-link>
<!-- Campaigns --> <!-- Campaigns -->
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/campaigns" custom v-slot="{ href, navigate, isExactActive }">
<li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0"> <li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0" :class="isExactActive && 'bg-slate-900'">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :href="href" @click="navigate"> <a class="block text-slate-200 truncate transition duration-150" :class="isExactActive ? 'hover:text-slate-200' : 'hover:text-white'" :href="href" @click="navigate">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<path class="fill-current text-slate-600" d="M20 7a.75.75 0 01-.75-.75 1.5 1.5 0 00-1.5-1.5.75.75 0 110-1.5 1.5 1.5 0 001.5-1.5.75.75 0 111.5 0 1.5 1.5 0 001.5 1.5.75.75 0 110 1.5 1.5 1.5 0 00-1.5 1.5A.75.75 0 0120 7zM4 23a.75.75 0 01-.75-.75 1.5 1.5 0 00-1.5-1.5.75.75 0 110-1.5 1.5 1.5 0 001.5-1.5.75.75 0 111.5 0 1.5 1.5 0 001.5 1.5.75.75 0 110 1.5 1.5 1.5 0 00-1.5 1.5A.75.75 0 014 23z" /> <path class="fill-current" :class="isExactActive ? 'text-indigo-500' : 'text-slate-600'" d="M20 7a.75.75 0 01-.75-.75 1.5 1.5 0 00-1.5-1.5.75.75 0 110-1.5 1.5 1.5 0 001.5-1.5.75.75 0 111.5 0 1.5 1.5 0 001.5 1.5.75.75 0 110 1.5 1.5 1.5 0 00-1.5 1.5A.75.75 0 0120 7zM4 23a.75.75 0 01-.75-.75 1.5 1.5 0 00-1.5-1.5.75.75 0 110-1.5 1.5 1.5 0 001.5-1.5.75.75 0 111.5 0 1.5 1.5 0 001.5 1.5.75.75 0 110 1.5 1.5 1.5 0 00-1.5 1.5A.75.75 0 014 23z" />
<path class="fill-current text-slate-400" d="M17 23a1 1 0 01-1-1 4 4 0 00-4-4 1 1 0 010-2 4 4 0 004-4 1 1 0 012 0 4 4 0 004 4 1 1 0 010 2 4 4 0 00-4 4 1 1 0 01-1 1zM7 13a1 1 0 01-1-1 4 4 0 00-4-4 1 1 0 110-2 4 4 0 004-4 1 1 0 112 0 4 4 0 004 4 1 1 0 010 2 4 4 0 00-4 4 1 1 0 01-1 1z" /> <path class="fill-current" :class="isExactActive ? 'text-indigo-300' : 'text-slate-400'" d="M17 23a1 1 0 01-1-1 4 4 0 00-4-4 1 1 0 010-2 4 4 0 004-4 1 1 0 012 0 4 4 0 004 4 1 1 0 010 2 4 4 0 00-4 4 1 1 0 01-1 1zM7 13a1 1 0 01-1-1 4 4 0 00-4-4 1 1 0 110-2 4 4 0 004-4 1 1 0 112 0 4 4 0 004 4 1 1 0 010 2 4 4 0 00-4 4 1 1 0 01-1 1z" />
</svg> </svg>
<span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Campaigns</span> <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Campaigns</span>
</div> </div>
</a> </a>
</li> </li>
</router-link> </router-link>
<!-- Settings --> <!-- Settings -->
<SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('settings')"> <SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('settings')">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :class="currentRoute.fullPath.includes('settings') && 'hover:text-slate-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true"> <a class="block text-slate-200 truncate transition duration-150" :class="currentRoute.fullPath.includes('settings') ? 'hover:text-slate-200' : 'hover:text-white'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<path class="fill-current text-slate-600" :class="currentRoute.fullPath.includes('settings') && 'text-indigo-500'" d="M19.714 14.7l-7.007 7.007-1.414-1.414 7.007-7.007c-.195-.4-.298-.84-.3-1.286a3 3 0 113 3 2.969 2.969 0 01-1.286-.3z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('settings') ? 'text-indigo-500' : 'text-slate-600'" d="M19.714 14.7l-7.007 7.007-1.414-1.414 7.007-7.007c-.195-.4-.298-.84-.3-1.286a3 3 0 113 3 2.969 2.969 0 01-1.286-.3z" />
<path class="fill-current text-slate-400" :class="currentRoute.fullPath.includes('settings') && 'text-indigo-300'" d="M10.714 18.3c.4-.195.84-.298 1.286-.3a3 3 0 11-3 3c.002-.446.105-.885.3-1.286l-6.007-6.007 1.414-1.414 6.007 6.007z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('settings') ? 'text-indigo-300' : 'text-slate-400'" d="M10.714 18.3c.4-.195.84-.298 1.286-.3a3 3 0 11-3 3c.002-.446.105-.885.3-1.286l-6.007-6.007 1.414-1.414 6.007 6.007z" />
<path class="fill-current text-slate-600" :class="currentRoute.fullPath.includes('settings') && 'text-indigo-500'" d="M5.7 10.714c.195.4.298.84.3 1.286a3 3 0 11-3-3c.446.002.885.105 1.286.3l7.007-7.007 1.414 1.414L5.7 10.714z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('settings') ? 'text-indigo-500' : 'text-slate-600'" d="M5.7 10.714c.195.4.298.84.3 1.286a3 3 0 11-3-3c.446.002.885.105 1.286.3l7.007-7.007 1.414 1.414L5.7 10.714z" />
<path class="fill-current text-slate-400" :class="currentRoute.fullPath.includes('settings') && 'text-indigo-300'" d="M19.707 9.292a3.012 3.012 0 00-1.415 1.415L13.286 5.7c-.4.195-.84.298-1.286.3a3 3 0 113-3 2.969 2.969 0 01-.3 1.286l5.007 5.006z" /> <path class="fill-current" :class="currentRoute.fullPath.includes('settings') ? 'text-indigo-300' : 'text-slate-400'" d="M19.707 9.292a3.012 3.012 0 00-1.415 1.415L13.286 5.7c-.4.195-.84.298-1.286.3a3 3 0 113-3 2.969 2.969 0 01-.3 1.286l5.007 5.006z" />
</svg> </svg>
<span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Settings</span> <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Settings</span>
</div> </div>
@@ -493,61 +482,61 @@
</a> </a>
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block"> <div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'"> <ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'">
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/settings/account" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">My Account</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">My Account</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/settings/notifications" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">My Notifications</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">My Notifications</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/settings/apps" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Connected Apps</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Connected Apps</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/settings/plans" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Plans</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Plans</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/settings/billing" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Billing & Invoices</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Billing & Invoices</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/settings/feedback" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Give Feedback</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Give Feedback</span>
</a> </a>
</li> </li>
</router-link> </router-link>
</ul> </ul>
</div> </div>
</SidebarLinkGroup> </SidebarLinkGroup>
<!-- Utility --> <!-- Utility -->
<SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('utility')"> <SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('utility')">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :class="currentRoute.fullPath.includes('utility') && 'hover:text-slate-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true"> <a class="block text-slate-200 truncate transition duration-150" :class="currentRoute.fullPath.includes('utility') ? 'hover:text-slate-200' : 'hover:text-white'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<circle class="fill-current text-slate-400" :class="currentRoute.fullPath.includes('utility') && 'text-indigo-300'" cx="18.5" cy="5.5" r="4.5" /> <circle class="fill-current" :class="currentRoute.fullPath.includes('utility') ? 'text-indigo-300' : 'text-slate-400'" cx="18.5" cy="5.5" r="4.5" />
<circle class="fill-current text-slate-600" :class="currentRoute.fullPath.includes('utility') && 'text-indigo-500'" cx="5.5" cy="5.5" r="4.5" /> <circle class="fill-current" :class="currentRoute.fullPath.includes('utility') ? 'text-indigo-500' : 'text-slate-600'" cx="5.5" cy="5.5" r="4.5" />
<circle class="fill-current text-slate-600" :class="currentRoute.fullPath.includes('utility') && 'text-indigo-500'" cx="18.5" cy="18.5" r="4.5" /> <circle class="fill-current" :class="currentRoute.fullPath.includes('utility') ? 'text-indigo-500' : 'text-slate-600'" cx="18.5" cy="18.5" r="4.5" />
<circle class="fill-current text-slate-400" :class="currentRoute.fullPath.includes('utility') && 'text-indigo-300'" cx="5.5" cy="18.5" r="4.5" /> <circle class="fill-current" :class="currentRoute.fullPath.includes('utility') ? 'text-indigo-300' : 'text-slate-400'" cx="5.5" cy="18.5" r="4.5" />
</svg> </svg>
<span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Utility</span> <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Utility</span>
</div> </div>
@@ -561,51 +550,51 @@
</a> </a>
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block"> <div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'"> <ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'">
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/utility/changelog" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Changelog</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Changelog</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/utility/roadmap" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Roadmap</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Roadmap</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/utility/faqs" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">FAQs</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">FAQs</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/utility/empty-state" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Empty State</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Empty State</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/utility/404" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">404</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">404</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/utility/knowledge-base" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Knowledge Base</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Knowledge Base</span>
</a> </a>
</li> </li>
</router-link> </router-link>
</ul> </ul>
</div> </div>
</SidebarLinkGroup> </SidebarLinkGroup>
</ul> </ul>
</div> </div>
<!-- More group --> <!-- More group -->
@@ -617,7 +606,7 @@
<ul class="mt-3"> <ul class="mt-3">
<!-- Authentication --> <!-- Authentication -->
<SidebarLinkGroup v-slot="parentLink"> <SidebarLinkGroup v-slot="parentLink">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :class="parentLink.expanded && 'hover:text-slate-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true"> <a class="block text-slate-200 truncate transition duration-150" :class="parentLink.expanded ? 'hover:text-slate-200' : 'hover:text-white'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
@@ -636,33 +625,33 @@
</a> </a>
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block"> <div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'"> <ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'">
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/signin" custom v-slot="{ href, navigate }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Sign in</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Sign in</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/signup" custom v-slot="{ href, navigate }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Sign up</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Sign up</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/reset-password" custom v-slot="{ href, navigate }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Reset Password</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Reset Password</span>
</a> </a>
</li> </li>
</router-link> </router-link>
</ul> </ul>
</div> </div>
</SidebarLinkGroup> </SidebarLinkGroup>
<!-- Onboarding --> <!-- Onboarding -->
<SidebarLinkGroup v-slot="parentLink"> <SidebarLinkGroup v-slot="parentLink">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :class="parentLink.expanded && 'hover:text-slate-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true"> <a class="block text-slate-200 truncate transition duration-150" :class="parentLink.expanded ? 'hover:text-slate-200' : 'hover:text-white'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
@@ -681,45 +670,45 @@
</a> </a>
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block"> <div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'"> <ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'">
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/onboarding-01" custom v-slot="{ href, navigate }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Step 1</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Step 1</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/onboarding-02" custom v-slot="{ href, navigate }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Step 2</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Step 2</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/onboarding-03" custom v-slot="{ href, navigate }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Step 3</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Step 3</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/onboarding-04" custom v-slot="{ href, navigate }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Step 4</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Step 4</span>
</a> </a>
</li> </li>
</router-link> </router-link>
</ul> </ul>
</div> </div>
</SidebarLinkGroup> </SidebarLinkGroup>
<!-- Components --> <!-- Components -->
<SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('component')"> <SidebarLinkGroup v-slot="parentLink" :activeCondition="currentRoute.fullPath.includes('component')">
<a class="block text-slate-200 hover:text-white truncate transition duration-150" :class="currentRoute.fullPath.includes('component') && 'hover:text-slate-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true"> <a class="block text-slate-200 truncate transition duration-150" :class="currentRoute.fullPath.includes('component') ? 'hover:text-slate-200' : 'hover:text-white'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24"> <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
<circle class="fill-current text-slate-600" :class="currentRoute.fullPath.includes('component') && 'text-indigo-500'" cx="16" cy="8" r="8" /> <circle class="fill-current" :class="currentRoute.fullPath.includes('component') ? 'text-indigo-500' : 'text-slate-600'" cx="16" cy="8" r="8" />
<circle class="fill-current text-slate-400" :class="currentRoute.fullPath.includes('component') && 'text-indigo-300'" cx="8" cy="16" r="8" /> <circle class="fill-current" :class="currentRoute.fullPath.includes('component') ? 'text-indigo-300' : 'text-slate-400'" cx="8" cy="16" r="8" />
</svg> </svg>
<span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Components </span> <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Components </span>
</div> </div>
@@ -733,100 +722,100 @@
</a> </a>
<div class="lg:hidden lg:sidebar-expanded:block 2xl:block"> <div class="lg:hidden lg:sidebar-expanded:block 2xl:block">
<ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'"> <ul class="pl-9 mt-1" :class="!parentLink.expanded && 'hidden'">
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/component/button" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Button</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Button</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/component/form" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Input Form</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Input Form</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/component/dropdown" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Dropdown</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Dropdown</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/component/alert" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Alert & Banner</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Alert & Banner</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/component/modal" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Modal</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Modal</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/component/pagination" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Pagination</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Pagination</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/component/tabs" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Tabs</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Tabs</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/component/breadcrumb" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Breadcrumb</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Breadcrumb</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/component/badge" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Badge</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Badge</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/component/avatar" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Avatar</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Avatar</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/component/tooltip" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Tooltip</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Tooltip</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/component/accordion" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Accordion</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Accordion</span>
</a> </a>
</li> </li>
</router-link> </router-link>
<router-link to="/" custom v-slot="{ href, navigate }"> <router-link to="/component/icons" custom v-slot="{ href, navigate, isExactActive }">
<li class="mb-1 last:mb-0"> <li class="mb-1 last:mb-0">
<a class="block text-slate-400 hover:text-slate-200 transition duration-150 truncate" :href="href" @click="navigate"> <a class="block transition duration-150 truncate" :class="isExactActive ? 'text-indigo-500' : 'text-slate-400 hover:text-slate-200'" :href="href" @click="navigate">
<span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Icons</span> <span class="text-sm font-medium lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Icons</span>
</a> </a>
</li> </li>
</router-link> </router-link>
</ul> </ul>
</div> </div>
</SidebarLinkGroup> </SidebarLinkGroup>
</ul> </ul>
</div> </div>
</div> </div>
@@ -859,7 +848,7 @@ export default {
props: ['sidebarOpen'], props: ['sidebarOpen'],
components: { components: {
SidebarLinkGroup, SidebarLinkGroup,
}, },
setup(props, { emit }) { setup(props, { emit }) {
const trigger = ref(null) const trigger = ref(null)
@@ -885,7 +874,7 @@ export default {
const keyHandler = ({ keyCode }) => { const keyHandler = ({ keyCode }) => {
if (!props.sidebarOpen || keyCode !== 27) return if (!props.sidebarOpen || keyCode !== 27) return
emit('close-sidebar') emit('close-sidebar')
} }
onMounted(() => { onMounted(() => {
document.addEventListener('click', clickHandler) document.addEventListener('click', clickHandler)