55 lines
1.0 KiB
Vue
55 lines
1.0 KiB
Vue
<!-- Sidebar.vue -->
|
|
<script setup lang="ts">
|
|
import ProfileSummary from './ProfileSummary.vue';
|
|
import SuggestionRow from './SuggestionRow.vue';
|
|
|
|
const catches = [
|
|
{ id: 1, tag: 'surface' },
|
|
{ id: 2, tag: 'midwater' },
|
|
{ id: 3, tag: 'trench' },
|
|
{ id: 4, tag: 'vent' },
|
|
{ id: 5, tag: 'benthic' },
|
|
];
|
|
|
|
function follow(id: number) {
|
|
console.log('follow', id);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<aside class="sidebar">
|
|
<ProfileSummary handle="generictravelphotos" role="crew member" />
|
|
|
|
|
|
</aside>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.75rem;
|
|
position: sticky;
|
|
top: 5.5rem;
|
|
}
|
|
.sidebar__suggest {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.8rem;
|
|
}
|
|
.sidebar__suggest-title {
|
|
font-size: 0.75rem;
|
|
color: var(--haze);
|
|
text-transform: lowercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.sidebar {
|
|
position: static;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
</style>
|