refactor: add navigaton panel component

Signed-off-by: Sebastian Krupinski <krupinski01@gmail.com>
This commit is contained in:
2026-07-14 17:18:08 -04:00
parent 01afdf4860
commit a6af22859a
3 changed files with 197 additions and 78 deletions
+13 -5
View File
@@ -67,10 +67,10 @@ const onToggleVisibility = (collection: CollectionObject) => {
<template>
<div class="collection-selector">
<div class="collection-selector-header">
<div class="d-flex align-center justify-space-between mb-3">
<div class="d-flex align-center justify-space-between mb-1">
<div class="d-flex align-center">
<v-icon :icon="displayIcon" size="small" class="mr-2" />
<span class="text-subtitle-2 font-weight-bold">{{ displayTitle }}</span>
<v-icon :icon="displayIcon" size="14" class="mr-2 text-medium-emphasis" />
<span class="sidebar-section-label">{{ displayTitle }}</span>
</div>
<v-btn
icon="mdi-plus"
@@ -82,8 +82,8 @@ const onToggleVisibility = (collection: CollectionObject) => {
/>
</div>
</div>
<v-divider class="my-2" />
<v-divider class="mb-2" />
<div class="collection-selector-content">
<v-list density="compact" nav class="pa-0">
@@ -147,6 +147,14 @@ const onToggleVisibility = (collection: CollectionObject) => {
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;