94 lines
3.2 KiB
Vue
94 lines
3.2 KiB
Vue
<template>
|
|
<aside
|
|
id="sidenav-main"
|
|
:class="[
|
|
'max-w-62.5 ease-nav-brand z-990 fixed inset-y-0 my-4 ml-4 block w-full flex-wrap items-center justify-between overflow-y-auto rounded-2xl border-0 bg-white p-0 antialiased shadow-none transition-transform duration-200 xl:left-0 xl:translate-x-0 xl:bg-transparent',
|
|
open ? 'translate-x-0' : '-translate-x-full',
|
|
]"
|
|
>
|
|
<div class="h-19.5">
|
|
<RouterLink
|
|
to="/dashboard"
|
|
class="block px-8 py-6 m-0 text-sm whitespace-nowrap text-slate-700"
|
|
>
|
|
<span class="ml-1 font-semibold transition-all duration-200 ease-nav-brand">
|
|
SoloPM
|
|
</span>
|
|
</RouterLink>
|
|
</div>
|
|
|
|
<hr class="h-px mt-0 bg-transparent bg-gradient-horizontal-dark" />
|
|
|
|
<div class="items-center block w-auto max-h-screen overflow-auto h-sidenav">
|
|
<ul class="flex flex-col pl-0 mb-0 list-none">
|
|
|
|
<li class="mt-0.5 w-full">
|
|
<RouterLink
|
|
to="/dashboard"
|
|
custom
|
|
v-slot="{ isActive, href, navigate }"
|
|
>
|
|
<a
|
|
:href="href"
|
|
@click="navigate"
|
|
:class="[
|
|
'py-2.7 text-sm ease-nav-brand my-0 mx-4 flex items-center whitespace-nowrap rounded-lg px-4 font-semibold transition-colors',
|
|
isActive
|
|
? 'shadow-soft-xl bg-white text-slate-700'
|
|
: 'text-slate-500 hover:text-slate-700',
|
|
]"
|
|
>
|
|
<div
|
|
:class="[
|
|
'mr-2 flex h-8 w-8 items-center justify-center rounded-lg bg-center stroke-0 text-center xl:p-2.5',
|
|
isActive
|
|
? 'bg-gradient-to-tl from-purple-700 to-pink-500 shadow-soft-2xl'
|
|
: 'bg-white shadow-soft-sm',
|
|
]"
|
|
>
|
|
<i
|
|
:class="[
|
|
'fas fa-tachometer-alt text-sm',
|
|
isActive ? 'text-white' : 'text-slate-700',
|
|
]"
|
|
></i>
|
|
</div>
|
|
Dashboard
|
|
</a>
|
|
</RouterLink>
|
|
</li>
|
|
|
|
<li class="pt-4 ml-2 pl-6 mt-4">
|
|
<h6 class="pl-6 ml-2 font-bold leading-tight uppercase text-xs opacity-60">
|
|
Projects
|
|
</h6>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mx-4 mt-4">
|
|
<div class="relative flex min-w-0 flex-col items-center break-words rounded-2xl border-0 bg-white bg-clip-border shadow-none">
|
|
<div class="mb-7.5 h-28 w-full overflow-hidden rounded-xl">
|
|
<div class="bg-gradient-to-tl from-slate-600 to-slate-300 h-full w-full"></div>
|
|
</div>
|
|
<div class="-mt-14 w-3/4 text-center">
|
|
<p class="mt-0 mb-4 font-semibold leading-tight text-xs">Need help?</p>
|
|
<a
|
|
href="#"
|
|
class="inline-block w-full px-8 py-2 mb-4 font-bold text-center text-black uppercase transition-all ease-in bg-white border-0 rounded-lg shadow-soft-md bg-150 leading-pro text-xs hover:shadow-soft-2xl hover:scale-102"
|
|
>
|
|
Documentation
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { RouterLink } from 'vue-router'
|
|
|
|
defineProps<{ open: boolean }>()
|
|
</script>
|