mobile friendly ui
This commit is contained in:
parent
58c66e7414
commit
26e7ef93a7
|
@ -3,8 +3,7 @@ import ThemeWrapper from '@/lib/components/ThemeWrapper';
|
||||||
import './globals.css';
|
import './globals.css';
|
||||||
import AuthWrapper from '@/lib/components/AuthWrapper';
|
import AuthWrapper from '@/lib/components/AuthWrapper';
|
||||||
import { getServerSession } from 'next-auth';
|
import { getServerSession } from 'next-auth';
|
||||||
import NavigationPanel from '@/lib/components/ui/NavigationPanel';
|
import NavigationWrapper from '@/lib/components/NavigationWrapper';
|
||||||
import { Flex } from '@radix-ui/themes';
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'Maddy Admin',
|
title: 'Maddy Admin',
|
||||||
|
@ -21,10 +20,9 @@ export default async function RootLayout({
|
||||||
<body className={`p-4`}>
|
<body className={`p-4`}>
|
||||||
<ThemeWrapper>
|
<ThemeWrapper>
|
||||||
<AuthWrapper session={await getServerSession()}>
|
<AuthWrapper session={await getServerSession()}>
|
||||||
<Flex direction='row' gap='4'>
|
<NavigationWrapper>
|
||||||
<div><NavigationPanel /></div>
|
{children}
|
||||||
<div className='w-full p-4'>{children}</div>
|
</NavigationWrapper>
|
||||||
</Flex>
|
|
||||||
</AuthWrapper>
|
</AuthWrapper>
|
||||||
</ThemeWrapper>
|
</ThemeWrapper>
|
||||||
</body>
|
</body>
|
||||||
|
|
29
src/lib/components/NavigationWrapper.tsx
Normal file
29
src/lib/components/NavigationWrapper.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { isAdmin } from "@/lib/util";
|
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 { BookUserIcon, HomeIcon } from "lucide-react";
|
||||||
import { signOut, useSession } from "next-auth/react";
|
import { signOut, useSession } from "next-auth/react";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
@ -10,67 +10,69 @@ import relativeTime from "dayjs/plugin/relativeTime";
|
||||||
|
|
||||||
dayjs.extend(relativeTime);
|
dayjs.extend(relativeTime);
|
||||||
|
|
||||||
export default function NavigationPanel() {
|
export default function NavigationPanel({ mobileUi }: { mobileUi?: boolean }) {
|
||||||
const session = useSession();
|
const session = useSession();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="w-fit">
|
<Card className={mobileUi ? "w-full" : "w-fit"}>
|
||||||
<Flex direction='column' gap='2'>
|
<ScrollArea>
|
||||||
{session.data?.user
|
<Flex direction={mobileUi ? 'row' : 'column'} justify={mobileUi ? "center" : "start"} gap='2'>
|
||||||
&& (
|
{session.data?.user
|
||||||
<Popover.Root>
|
&& (
|
||||||
<Popover.Trigger>
|
<Popover.Root>
|
||||||
<IconButton variant="outline" size='4' color="gray">
|
<Popover.Trigger>
|
||||||
<Avatar
|
<IconButton variant="outline" size='4' color="gray">
|
||||||
size="2"
|
<Avatar
|
||||||
src={session.data.user.image ?? "/favicon.ico"}
|
size="2"
|
||||||
fallback={session.data.user.name?.slice(0, 1) || "@"}
|
src={session.data.user.image ?? "/favicon.ico"}
|
||||||
/>
|
fallback={session.data.user.name?.slice(0, 1) || "@"}
|
||||||
</IconButton>
|
/>
|
||||||
</Popover.Trigger>
|
</IconButton>
|
||||||
|
</Popover.Trigger>
|
||||||
|
|
||||||
<Popover.Content>
|
<Popover.Content>
|
||||||
<Flex gap='3' direction='column'>
|
<Flex gap='3' direction='column'>
|
||||||
<Card>
|
<Card>
|
||||||
<Flex gap='2' align='center'>
|
<Flex gap='2' align='center'>
|
||||||
<Avatar
|
<Avatar
|
||||||
size="3"
|
size="3"
|
||||||
src={session.data.user.image ?? "/favicon.ico"}
|
src={session.data.user.image ?? "/favicon.ico"}
|
||||||
radius="full"
|
radius="full"
|
||||||
fallback={session.data.user.name?.slice(0, 1) || "@"}
|
fallback={session.data.user.name?.slice(0, 1) || "@"}
|
||||||
/>
|
/>
|
||||||
<Flex direction="column">
|
<Flex direction="column">
|
||||||
<Text size='4'>{session.data.user.email}</Text>
|
<Text size='4'>{session.data.user.email}</Text>
|
||||||
<Text weight="light" size="2">Session valid for {dayjs(session.data.expires).fromNow(true)}</Text>
|
<Text weight="light" size="2">Session valid for {dayjs(session.data.expires).fromNow(true)}</Text>
|
||||||
|
</Flex>
|
||||||
</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>
|
</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>
|
||||||
</Flex>
|
</Popover.Content>
|
||||||
</Popover.Content>
|
</Popover.Root>
|
||||||
</Popover.Root>
|
)}
|
||||||
)}
|
|
||||||
|
|
||||||
<Link href="/">
|
<Link href="/">
|
||||||
<IconButton variant="outline" size='4'>
|
|
||||||
<HomeIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
{isAdmin(session.data) && (
|
|
||||||
<Link href="/admin/users">
|
|
||||||
<IconButton variant="outline" size='4'>
|
<IconButton variant="outline" size='4'>
|
||||||
<BookUserIcon />
|
<HomeIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
|
||||||
</Flex>
|
{isAdmin(session.data) && (
|
||||||
|
<Link href="/admin/users">
|
||||||
|
<IconButton variant="outline" size='4'>
|
||||||
|
<BookUserIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
</Flex>
|
||||||
|
</ScrollArea>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
}
|
}
|
Loading…
Reference in a new issue