<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>
