Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2026-04-10 23:15:34 -04:00
Code Issues Packages Projects Releases Wiki Activity

implement nav

Browse Source
This commit is contained in:
Michael Genson
2026-03-28 17:51:21 +00:00
parent c64c62e447
commit c3726b4359
1 changed files with 42 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/components/Domain/Announcement/AnnouncementDialog.vue
View File

@@ -8,18 +8,47 @@
width="100%"
max-width="1200"
>
<v-card-title>
<v-chip label large class="me-1">
<v-icon class="me-1">
{{ $globals.icons.calendar }}
</v-icon>
{{ $d(new Date(currentAnnouncement.key.split('_', 1)[0])) }}
</v-chip>
{{ currentAnnouncement.meta?.title }}
</v-card-title>
<v-card-text>
<component :is="currentAnnouncement.component" />
</v-card-text>
<div class="d-flex">
<!-- Nav list -->
<v-list
nav
density="compact"
color="primary"
class="overflow-y-auto border-e flex-shrink-0"
style="width: 200px; max-height: 60vh"
>
<v-list-item
v-for="announcement in allAnnouncements.toReversed()"
:key="announcement.key"
:active="currentAnnouncement.key === announcement.key"
rounded
@click="currentAnnouncement = announcement"
>
<v-list-item-title class="text-body-2">
{{ announcement.meta?.title }}
</v-list-item-title>
<v-list-item-subtitle v-if="announcement.date">
{{ $d(announcement.date) }}
</v-list-item-subtitle>
</v-list-item>
</v-list>
<!-- Main content -->
<div class="flex-grow-1 overflow-y-auto" style="max-height: 60vh">
<v-card-title>
<v-chip v-if="currentAnnouncement.date" label large class="me-1">
<v-icon class="me-1">
{{ $globals.icons.calendar }}
</v-icon>
{{ $d(currentAnnouncement.date) }}
</v-chip>
{{ currentAnnouncement.meta?.title }}
</v-card-title>
<v-card-text>
<component :is="currentAnnouncement.component" />
</v-card-text>
</div>
</div>
<template #custom-card-action>
<div v-if="newAnnouncements.length">
<BaseButton
@@ -43,6 +72,7 @@
<script setup lang="ts">
import { useAnnouncements } from "~/composables/use-announcements";
import type { Announcement } from "~/composables/use-announcements";
import { useUserApi } from "~/composables/api";
const dialog = defineModel<boolean>({ default: false });