Lea/maddy-admin
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

mobile friendly ui

Browse source
This commit is contained in:
Lea 2024-01-17 20:33:00 +01:00
parent 58c66e7414
commit 26e7ef93a7
Signed by: Lea
GPG key ID: 1BAFFE8347019C42
3 changed files with 86 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/app/layout.tsx
View file

@ -3,8 +3,7 @@ import ThemeWrapper from '@/lib/components/ThemeWrapper';
import './globals.css';
import AuthWrapper from '@/lib/components/AuthWrapper';
import { getServerSession } from 'next-auth';
import NavigationPanel from '@/lib/components/ui/NavigationPanel';
import { Flex } from '@radix-ui/themes';
import NavigationWrapper from '@/lib/components/NavigationWrapper';
export const metadata: Metadata = {
title: 'Maddy Admin',
@ -21,10 +20,9 @@ export default async function RootLayout({
<body className={`p-4`}>
<ThemeWrapper>
<AuthWrapper session={await getServerSession()}>
<Flex direction='row' gap='4'>
<div><NavigationPanel /></div>
<div className='w-full p-4'>{children}</div>
</Flex>
<NavigationWrapper>
{children}
</NavigationWrapper>
</AuthWrapper>
</ThemeWrapper>
</body>

29
src/lib/components/NavigationWrapper.tsx Normal file
View file

@ -0,0 +1,29 @@
"use client";
import { Flex } from "@radix-ui/themes";
import useWindowDimensions from "../hooks/useWindowDimensions";
import NavigationPanel from "./ui/NavigationPanel";
export default function NavigationWrapper({
children,
}: {
children: React.ReactNode
}) {
const dimensions = useWindowDimensions();
if (dimensions.width > 510) {
return (
<Flex direction='row' gap='4'>
<div><NavigationPanel /></div>
<div className='w-full p-4'>{children}</div>
</Flex>
);
} else {
return (
<Flex direction='column' gap='4'>
<div><NavigationPanel mobileUi /></div>
<div className='w-full p-4 pt-0'>{children}</div>
</Flex>
);
};
}

104
src/lib/components/ui/NavigationPanel.tsx
View file

@ -1,7 +1,7 @@
"use client";
import { isAdmin } from "@/lib/util";
import { Avatar, Box, Button, Card, Flex, IconButton, Popover, Text } from "@radix-ui/themes";
import { Avatar, Box, Button, Card, Flex, IconButton, Popover, ScrollArea, Text } from "@radix-ui/themes";
import { BookUserIcon, HomeIcon } from "lucide-react";
import { signOut, useSession } from "next-auth/react";
import Link from "next/link";
@ -10,67 +10,69 @@ import relativeTime from "dayjs/plugin/relativeTime";
dayjs.extend(relativeTime);
export default function NavigationPanel() {
export default function NavigationPanel({ mobileUi }: { mobileUi?: boolean }) {
const session = useSession();
return (
<Card className="w-fit">
<Flex direction='column' gap='2'>
{session.data?.user
&& (
<Popover.Root>
<Popover.Trigger>
<IconButton variant="outline" size='4' color="gray">
<Avatar
size="2"
src={session.data.user.image ?? "/favicon.ico"}
fallback={session.data.user.name?.slice(0, 1) || "@"}
/>
</IconButton>
</Popover.Trigger>
<Card className={mobileUi ? "w-full" : "w-fit"}>
<ScrollArea>
<Flex direction={mobileUi ? 'row' : 'column'} justify={mobileUi ? "center" : "start"} gap='2'>
{session.data?.user
&& (
<Popover.Root>
<Popover.Trigger>
<IconButton variant="outline" size='4' color="gray">
<Avatar
size="2"
src={session.data.user.image ?? "/favicon.ico"}
fallback={session.data.user.name?.slice(0, 1) || "@"}
/>
</IconButton>
</Popover.Trigger>
<Popover.Content>
<Flex gap='3' direction='column'>
<Card>
<Flex gap='2' align='center'>
<Avatar
size="3"
src={session.data.user.image ?? "/favicon.ico"}
radius="full"
fallback={session.data.user.name?.slice(0, 1) || "@"}
/>
<Flex direction="column">
<Text size='4'>{session.data.user.email}</Text>
<Text weight="light" size="2">Session valid for {dayjs(session.data.expires).fromNow(true)}</Text>
<Popover.Content>
<Flex gap='3' direction='column'>
<Card>
<Flex gap='2' align='center'>
<Avatar
size="3"
src={session.data.user.image ?? "/favicon.ico"}
radius="full"
fallback={session.data.user.name?.slice(0, 1) || "@"}
/>
<Flex direction="column">
<Text size='4'>{session.data.user.email}</Text>
<Text weight="light" size="2">Session valid for {dayjs(session.data.expires).fromNow(true)}</Text>
</Flex>
</Flex>
</Card>
<Flex gap='2' direction='row' justify='end'>
<Link href="/self-service">
<Button variant="soft">Account</Button>
</Link>
<Button variant="surface" onClick={() => signOut()}>Log out</Button>
</Flex>
</Card>
<Flex gap='2' direction='row' justify='end'>
<Link href="/self-service">
<Button variant="soft">Account</Button>
</Link>
<Button variant="surface" onClick={() => signOut()}>Log out</Button>
</Flex>
</Flex>
</Popover.Content>
</Popover.Root>
)}
</Popover.Content>
</Popover.Root>
)}
<Link href="/">
<IconButton variant="outline" size='4'>
<HomeIcon />
</IconButton>
</Link>
{isAdmin(session.data) && (
<Link href="/admin/users">
<Link href="/">
<IconButton variant="outline" size='4'>
<BookUserIcon />
<HomeIcon />
</IconButton>
</Link>
)}
</Flex>
{isAdmin(session.data) && (
<Link href="/admin/users">
<IconButton variant="outline" size='4'>
<BookUserIcon />
</IconButton>
</Link>
)}
</Flex>
</ScrollArea>
</Card>
);
}