From 26e7ef93a776349e1837725f30ab38ce49aab102 Mon Sep 17 00:00:00 2001 From: Lea Date: Wed, 17 Jan 2024 20:33:00 +0100 Subject: [PATCH] mobile friendly ui --- src/app/layout.tsx | 10 +-- src/lib/components/NavigationWrapper.tsx | 29 ++++++ src/lib/components/ui/NavigationPanel.tsx | 104 +++++++++++----------- 3 files changed, 86 insertions(+), 57 deletions(-) create mode 100644 src/lib/components/NavigationWrapper.tsx diff --git a/src/app/layout.tsx b/src/app/layout.tsx index d1246aa..a6fa232 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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({ - -
-
{children}
- + + {children} + diff --git a/src/lib/components/NavigationWrapper.tsx b/src/lib/components/NavigationWrapper.tsx new file mode 100644 index 0000000..59eccd2 --- /dev/null +++ b/src/lib/components/NavigationWrapper.tsx @@ -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 ( + +
+
{children}
+ + ); + } else { + return ( + +
+
{children}
+ + ); + }; +} diff --git a/src/lib/components/ui/NavigationPanel.tsx b/src/lib/components/ui/NavigationPanel.tsx index 41fce2f..9152a5d 100644 --- a/src/lib/components/ui/NavigationPanel.tsx +++ b/src/lib/components/ui/NavigationPanel.tsx @@ -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 ( - - - {session.data?.user - && ( - - - - - - + + + + {session.data?.user + && ( + + + + + + - - - - - - - {session.data.user.email} - Session valid for {dayjs(session.data.expires).fromNow(true)} + + + + + + + {session.data.user.email} + Session valid for {dayjs(session.data.expires).fromNow(true)} + + + + + + + + - - - - - - - - - - - )} + + + )} - - - - - - - {isAdmin(session.data) && ( - + - + - )} - + + {isAdmin(session.data) && ( + + + + + + )} + + ); } \ No newline at end of file