diff --git a/src/components/CollectionList.vue b/src/components/CollectionList.vue index 46d4ed1..3208123 100644 --- a/src/components/CollectionList.vue +++ b/src/components/CollectionList.vue @@ -10,6 +10,7 @@ const props = defineProps<{ // Emits const emit = defineEmits<{ + 'create': [] 'select': [collection: CollectionObject] 'edit': [collection: CollectionObject] }>() @@ -27,13 +28,23 @@ const onCollectionEdit = (collection: CollectionObject) => { @@ -92,4 +104,28 @@ const onCollectionEdit = (collection: CollectionObject) => { .v-list-item { cursor: pointer; } + +.sidebar-section-label { + font-size: 11px; + font-weight: 600; + letter-spacing: 0.09em; + text-transform: uppercase; + color: rgba(var(--v-theme-on-surface), 0.6); +} + +.collection-edit-btn { + opacity: 0; + transition: opacity 0.15s ease; +} + +.v-list-item:hover .collection-edit-btn, +.v-list-item:focus-within .collection-edit-btn { + opacity: 1; +} + +@media (hover: none) { + .collection-edit-btn { + opacity: 1; + } +} diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue new file mode 100644 index 0000000..2e4629d --- /dev/null +++ b/src/components/Sidebar.vue @@ -0,0 +1,164 @@ + + + + + diff --git a/src/pages/PeoplePage.vue b/src/pages/PeoplePage.vue index 5c13d24..1e09eab 100644 --- a/src/pages/PeoplePage.vue +++ b/src/pages/PeoplePage.vue @@ -1,19 +1,14 @@