Feat/reorganize toplevel navigation

app/components/header/home/index.tsx

@@ -1,22 +1,75 @@
-import { Link } from 'react-router'
+import { useTranslation } from 'react-i18next'
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from '~/components/ui/tooltip'
+import { topbarSurface } from '~/components/map/topbar-styles'
+import { cn } from '~/lib/utils'
+
+interface HomeProps {
+	deviceCount?: number
+	measurementCount?: number
+	onHomeClick?: () => void
+}
+
+export default function Home({
+	deviceCount = 0,
+	measurementCount = 0,
+	onHomeClick,
+}: HomeProps) {
+	const { t } = useTranslation('menu')
 
-export default function Home() {
 	return (
-		<div>
-			<div className="pointer-events-auto h-10 w-10">
-				<Link to="/">
-					<button
-						type="button"
-						className="h-10 w-10 rounded-full border border-gray-100 bg-white text-black shadow-xl hover:bg-gray-100"
-					>
-						<img
-							src="/img/logo.png"
-							alt="openSenseMapLogo"
-							className="mx-auto h-7 w-7"
-						/>
-					</button>
-				</Link>
-			</div>
-		</div>
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<button
+					type="button"
+					onClick={onHomeClick}
+					aria-label={t('returnToGlobeView')}
+					className={cn(
+						topbarSurface({ shape: 'pill' }),
+						`
+						pointer-events-auto
+						flex items-center gap-3
+						px-3 pr-4
+						cursor-pointer
+						focus-visible:ring-2
+						focus-visible:ring-slate-950
+						focus-visible:ring-offset-2
+						focus-visible:outline-hidden
+						`,
+					)}
+				>
+					<img
+						src="/img/openSenseMap.png"
+						alt="openSenseMapLogo"
+						className="h-7 w-auto shrink-0"
+					/>
+
+					{deviceCount > 0 && (
+						<section className="flex flex-col text-left text-sm leading-tight">
+							<p>
+								<span className="font-semibold text-green-700">
+									{deviceCount}{' '}
+								</span>
+								<span>{t('devices')}</span>
+							</p>
+
+							<p>
+								<span className="font-semibold text-green-700">
+									{measurementCount}{' '}
+								</span>
+								<span>{t('measurements')}</span>
+							</p>
+						</section>
+					)}
+				</button>
+			</TooltipTrigger>
+
+			<TooltipContent side="bottom">
+				<p>{t('returnToGlobeView')}</p>
+			</TooltipContent>
+		</Tooltip>
 	)
-}
+}

app/components/header/index.tsx

@@ -1,29 +1,18 @@
-import LanguageSelector from '../landing/header/language-selector'
-import Download from './download'
 import Home from './home'
 import Menu from './menu'
 import NavBar from './nav-bar'
-// import { useLoaderData } from "@remix-run/react";
-// import Notification from "./notification";
-// import type { loader } from "~/routes/explore.$deviceId._index";
 
 interface HeaderProps {
 	devices: any
 }
 
 export default function Header(props: HeaderProps) {
-	// const data = useLoaderData<typeof loader>();
 	return (
 		<div className="items-top pointer-events-none fixed z-10 flex h-14 w-full justify-between gap-4 p-2">
 			<Home />
 			<NavBar devices={props.devices} />
 			<div className="flex gap-2">
-				<div className="pointer-events-auto flex h-10 w-16 items-center justify-center rounded-full bg-white shadow-md">
-					<LanguageSelector />
-				</div>
-				<Download devices={props.devices} />
-				{/* {data?.user?.email ? <Notification /> : null} */}
-				<Menu />
+				<Menu devices={props.devices}/>
 			</div>
 		</div>
 	)

app/components/header/info/index.tsx

@@ -0,0 +1,109 @@
+import {
+	Globe,
+	FileLock2,
+	Coins,
+	ExternalLink,
+	ScrollText,
+	MessagesSquare,
+	InfoIcon,
+} from 'lucide-react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Link, useNavigation } from 'react-router'
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { useRootRouteLoaderData } from '~/root'
+import { Button } from '~/components/ui/button'
+
+export default function Info() {
+	const { ENV } = useRootRouteLoaderData()
+	const [open, setOpen] = useState(false)
+	const navigation = useNavigation()
+
+	const { t } = useTranslation('menu')
+
+	return (
+		<DropdownMenu open={open} onOpenChange={setOpen} modal={false}>
+			<DropdownMenuTrigger asChild>
+				<div className="pointer-events-auto box-border h-10 w-10">
+					<Button variant="topbar" size="topbarIcon">
+						<InfoIcon />
+					</Button>
+				</div>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent
+				className="w-56 dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-95"
+				align="end"
+				forceMount
+			>
+				<div
+					className={
+						navigation.state === 'loading' ? 'pointer-events-none' : ''
+					}
+				>
+					<DropdownMenuGroup>
+						<Link to={ENV.COMMUNITY_URL} target="_blank">
+							<DropdownMenuItem className="cursor-pointer">
+								<MessagesSquare className="mr-2 h-5 w-5" />
+								<span>{t('community_label')}</span>
+								<ExternalLink className="ml-auto h-4 w-4 text-gray-300" />
+							</DropdownMenuItem>
+						</Link>
+						<Link to="https://docs.opensensemap.org/" target="_blank">
+							<DropdownMenuItem className="cursor-pointer">
+								<Globe className="mr-2 h-5 w-5" />
+								<span>{t('api_docs_label')}</span>
+								<ExternalLink className="ml-auto h-4 w-4 text-gray-300" />
+							</DropdownMenuItem>
+						</Link>
+					</DropdownMenuGroup>
+					<DropdownMenuSeparator />
+					<DropdownMenuGroup>
+						<Link to={'/privacy'}>
+							<DropdownMenuItem className="cursor-pointer">
+								<FileLock2 className="mr-2 h-5 w-5" />
+								<span>{t('data_protection_label')}</span>
+							</DropdownMenuItem>
+						</Link>
+					</DropdownMenuGroup>
+					<DropdownMenuGroup>
+						<Link to={'/terms'} target="_blank">
+							<DropdownMenuItem
+								onSelect={(e) => e.preventDefault()}
+								className="cursor-pointer"
+							>
+								<ScrollText className="mr-2 inline h-5 w-5" />
+								<span> {t('tos')}</span>
+							</DropdownMenuItem>
+						</Link>
+					</DropdownMenuGroup>
+					<DropdownMenuSeparator />
+
+					<DropdownMenuGroup>
+						<Link
+							to={
+								'https://www.betterplace.org/de/projects/89947-opensensemap-org-die-freie-karte-fuer-umweltdaten'
+							}
+							target="_blank"
+						>
+							<DropdownMenuItem
+								onSelect={(e) => e.preventDefault()}
+								className="cursor-pointer"
+							>
+								<Coins className="mr-2 inline h-5 w-5" />
+								<span> {t('donate_label')}</span>
+								<ExternalLink className="ml-auto h-4 w-4 text-gray-300" />
+							</DropdownMenuItem>
+						</Link>
+					</DropdownMenuGroup>
+				</div>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	)
+}