diff --git a/inertia/mantine/components/dashboard/dashboard_header.tsx b/inertia/mantine/components/dashboard/dashboard_header.tsx new file mode 100644 index 0000000..26d9132 --- /dev/null +++ b/inertia/mantine/components/dashboard/dashboard_header.tsx @@ -0,0 +1,90 @@ +import { Link } from '@inertiajs/react'; +import { route } from '@izzyjs/route/client'; +import { ActionIcon, AppShell, Burger, Group, Menu, Text } from '@mantine/core'; +import { useTranslation } from 'react-i18next'; +import { BsThreeDotsVertical } from 'react-icons/bs'; +import { GoPencil } from 'react-icons/go'; +import { IoIosAddCircleOutline } from 'react-icons/io'; +import { IoTrashOutline } from 'react-icons/io5'; +import useActiveCollection from '~/hooks/use_active_collection'; +import { appendCollectionId } from '~/lib/navigation'; + +interface DashboardHeaderProps { + navbar: { + opened: boolean; + toggle: () => void; + }; + aside: { + opened: boolean; + toggle: () => void; + }; +} +export function DashboardHeader({ navbar, aside }: DashboardHeaderProps) { + const { t } = useTranslation('common'); + const { activeCollection } = useActiveCollection(); + return ( + + + + + {activeCollection?.name} + + + + + + + + + + } + color="var(--mantine-color-blue-4)" + > + {t('link.create')} + + } + color="var(--mantine-color-blue-4)" + > + {t('collection.edit')} + + } + color="red" + > + {t('collection.delete')} + + + + + + + + ); +} diff --git a/inertia/pages/mantine_dashboard.tsx b/inertia/pages/mantine_dashboard.tsx index e5b4dd3..9a0ffc7 100644 --- a/inertia/pages/mantine_dashboard.tsx +++ b/inertia/pages/mantine_dashboard.tsx @@ -1,11 +1,4 @@ -import { - AppShell, - Burger, - Group, - ScrollArea, - Stack, - Text, -} from '@mantine/core'; +import { AppShell, ScrollArea, Stack } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; import { useEffect } from 'react'; import DashboardProviders from '~/components/dashboard/dashboard_provider'; @@ -13,6 +6,7 @@ import LinkItem from '~/components/dashboard/link/link_item'; import { MantineFooter } from '~/components/footer/mantine_footer'; import useShortcut from '~/hooks/use_shortcut'; import { DashboardAside } from '~/mantine/components/dashboard/dashboard_aside'; +import { DashboardHeader } from '~/mantine/components/dashboard/dashboard_header'; import { DashboardNavbar } from '~/mantine/components/dashboard/dashboard_navbar'; import { NoLink } from '~/mantine/components/dashboard/link/no_link'; import { MantineDashboardLayout } from '~/mantine/layouts/mantine_dashboard_layout'; @@ -65,25 +59,10 @@ export default function MantineDashboard(props: Readonly) { header: classes.ml_bg_color, }} > - - - - - {props.activeCollection.name} - - - - + {props.activeCollection.links.length > 0 ? (