Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-09 15:05:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update default layout

Browse Source
This commit is contained in:
Sonny
2025-08-06 19:50:53 +02:00
parent d56bd1ef80
commit 97ba56b1e7
36 changed files with 627 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
inertia/components/common/floating_navbar/floating_navbar.module.css Normal file
View File

@@ -0,0 +1,36 @@
.navbarWrapper {
z-index: 9;
}
.navbar {
height: rem(60);
background-color: color-mix(
in srgb,
var(--mantine-color-body) 50%,
transparent
);
padding-inline: var(--mantine-spacing-lg);
transition: transform 400ms ease;
backdrop-filter: blur(16px);
overflow: hidden;
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 9;
}
.navbar__content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 100%;
max-width: 100%;
margin-inline: auto;
}
.navbar__content > div:last-child {
flex: 1;
justify-content: flex-end;
}

108
inertia/components/common/floating_navbar/floating_navbar.tsx Normal file
View File

@@ -0,0 +1,108 @@
import {
PROJECT_EXTENSION_URL,
PROJECT_NAME,
PROJECT_REPO_GITHUB_URL,
} from '#config/project';
import {
Box,
Burger,
Button,
Drawer,
Flex,
Group,
Image,
rem,
useMantineTheme,
} from '@mantine/core';
import { useDisclosure, useMediaQuery } from '@mantine/hooks';
import { useEffect } from 'react';
import { UserDropdown } from '~/components/common/floating_navbar/user_dropdown';
import { ExternalLinkUnstyled } from '~/components/common/links/external_link_unstyled';
import { InternalLink } from '~/components/common/links/internal_link';
import { useAuth } from '~/hooks/use_auth';
import classes from './floating_navbar.module.css';
interface FloatingNavbarProps {
width: string;
}
export function FloatingNavbar({ width }: FloatingNavbarProps) {
const auth = useAuth();
const theme = useMantineTheme();
const [opened, handler] = useDisclosure(false);
const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`, false);
useEffect(() => {
if (opened && !isMobile) {
handler.close();
}
}, [isMobile]);
const links = (
<>
<InternalLink href="/dashboard" style={{ fontSize: rem(16) }}>
Dashboard
</InternalLink>
<ExternalLinkUnstyled
href={PROJECT_REPO_GITHUB_URL}
style={{ fontSize: rem(16) }}
>
Github
</ExternalLinkUnstyled>
<ExternalLinkUnstyled
href={PROJECT_EXTENSION_URL}
style={{ fontSize: rem(16) }}
>
Extension
</ExternalLinkUnstyled>
</>
);
return (
<>
<Box className={classes.navbar}>
<Group className={classes.navbar__content} style={{ width }}>
<Group>
<InternalLink style={{ fontSize: rem(24) }} route="home">
<Image
src="/logo.png"
h={35}
alt="MyLinks's logo"
referrerPolicy="no-referrer"
/>
</InternalLink>
</Group>
<Group>
{!isMobile && <Group>{links}</Group>}
{isMobile && <Burger opened={opened} onClick={handler.toggle} />}
{auth.isAuthenticated && <UserDropdown />}
{!auth.isAuthenticated && (
<Button
variant="default"
component={ExternalLinkUnstyled}
newTab={false}
href="/auth/google"
>
Log in
</Button>
)}
</Group>
</Group>
{/* Mobile drawer */}
<Drawer
opened={opened}
onClose={handler.close}
padding="md"
title={PROJECT_NAME}
zIndex={999999}
onClick={handler.close}
>
<Flex direction="column" gap="md">
{links}
</Flex>
</Drawer>
</Box>
</>
);
}

24
inertia/components/common/floating_navbar/user_dropdown.module.css Normal file
View File

@@ -0,0 +1,24 @@
.user {
color: light-dark(var(--mantine-color-black), var(--mantine-color-dark-0));
padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
border-radius: var(--mantine-radius-sm);
transition: background-color 100ms ease;
&:hover {
background-color: light-dark(
var(--mantine-color-white),
var(--mantine-color-dark-8)
);
}
@media (max-width: 768px) {
display: none;
}
}
.userActive {
background-color: light-dark(
var(--mantine-color-white),
var(--mantine-color-dark-8)
);
}

73
inertia/components/common/floating_navbar/user_dropdown.tsx Normal file
View File

@@ -0,0 +1,73 @@
import { Avatar, Group, Menu, Text, UnstyledButton } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import cx from 'clsx';
import { useTranslation } from 'react-i18next';
import { TbChevronDown, TbLogout, TbUser } from 'react-icons/tb';
import { InternalLink } from '~/components/common/links/internal_link';
import { InternalLinkUnstyled } from '~/components/common/links/internal_link_unstyled';
import { useAuth } from '~/hooks/use_auth';
import classes from './user_dropdown.module.css';
export function UserDropdown() {
const auth = useAuth();
const [userMenuOpened, { open: openUserMenu, close: closeUserMenu }] =
useDisclosure(false);
const { t } = useTranslation();
return (
<Menu
width={260}
position="bottom-end"
transitionProps={{ transition: 'pop-top-right' }}
onClose={closeUserMenu}
onOpen={openUserMenu}
withinPortal
>
<Menu.Target>
<UnstyledButton
className={cx(classes.user, { [classes.userActive]: userMenuOpened })}
>
<Group gap={7}>
<Avatar
src={auth.user?.avatarUrl}
alt={auth.user?.fullname}
radius="xl"
size={20}
/>
<Text fw={500} size="sm" lh={1} mr={3}>
{auth.user?.fullname}
</Text>
<TbChevronDown size={12} />
</Group>
</UnstyledButton>
</Menu.Target>
<Menu.Dropdown>
<Menu.Label>{t('common:user')}</Menu.Label>
<Menu.Item
leftSection={<TbUser size={16} />}
component={InternalLinkUnstyled}
href={`/user/${auth.user?.fullname}`}
color="inherit"
>
{t('common:profile')}
</Menu.Item>
{auth.user?.isAdmin && (
<>
<Menu.Label>{t('common:admin')}</Menu.Label>
<InternalLink href="/admin">{t('common:admin')}</InternalLink>
</>
)}
<Menu.Label>{t('common:settings')}</Menu.Label>
<Menu.Item
leftSection={<TbLogout size={16} />}
component={InternalLinkUnstyled}
href="/auth/logout"
color="inherit"
>
{t('common:logout')}
</Menu.Item>
</Menu.Dropdown>
</Menu>
);
}

23
inertia/components/common/footer/footer.module.css Normal file
View File

@@ -0,0 +1,23 @@
.footer {
background-color: color-mix(
in srgb,
var(--mantine-color-body) 50%,
transparent
);
padding: var(--mantine-spacing-sm) var(--mantine-spacing-lg);
}
.footer__content {
max-width: 100%;
gap: var(--mantine-spacing-xs);
margin-inline: auto;
}
.footer__content p {
font-size: var(--mantine-font-size-sm) !important;
color: var(--mantine-color-dimmed) !important;
}
.footer__content a {
font-size: var(--mantine-font-size-sm) !important;
}

33
inertia/components/common/footer/footer.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { AUTHOR_GITHUB_URL, AUTHOR_NAME } from '#config/project';
import PATHS from '#core/constants/paths';
import { Anchor, Group, Text } from '@mantine/core';
import ExternalLink from '~/components/common/external_link';
import { ExternalLinkStyled } from '~/components/common/links/external_link_styled';
import { LocaleSwitcher } from '~/components/common/locale_switcher';
import { ThemeSwitcher } from '~/components/common/theme_switcher';
import packageJson from '../../../../package.json';
import classes from './footer.module.css';
export const Footer = () => (
<Group className={classes.footer}>
<Group className={classes.footer__content}>
<Text>
Made with ❤️ by{' '}
<ExternalLinkStyled href={AUTHOR_GITHUB_URL}>
{AUTHOR_NAME}
</ExternalLinkStyled>
</Text>
•
<Text>
<Anchor size="sm" component={ExternalLink} href={PATHS.REPO_GITHUB}>
{packageJson.version}
</Anchor>
</Text>
•
<Group gap="sm" mt={4} mb={4}>
<ThemeSwitcher />
<LocaleSwitcher />
</Group>
</Group>
</Group>
);

28
inertia/components/common/links/external_link_styled.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { Anchor } from '@mantine/core';
import { AnchorHTMLAttributes, CSSProperties, ReactNode } from 'react';
interface ExternalLinkStyledProps
extends AnchorHTMLAttributes<HTMLAnchorElement> {
children: ReactNode;
style?: CSSProperties;
title?: string;
className?: string;
}
export const ExternalLinkStyled = ({
children,
title,
href,
...props
}: ExternalLinkStyledProps) => (
<Anchor<'a'>
component="a"
target="_blank"
rel="noreferrer"
title={title}
href={href}
{...props}
>
{children}
</Anchor>
);

26
inertia/components/common/links/external_link_unstyled.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { Anchor, CSSProperties } from '@mantine/core';
import { AnchorHTMLAttributes, ReactNode } from 'react';
interface ExternalLinkUnstyledProps
extends AnchorHTMLAttributes<HTMLAnchorElement> {
children: ReactNode;
style?: CSSProperties;
title?: string;
className?: string;
newTab?: boolean;
}
export const ExternalLinkUnstyled = ({
children,
newTab = true,
...props
}: ExternalLinkUnstyledProps) => (
<Anchor
component="a"
target={newTab ? '_blank' : undefined}
rel="noreferrer"
{...props}
style={{ ...props.style, textDecoration: 'none' }}
>
{children}
</Anchor>
);

50
inertia/components/common/links/internal_link.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { ApiRouteName } from '#shared/types/index';
import { Link } from '@inertiajs/react';
import { Anchor } from '@mantine/core';
import { useTuyau } from '@tuyau/inertia/react';
import { CSSProperties } from 'react';
interface InternalLinkProps {
children: React.ReactNode;
onClick?: (event: React.MouseEvent<any>) => void;
route?: ApiRouteName;
href?: string;
forceRefresh?: boolean;
style?: CSSProperties;
className?: string;
params?: Record<string, string>;
}
export const InternalLink = ({
children,
onClick,
route,
href,
forceRefresh,
style,
className,
params,
}: InternalLinkProps) => {
const tuyau = useTuyau();
if ((!route && !href) || !tuyau) {
throw new Error('InternalLink: route, href or tuyau is missing');
}
const url = route ? tuyau.$route(route, params).path : href;
if (!url) {
throw new Error('InternalLink: url not found');
}
return (
<Anchor<'a' | typeof Link>
component={forceRefresh ? 'a' : Link}
href={url}
style={style}
onClick={onClick}
className={className}
>
{children}
</Anchor>
);
};

61
inertia/components/common/links/internal_link_unstyled.tsx Normal file
View File

@@ -0,0 +1,61 @@
import { ApiRouteName } from '#shared/types/index';
import { Link } from '@inertiajs/react';
import { useTuyau } from '@tuyau/inertia/react';
import { CSSProperties } from 'react';
interface InternalLinkProps {
children: React.ReactNode;
onClick?: (event: React.MouseEvent<any>) => void;
route?: ApiRouteName;
href?: string;
forceRefresh?: boolean;
style?: CSSProperties;
className?: string;
params?: Record<string, string>;
}
export const InternalLinkUnstyled = ({
children,
onClick,
route,
href,
forceRefresh,
style,
className,
params,
}: InternalLinkProps) => {
const tuyau = useTuyau();
if ((!route && !href) || !tuyau) {
throw new Error('InternalLink: route, href or tuyau is missing');
}
const url = route ? tuyau.$route(route, params).path : href;
if (!url) {
throw new Error('InternalLink: url not found');
}
if (forceRefresh) {
return (
<a
href={url}
style={{ ...style, textDecoration: 'none' }}
onClick={onClick}
className={className}
>
{children}
</a>
);
}
return (
<Link
href={url}
style={{ ...style, textDecoration: 'none' }}
onClick={onClick}
className={className}
>
{children}
</Link>
);
};

2
inertia/components/common/language_switcher.tsx → inertia/components/common/locale_switcher.tsx
View File

@@ -2,7 +2,7 @@ import { ActionIcon, Image } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { LS_LANG_KEY } from '~/constants';
export function MantineLanguageSwitcher() {
export function LocaleSwitcher() {
const { i18n } = useTranslation();
const newLanguage = i18n.language === 'en' ? 'fr' : 'en';
return (

2
inertia/components/common/theme_switcher.tsx
View File

@@ -2,7 +2,7 @@ import { ActionIcon, useMantineColorScheme } from '@mantine/core';
import { TbMoonStars, TbSun } from 'react-icons/tb';
import { makeRequest } from '~/lib/request';
export function MantineThemeSwitcher() {
export function ThemeSwitcher() {
const { colorScheme, toggleColorScheme } = useMantineColorScheme();
const handleThemeChange = () => {
toggleColorScheme();

2
inertia/components/common/user_card.tsx
View File

@@ -3,7 +3,7 @@ import { Avatar, Group, Menu, Text, UnstyledButton } from '@mantine/core';
import { forwardRef } from 'react';
import { useTranslation } from 'react-i18next';
import { TbChevronRight } from 'react-icons/tb';
import useUser from '~/hooks/use_user';
import useUser from '~/hooks/use_auth';
interface UserButtonProps extends React.ComponentPropsWithoutRef<'button'> {
image: string;

2
inertia/components/dashboard/dashboard_navbar.tsx
View File

@@ -20,8 +20,8 @@ import { PiGearLight } from 'react-icons/pi';
import { MantineUserCard } from '~/components/common/user_card';
import { FavoriteList } from '~/components/dashboard/favorite/favorite_list';
import { SearchSpotlight } from '~/components/search/search';
import useUser from '~/hooks/use_auth';
import useShortcut from '~/hooks/use_shortcut';
import useUser from '~/hooks/use_user';
import { appendCollectionId } from '~/lib/navigation';
import { useActiveCollection } from '~/stores/collection_store';
import { useGlobalHotkeysStore } from '~/stores/global_hotkeys_store';

8
inertia/components/footer/footer.tsx
View File

@@ -4,8 +4,8 @@ import { route } from '@izzyjs/route/client';
import { Anchor, Group, Text } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import ExternalLink from '~/components/common/external_link';
import { MantineLanguageSwitcher } from '~/components/common/language_switcher';
import { MantineThemeSwitcher } from '~/components/common/theme_switcher';
import { LocaleSwitcher } from '~/components/common/locale_switcher';
import { ThemeSwitcher } from '~/components/common/theme_switcher';
import packageJson from '../../../package.json';
import classes from './footer.module.css';
@@ -46,8 +46,8 @@ export function MantineFooter() {
</Group>
<Group gap="sm" mt={4} mb={4}>
<MantineThemeSwitcher />
<MantineLanguageSwitcher />
<ThemeSwitcher />
<LocaleSwitcher />
</Group>
<Group gap="xs" justify="flex-end" wrap="nowrap">

10
inertia/components/navbar/navbar.tsx
View File

@@ -15,9 +15,9 @@ import {
import { useDisclosure } from '@mantine/hooks';
import { useTranslation } from 'react-i18next';
import ExternalLink from '~/components/common/external_link';
import { MantineLanguageSwitcher } from '~/components/common/language_switcher';
import { MantineThemeSwitcher } from '~/components/common/theme_switcher';
import useUser from '~/hooks/use_user';
import { LocaleSwitcher } from '~/components/common/locale_switcher';
import { ThemeSwitcher } from '~/components/common/theme_switcher';
import useUser from '~/hooks/use_auth';
import classes from './mobile.module.css';
export default function Navbar() {
@@ -47,8 +47,8 @@ export default function Navbar() {
</Group>
<Group gap="xs">
<MantineThemeSwitcher />
<MantineLanguageSwitcher />
<ThemeSwitcher />
<LocaleSwitcher />
{!isAuthenticated ? (
<Button
component="a"