diff --git a/inertia/components/dashboard/link/link.module.css b/inertia/components/dashboard/link/link.module.css index 00382c4..80b0ab3 100644 --- a/inertia/components/dashboard/link/link.module.css +++ b/inertia/components/dashboard/link/link.module.css @@ -37,8 +37,14 @@ white-space: nowrap; overflow: hidden; font-size: 0.8em; + transition: opacity 0.3s; +} + +.linkWrapper:hover .linkUrlPathname { + opacity: 1; } .linkUrlPathname { opacity: 0; + transition: opacity 0.3s; } diff --git a/inertia/components/dashboard/link/link_item.tsx b/inertia/components/dashboard/link/link_item.tsx index c873c79..4cca453 100644 --- a/inertia/components/dashboard/link/link_item.tsx +++ b/inertia/components/dashboard/link/link_item.tsx @@ -1,4 +1,4 @@ -import { Card, Group, Text } from '@mantine/core'; // Import de Mantine +import { Card, Group, Text } from '@mantine/core'; import { AiFillStar } from 'react-icons/ai'; import { ExternalLinkStyled } from '~/components/common/external_link_styled'; import LinkFavicon from '~/components/dashboard/link/link_favicon'; @@ -14,18 +14,12 @@ export default function LinkItem({ }) { const { name, url, description, favorite } = link; return ( - - + +
- + {name}{' '} {showUserControls && favorite && } @@ -35,7 +29,7 @@ export default function LinkItem({ {/* {showUserControls && } */} {description && ( - + {description} )} @@ -60,7 +54,7 @@ function LinkItemURL({ url }: { url: Link['url'] }) { } return ( - + {origin} {text} @@ -68,7 +62,7 @@ function LinkItemURL({ url }: { url: Link['url'] }) { } catch (error) { console.error('error', error); return ( - + {url} ); diff --git a/inertia/mantine/components/dashboard/dashboard_navbar.tsx b/inertia/mantine/components/dashboard/dashboard_navbar.tsx index bc0c111..ec36077 100644 --- a/inertia/mantine/components/dashboard/dashboard_navbar.tsx +++ b/inertia/mantine/components/dashboard/dashboard_navbar.tsx @@ -16,6 +16,7 @@ import { IoIosSearch } from 'react-icons/io'; import { IoAdd, IoShieldHalfSharp } from 'react-icons/io5'; import { PiGearLight } from 'react-icons/pi'; import { MantineUserCard } from '~/components/common/mantine_user_card'; +import useUser from '~/hooks/use_user'; interface DashboardNavbarProps { isOpen: boolean; @@ -23,6 +24,7 @@ interface DashboardNavbarProps { } export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) { const { t } = useTranslation('common'); + const { isAuthenticated, user } = useUser(); const common = { variant: 'subtle', color: 'blue', @@ -36,14 +38,16 @@ export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) { - } - color="var(--mantine-color-red-5)" - /> + {isAuthenticated && user.isAdmin && ( + } + color="var(--mantine-color-red-5)" + /> + )} } @@ -71,13 +75,13 @@ export function DashboardNavbar({ isOpen, toggle }: DashboardNavbarProps) { {t('favorite')} • {0} - + {Array(15) .fill(0) .map((_, index) => ( ))} - + ); }