fix(dashboard): pagination and login

This commit is contained in:
Carl-Gerhard Lindesvärd
2026-03-01 13:33:55 +01:00
parent b801d6a8ef
commit 6251d143d1
11 changed files with 218 additions and 221 deletions

View File

@@ -1,9 +1,9 @@
import { useAppContext } from '@/hooks/use-app-context';
import { cn } from '@/utils/cn';
import { MenuIcon, XIcon } from 'lucide-react';
import { useState } from 'react';
import { LogoSquare } from './logo';
import { Button, LinkButton } from './ui/button';
import { Button } from './ui/button';
import { useAppContext } from '@/hooks/use-app-context';
import { cn } from '@/utils/cn';
export function LoginNavbar({ className }: { className?: string }) {
const { isSelfHosted } = useAppContext();
@@ -12,59 +12,61 @@ export function LoginNavbar({ className }: { className?: string }) {
return (
<div
className={cn(
'absolute top-0 left-0 w-full row justify-between items-center p-8 z-10',
className,
'row absolute top-0 left-0 z-10 w-full items-center justify-between p-8',
className
)}
>
<a href="https://openpanel.dev" className="row items-center gap-2">
<a className="row items-center gap-2" href="https://openpanel.dev">
<LogoSquare className="size-8 shrink-0" />
<span className="font-medium text-sm text-muted-foreground">
<span className="font-medium text-muted-foreground text-sm">
{isSelfHosted ? 'Self-hosted analytics' : 'OpenPanel.dev'}
</span>
</a>
<nav className="max-md:hidden">
<ul className="row gap-4 items-center [&>li>a]:text-sm [&>li>a]:text-muted-foreground [&>li>a]:hover:underline">
<li>
<a href="https://openpanel.dev">OpenPanel Cloud</a>
</li>
<li>
<a href="https://openpanel.dev/compare/mixpanel-alternative">
Mixpanel alternative
</a>
</li>
<li>
<a href="https://openpanel.dev/compare/posthog-alternative">
Posthog alternative
</a>
</li>
<li>
<a href="https://openpanel.dev/articles/open-source-web-analytics">
Open source analytics
</a>
</li>
</ul>
</nav>
<div className="md:hidden relative">
{isSelfHosted && (
<nav className="max-md:hidden">
<ul className="row items-center gap-4 [&>li>a]:text-muted-foreground [&>li>a]:text-sm [&>li>a]:hover:underline">
<li>
<a href="https://openpanel.dev">OpenPanel Cloud</a>
</li>
<li>
<a href="https://openpanel.dev/compare/mixpanel-alternative">
Mixpanel alternative
</a>
</li>
<li>
<a href="https://openpanel.dev/compare/posthog-alternative">
Posthog alternative
</a>
</li>
<li>
<a href="https://openpanel.dev/articles/open-source-web-analytics">
Open source analytics
</a>
</li>
</ul>
</nav>
)}
<div className="relative md:hidden">
<Button
onClick={() => setMobileMenuOpen((prev) => !prev)}
size="icon"
variant="ghost"
onClick={() => setMobileMenuOpen((prev) => !prev)}
>
{mobileMenuOpen ? <XIcon size={20} /> : <MenuIcon size={20} />}
</Button>
{mobileMenuOpen && (
<>
<button
type="button"
onClick={() => setMobileMenuOpen(false)}
className="fixed inset-0 z-40 bg-black/20 backdrop-blur-sm"
onClick={() => setMobileMenuOpen(false)}
type="button"
/>
<nav className="absolute right-0 top-full mt-2 z-50 bg-card border border-border rounded-md shadow-lg min-w-48 py-2">
<ul className="flex flex-col *:text-sm *:text-muted-foreground">
<nav className="absolute top-full right-0 z-50 mt-2 min-w-48 rounded-md border border-border bg-card py-2 shadow-lg">
<ul className="flex flex-col *:text-muted-foreground *:text-sm">
<li>
<a
href="https://openpanel.dev"
className="block px-4 py-2 hover:bg-accent hover:text-accent-foreground"
href="https://openpanel.dev"
onClick={() => setMobileMenuOpen(false)}
>
OpenPanel Cloud
@@ -72,8 +74,8 @@ export function LoginNavbar({ className }: { className?: string }) {
</li>
<li>
<a
href="https://openpanel.dev/compare/mixpanel-alternative"
className="block px-4 py-2 hover:bg-accent hover:text-accent-foreground"
href="https://openpanel.dev/compare/mixpanel-alternative"
onClick={() => setMobileMenuOpen(false)}
>
Posthog alternative
@@ -81,8 +83,8 @@ export function LoginNavbar({ className }: { className?: string }) {
</li>
<li>
<a
href="https://openpanel.dev/compare/mixpanel-alternative"
className="block px-4 py-2 hover:bg-accent hover:text-accent-foreground"
href="https://openpanel.dev/compare/mixpanel-alternative"
onClick={() => setMobileMenuOpen(false)}
>
Mixpanel alternative
@@ -90,8 +92,8 @@ export function LoginNavbar({ className }: { className?: string }) {
</li>
<li>
<a
href="https://openpanel.dev/articles/open-source-web-analytics"
className="block px-4 py-2 hover:bg-accent hover:text-accent-foreground"
href="https://openpanel.dev/articles/open-source-web-analytics"
onClick={() => setMobileMenuOpen(false)}
>
Open source analytics