fix #5 - Menu : dynamize inspirations 'Nouveautés' label

This commit is contained in:
isUnknown 2024-11-22 17:16:58 +01:00
parent b14f33e3fa
commit 955b8531a1
3 changed files with 15 additions and 23 deletions

View file

@ -1,21 +1,8 @@
type: pages type: pages
headline: Inspirations headline: Inspirations
template: inspiration template: inspiration
layout: table
columns:
title:
label: Titre
width: 3/12
date:
label: Date
value: "{{ page.date.toDate('YY/MM') }}"
width: 1/12
new:
label: Nouveauté
width: 1/12
description:
width: 7/12
empty: Pas encore dinspiration empty: Pas encore dinspiration
layout: cards
image: image:
query: page.cover.toFile query: page.cover.toFile
cover: true cover: true

View file

@ -6,6 +6,7 @@ return function ($page, $kirby, $site) {
} }
$data = $page->toArray(); $data = $page->toArray();
$data['template'] = (string) $page->template(); $data['template'] = (string) $page->template();
$data['newInspirations'] = (bool) page('inspirations')->children()->findBy('new', 'true');
$userData = [ $userData = [
"role" => (string) $kirby->user()->role(), "role" => (string) $kirby->user()->role(),

View file

@ -44,9 +44,11 @@
:aria-current="isCurrent(mainItem)" :aria-current="isCurrent(mainItem)"
>{{ mainItem.title }}</router-link >{{ mainItem.title }}</router-link
> >
<span v-if="mainItem.pill" class="pill pill--secondary">{{ <span
mainItem.pill v-if="mainItem.title === 'Notifications' && page?.newInspirations"
}}</span> class="pill pill--secondary"
>{{ "Nouveautés" }}</span
>
</li> </li>
</ul> </ul>
<details v-if="currentProjects.length" open> <details v-if="currentProjects.length" open>
@ -95,11 +97,13 @@ import { ref } from "vue";
import { useProjectsStore } from "../stores/projects"; import { useProjectsStore } from "../stores/projects";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { useUserStore } from "../stores/user"; import { useUserStore } from "../stores/user";
import { usePageStore } from "../stores/page";
const route = useRoute(); const route = useRoute();
const isExpanded = ref(true); const isExpanded = ref(true);
const { user } = storeToRefs(useUserStore()); const { user } = storeToRefs(useUserStore());
const { currentProjects, archivedProjects } = storeToRefs(useProjectsStore()); const { currentProjects, archivedProjects } = storeToRefs(useProjectsStore());
const { page } = storeToRefs(usePageStore());
const mainItems = [ const mainItems = [
{ {
@ -116,14 +120,12 @@ const mainItems = [
title: "Réunions", title: "Réunions",
path: "/reunions", path: "/reunions",
icon: "calendar", icon: "calendar",
pill: false,
disabled: true, disabled: true,
}, },
{ {
title: "Inspirations", title: "Inspirations",
path: "/inspirations", path: "/inspirations",
icon: "inspiration", icon: "inspiration",
pill: "Nouveauté",
}, },
]; ];
@ -164,7 +166,9 @@ button[aria-controls="menu"][aria-expanded="false"] {
padding: 1.125rem; padding: 1.125rem;
transform: rotate(180deg); transform: rotate(180deg);
} }
button[aria-controls="menu"][aria-expanded="false"] + main > header:not([role="tablist"]) { button[aria-controls="menu"][aria-expanded="false"]
+ main
> header:not([role="tablist"]) {
margin-left: 4rem; margin-left: 4rem;
} }
@ -190,7 +194,7 @@ button[aria-controls="menu"][aria-expanded="false"] + main > header:not([role="t
@media (max-width: 1023px) { @media (max-width: 1023px) {
button[aria-controls="menu"][aria-expanded="true"] { button[aria-controls="menu"][aria-expanded="true"] {
left: 0; left: 0;
margin-top: .4rem; margin-top: 0.4rem;
} }
#menu { #menu {
position: fixed; position: fixed;