mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-14 17:05:40 -04:00
implement nav
This commit is contained in:
@@ -8,18 +8,47 @@
|
|||||||
width="100%"
|
width="100%"
|
||||||
max-width="1200"
|
max-width="1200"
|
||||||
>
|
>
|
||||||
<v-card-title>
|
<div class="d-flex">
|
||||||
<v-chip label large class="me-1">
|
<!-- Nav list -->
|
||||||
<v-icon class="me-1">
|
<v-list
|
||||||
{{ $globals.icons.calendar }}
|
nav
|
||||||
</v-icon>
|
density="compact"
|
||||||
{{ $d(new Date(currentAnnouncement.key.split('_', 1)[0])) }}
|
color="primary"
|
||||||
</v-chip>
|
class="overflow-y-auto border-e flex-shrink-0"
|
||||||
{{ currentAnnouncement.meta?.title }}
|
style="width: 200px; max-height: 60vh"
|
||||||
</v-card-title>
|
>
|
||||||
<v-card-text>
|
<v-list-item
|
||||||
<component :is="currentAnnouncement.component" />
|
v-for="announcement in allAnnouncements.toReversed()"
|
||||||
</v-card-text>
|
: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>
|
<template #custom-card-action>
|
||||||
<div v-if="newAnnouncements.length">
|
<div v-if="newAnnouncements.length">
|
||||||
<BaseButton
|
<BaseButton
|
||||||
@@ -43,6 +72,7 @@
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useAnnouncements } from "~/composables/use-announcements";
|
import { useAnnouncements } from "~/composables/use-announcements";
|
||||||
|
import type { Announcement } from "~/composables/use-announcements";
|
||||||
import { useUserApi } from "~/composables/api";
|
import { useUserApi } from "~/composables/api";
|
||||||
|
|
||||||
const dialog = defineModel<boolean>({ default: false });
|
const dialog = defineModel<boolean>({ default: false });
|
||||||
|
|||||||
Reference in New Issue
Block a user