activist/src/components/Sidebar.vue

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

<template>
  <aside>
    <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>
  </aside>
</template>

<style scoped>
@import "@/assets/nav-items.css";
aside {
  background-color: #333;
  display: flex;
  flex-direction: row;
  height: 100%;
}
@media (screen(sm)) {
  aside {
    flex-direction: column;
  }
}
</style>