thepaperpilot/gardening-app
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Fix navbar links not rendering active when thread is open

Browse source
This commit is contained in:
thepaperpilot 2024-05-27 22:45:05 -05:00
parent cf3fb3e6ef
commit a3494184c8
3 changed files with 61 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/Item.vue
View file

@ -239,9 +239,11 @@ function deleteItem() {
function openThread(e: MouseEvent | TouchEvent, index: number) { function openThread(e: MouseEvent | TouchEvent, index: number) {
e.preventDefault(); e.preventDefault();
if (!dragged.value) { if (!dragged.value) {
router.push( if (isSelected(index)) {
isSelected(index) ? props.baseUrl : emits("deselect");
`${props.baseUrl}/${props.item.source}/${props.item.sourceItem}/${index}`); } else {
router.push(`${props.baseUrl}/${props.item.source}/${props.item.sourceItem}/${index}`);
}
} }
} }

2
src/components/Nav.vue
View file

@ -17,7 +17,7 @@
<RouterLink :to="`source/${contact.source}/${contact.id}/${contact.thread}`" class="flex items-center text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group relative" active-class="bg-gray-100 dark:bg-gray-700"> <RouterLink :to="`source/${contact.source}/${contact.id}/${contact.thread}`" class="flex items-center text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group relative" active-class="bg-gray-100 dark:bg-gray-700">
<Avatar :image="contact.image" :name="contact.name" :status="contact.status ?? 'unknown'" /> <Avatar :image="contact.image" :name="contact.name" :status="contact.status ?? 'unknown'" />
<span v-if="contact.count > 0" class="absolute bg-gray-800 bottom-0 right-0 h-4 w-4 text-center rounded-full">{{ Math.min(contact.count, 9) }}</span> <span v-if="contact.count > 0" class="absolute bg-gray-800 bottom-0 right-0 h-4 w-4 text-center rounded-full">{{ Math.min(contact.count, 9) }}</span>
<FontAwesomeIcon v-else :icon="faThumbTack" class="star absolute drop-shadow-2xl bottom-0 right-0 h-4 w-4 text-center rounded-full" /> <FontAwesomeIcon v-else :icon="faThumbTack" class="star absolute drop-shadow-2xl bottom-0 right-0 h-4 w-4 text-center rounded-full" />
</RouterLink> </RouterLink>
</li> </li>
</ul> </ul>

60
src/main.ts
View file

@ -11,11 +11,61 @@ import Unsorted from "./components/pages/Unsorted.vue";
const routes: RouteRecordRaw[] = [ const routes: RouteRecordRaw[] = [
{ path: '/', component: Todo, name: 'home' }, { path: '/', component: Todo, name: 'home' },
{ path: '/todo/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Todo, name: 'todo' }, {
{ path: '/snoozed/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Snoozed, name: 'snoozed' }, path: '/todo',
{ path: '/low/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: LowPriority, name: 'low' }, component: Todo,
{ path: '/source/:source(\\d+)/:sourceItem(\\d+)?/:thread(\\d+)?/:event(\\d+)?', component: Source, name: 'source' }, name: 'todo',
{ path: '/unsorted/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Unsorted, name: 'unsorted' }, children: [
{
path: ':source(\\d+)/:sourceItem(\\d+)/:thread(\\d+)',
component: Todo
}
]
},
{
path: '/snoozed',
component: Snoozed,
name: 'snoozed',
children: [
{
path: ':source(\\d+)/:sourceItem(\\d+)/:thread(\\d+)',
component: Snoozed
}
]
},
{
path: '/low',
component: LowPriority,
name: 'low',
children: [
{
path: ':source(\\d+)/:sourceItem(\\d+)/:thread(\\d+)',
component: LowPriority
}
]
},
{
path: '/source/:source(\\d+)',
component: Source,
name: 'source',
children: [
{
path: ':sourceItem(\\d+)/:thread(\\d+)/:event(\\d+)?',
component: Source
}
]
},
{
path: '/unsorted',
component: Unsorted,
name: 'unsorted',
children: [
{
path: ':source(\\d+)/:sourceItem(\\d+)/:thread(\\d+)',
component: Unsorted
}
]
}
]; ];
const router = createRouter({ const router = createRouter({