feat: add collection description and visibility in dashboard header

This commit is contained in:
Sonny
2024-11-08 18:20:15 +01:00
committed by Sonny
parent 9781363282
commit d3de34bd41
2 changed files with 32 additions and 3 deletions

View File

@@ -1,6 +1,16 @@
import { Visibility } from '#enums/visibility';
import { Link } from '@inertiajs/react';
import { route } from '@izzyjs/route/client';
import { ActionIcon, AppShell, Burger, Group, Menu, Text } from '@mantine/core';
import {
ActionIcon,
AppShell,
Badge,
Burger,
Flex,
Group,
Menu,
Text,
} from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { BsThreeDotsVertical } from 'react-icons/bs';
import { GoPencil } from 'react-icons/go';
@@ -32,7 +42,19 @@ export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) {
hiddenFrom="sm"
size="sm"
/>
<Text lineClamp={1}>{activeCollection?.name}</Text>
<Flex direction="column">
<Text lineClamp={1}>
{activeCollection?.name}{' '}
{activeCollection?.visibility === Visibility.PUBLIC && (
<Badge variant="light">{t('visibility.public')}</Badge>
)}
</Text>
{activeCollection?.description && (
<Text c="dimmed" size="sm">
{activeCollection.description}
</Text>
)}
</Flex>
</Group>
<Group>
<Menu withinPortal shadow="md" width={225}>

View File

@@ -26,6 +26,9 @@ interface DashboardPageProps {
activeCollection: CollectionWithLinks;
}
const HEADER_SIZE_WITH_DESCRIPTION = 60;
const HEADER_SIZE_WITHOUT_DESCRIPTION = 50;
export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
const [openedNavbar, { toggle: toggleNavbar, close: closeNavbar }] =
useDisclosure();
@@ -71,7 +74,11 @@ export default function MantineDashboard(props: Readonly<DashboardPageProps>) {
<div className={classes.app_wrapper}>
<AppShell
layout="alt"
header={{ height: 50 }}
header={{
height: !!activeCollection?.description
? HEADER_SIZE_WITH_DESCRIPTION
: HEADER_SIZE_WITHOUT_DESCRIPTION,
}}
navbar={{
width: 300,
breakpoint: 'sm',