<script setup lang="ts">
import Navigation from "@/components/Navigation.vue";
</script>

<template>
  <aside id="app-sidebar-5" class="bg-surface-900 h-screen hidden lg:block flex-shrink-0 absolute lg:static left-0 top-0 z-10 border-surface-800 w-36 lg:w-28 select-none">
    <div class="flex flex-col h-full">
      <div class="flex items-center justify-center flex-shrink-0 bg-primary h-[60px]">
        Designer
      </div>
      <Navigation></Navigation>
      <div class="mt-auto">
        <hr class="mb-4 mx-4 border-t border-0 border-surface-800" />
        <a class="m-4 nav-item">
          <img
            alt="user avatar"
            src="https://fqjltiegiezfetthbags.supabase.co/storage/v1/render/image/public/block.images/blocks/avatars/circle/avatar-f-1.png" class="mr-2 lg:mr-0 w-8 h-8" />
          <span class="font-medium inline lg:hidden">Amy Elsner</span>
        </a>
      </div>
    </div>
  </aside>
</template>
<style scoped>
@import "@/assets/nav-items.css";
</style>
