feat: add multiple way to show collections and links

inertia/components/common/floating_navbar/floating_navbar.tsx

@@ -19,6 +19,8 @@ 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 { LocaleSwitcher } from '~/components/common/locale_switcher';
+import { ThemeSwitcher } from '~/components/common/theme_switcher';
 import { useAuth } from '~/hooks/use_auth';
 import classes from './floating_navbar.module.css';
 
@@ -74,8 +76,8 @@ export function FloatingNavbar({ width }: FloatingNavbarProps) {
 					</Group>
 					<Group>
 						{!isMobile && <Group>{links}</Group>}
-						{isMobile && <Burger opened={opened} onClick={handler.toggle} />}
 						{auth.isAuthenticated && <UserDropdown />}
+						{isMobile && <Burger opened={opened} onClick={handler.toggle} />}
 						{!auth.isAuthenticated && (
 							<Button
 								variant="default"
@@ -101,6 +103,10 @@ export function FloatingNavbar({ width }: FloatingNavbarProps) {
 					<Flex direction="column" gap="md">
 						{links}
 					</Flex>
+					<Group mt="md">
+						<ThemeSwitcher />
+						<LocaleSwitcher />
+					</Group>
 				</Drawer>
 			</Box>
 		</>

inertia/components/common/floating_navbar/user_dropdown.module.css

@@ -10,10 +10,6 @@
 			var(--mantine-color-dark-8)
 		);
 	}
-
-	@media (max-width: 768px) {
-		display: none;
-	}
 }
 
 .userActive {

inertia/components/common/floating_navbar/user_dropdown.tsx

@@ -1,9 +1,11 @@
 import { Avatar, Group, Menu, Text, UnstyledButton } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import { modals } from '@mantine/modals';
 import cx from 'clsx';
 import { useTranslation } from 'react-i18next';
-import { TbChevronDown, TbLogout, TbShield } from 'react-icons/tb';
+import { TbChevronDown, TbLogout, TbSettings, TbShield } from 'react-icons/tb';
 import { InternalLinkUnstyled } from '~/components/common/links/internal_link_unstyled';
+import { UserPreferences } from '~/components/common/user_preferences/user_preferences';
 import { useAuth } from '~/hooks/use_auth';
 import classes from './user_dropdown.module.css';
 
@@ -12,6 +14,14 @@ export function UserDropdown() {
 	const [userMenuOpened, { open: openUserMenu, close: closeUserMenu }] =
 		useDisclosure(false);
 	const { t } = useTranslation();
+
+	const handlePreferencesModal = () => {
+		modals.open({
+			title: t('user-preferences'),
+			children: <UserPreferences />,
+		});
+	};
+
 	return (
 		<Menu
 			width={260}
@@ -49,12 +59,18 @@ export function UserDropdown() {
 							href="/admin"
 							color="red"
 						>
-							{t('common:manage_users')}
+							{t('common:manage-users')}
 						</Menu.Item>
 					</>
 				)}
 
 				<Menu.Label>{t('common:settings')}</Menu.Label>
+				<Menu.Item
+					leftSection={<TbSettings size={16} />}
+					onClick={handlePreferencesModal}
+				>
+					{t('common:preferences')}
+				</Menu.Item>
 				<Menu.Item
 					leftSection={<TbLogout size={16} />}
 					component={InternalLinkUnstyled}