Polarcraft/web/components/layout/Sidebar.vue

<template>
  <div class="flex flex-col bg-neutral-800 px-2 pb-14 pt-5 text-gray-300">
    <NuxtLink to="/" class="sidebar-item">
      <Icon size="1.5em" name="ph:house" class="mr-3" />
      Home
    </NuxtLink>
    <NuxtLink to="/team" class="sidebar-item">
      <Icon size="1.5em" name="ph:users-three" class="mr-3" />
      Team
    </NuxtLink>
    <NuxtLink to="/" class="sidebar-item">
      <Icon size="1.5em" name="ph:storefront" class="mr-3" />
      Player stores
    </NuxtLink>
    <NuxtLink to="/" class="sidebar-item">
      <Icon size="1.5em" name="ph:storefront" class="mr-3" />
      Donation store
    </NuxtLink>
    <div v-if="user && user.admin" class="mt-auto">
      <h2 class="ml-2 text-gray-400">Adminstration</h2>
      <NuxtLink to="/admin/users" class="sidebar-item">
        <Icon size="1.5em" name="ph:users-three" class="mr-3" />
        Users
      </NuxtLink>
    </div>
  </div>
</template>

<script setup>
const user = useState('user')
</script>