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>
);
};
}

10
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,12 +10,13 @@ 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'>
<Card className={mobileUi ? "w-full" : "w-fit"}>
<ScrollArea>
<Flex direction={mobileUi ? 'row' : 'column'} justify={mobileUi ? "center" : "start"} gap='2'>
{session.data?.user
&& (
<Popover.Root>
@ -71,6 +72,7 @@ export default function NavigationPanel() {
</Link>
)}
</Flex>
</ScrollArea>
</Card>
);
}