Polarcraft/web/components/layout/Sidebar.vue

<template>
  <div class="flex flex-col gap-1 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="/player-store" class="sidebar-item">
      <Icon size="1.5em" name="ph:storefront" class="mr-3" />
      Player stores
    </NuxtLink>
    <NuxtLink to="/map" class="sidebar-item">
      <Icon size="1.5em" name="ph:map-trifold" class="mr-3" />
      Map
    </NuxtLink>
    <div v-if="user && user.role.admin" class="mt-auto space-y-1">
      <h2 class="ml-2 text-gray-400">Moderation</h2>
      <NuxtLink to="/mod/users" class="sidebar-item">
        <Icon size="1.5em" name="ph:users-three" class="mr-3" />
        Users
      </NuxtLink>
      <NuxtLink to="/mod/server" class="sidebar-item">
        <Icon size="1.5em" name="ph:cpu" class="mr-3" />
        Server Control
      </NuxtLink>
    </div>
  </div>
</template>

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