Polarcraft/webv2/components/body/Sidebar.vue

<template>
  <div class="fixed left-0 top-0 z-50 flex h-screen w-56 flex-col gap-y-1 border-r border-gray-700 bg-gray-800 px-2">
    <h1 class="text-primary-500 my-5 text-center text-2xl font-bold">
      Polarcraft S5
    </h1>
    <NuxtLink to="/" class="flex w-full items-center rounded bg-black/0  p-2 text-lg hover:cursor-pointer hover:bg-black/20">
      <Icon size="1.5em" name="heroicons:chart-pie" class="mr-2" />
      Dashboard
    </NuxtLink>
    <NuxtLink to="/team" class="flex w-full items-center rounded bg-black/0 p-2 text-lg hover:cursor-pointer hover:bg-black/20">
      <Icon size="1.5em" name="heroicons:users" class="mr-2" />
      Team
    </NuxtLink>
    <NuxtLink to="/map" class="flex w-full items-center rounded bg-black/0 p-2 text-lg hover:cursor-pointer hover:bg-black/20">
      <Icon size="1.5em" name="heroicons:map" class="mr-2" />
      Map
    </NuxtLink>
  </div>
</template>