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