mobile styles

app/(auth)/dashboard/page.tsx

@@ -1,60 +1,53 @@
 import AddFirstGuestBookEntryClient from '@/components/AddFirstGuestBookEntryClient'
-import AddGuestBookEntryModal from '@/components/AddGuestBookEntryModal'
 import CreateEventClient from '@/components/CreateEventClient'
-import DashboardNavbar from '@/components/DashboardNavbar'
 import EventInfoQuickView from '@/components/EventInfoQuickView'
 import GuestBookQuickView from '@/components/GuestBookQuickView'
-import { prisma } from '@/lib/prisma'
 import { queries } from '@/lib/queries'
-import { getServerSession } from 'next-auth'
 import Link from 'next/link'
 import React from 'react'
 
 export default async function DashboardPage() {
     const events = await queries.fetchEvents();
     const guestBookEntries = await queries.fetchGuestBookEntries(5);
-    const session = await getServerSession();
-
-    const user = await prisma.user.findUnique({
-        where: { email: session?.user.email }
-    })
 
     return (
-        <div className='grid grid-cols-7 gap-4'>
+        <div className='grid grid-cols-1 md:grid-cols-7 gap-4'>
-            <div className='col-span-5 row-span-3 bg-[#00000008] rounded-xl p-6 relative'>
+            <div className='md:col-span-5 md:row-span-3 bg-[#00000008] rounded-xl p-4 md:p-6 relative'>
-                    <div>
+                <div>
-                        <div className='w-full flex items-center justify-between'>
+                    <div className='w-full flex items-center justify-between'>
-                            <h2 className='text-lg font-semibold py-4'>Your Events</h2>
+                        <h2 className='text-lg font-semibold py-4'>Your Events</h2>
-                            <CreateEventClient />
+                        <CreateEventClient />
-                        </div>
-                        {!events.length && <>You don&apos;t have any events yet. Create your first event.</>}
-                        <div className='grid grid-cols-3'>
-                            {events.map((item) => (
-                                <EventInfoQuickView key={item.id} {...item} />
-                            ))}
-                        </div>
                     </div>
-                    <Link href={'/events'} className='absolute bottom-4 right-4 text-sm text-brand-primary-400 hover:underline'>
+                    {!events.length && <>You don&apos;t have any events yet. Create your first event.</>}
-                        View all
+                    <div className='grid grid-cols-1 md:grid-cols-3'>
-                    </Link>
+                        {events.map((item) => (
-                </div>
+                            <EventInfoQuickView key={item.id} {...item} />
-                <div className='row-span-5 col-start-6 col-span-2 bg-[#00000008] rounded-xl p-6'>
-                    <div className='py-4 flex justify-between'>
-                        <h2 className='text-lg font-semibold'>Guest Book</h2>
-                        <Link 
-                            href={'/guest-book'}
-                            className='hover:cursor-pointer hover:underline text-brand-primary-500'
-                        >
-                            View All
-                        </Link>
-                    </div>
-                    <div className='space-y-2'>
-                        {!guestBookEntries.length && <AddFirstGuestBookEntryClient />}
-                        {guestBookEntries.map(entry => (
-                            <GuestBookQuickView key={entry.id} {...entry} />
                         ))}
                     </div>
                 </div>
+                <div className='w-full text-right mt-2'>
+                    <Link href={'/events'} className='md:absolute bottom-4 right-4 text-sm text-brand-primary-400 hover:underline'>
+                        View all
+                    </Link>
+                </div>
+            </div>
+            <div className='md:row-span-5 md:col-start-6 col-span-2 bg-[#00000008] rounded-xl p-6'>
+                <div className='py-4 flex justify-between'>
+                    <h2 className='text-lg font-semibold'>Guest Book</h2>
+                    <Link 
+                        href={'/guest-book'}
+                        className='hover:cursor-pointer hover:underline text-brand-primary-500'
+                    >
+                        View All
+                    </Link>
+                </div>
+                <div className='space-y-2'>
+                    {!guestBookEntries.length && <AddFirstGuestBookEntryClient />}
+                    {guestBookEntries.map(entry => (
+                        <GuestBookQuickView key={entry.id} {...entry} />
+                    ))}
+                </div>
+            </div>
         </div>
     )
 }

app/(auth)/layout.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { SessionProvider } from 'next-auth/react'
-import { redirect } from 'next/navigation'
 import { ReactNode } from 'react'
 import DashboardNavbar from '@/components/DashboardNavbar'
 
@@ -10,10 +9,10 @@ export default function AuthLayout({ children }: { children: ReactNode }) {
     return (
         <>
             <SessionProvider>
-                <main className="p-4 max-w-[100rem] mx-auto">
+                <main className="p-4 max-w-[100rem] mx-auto relative">
-                    <div className='grid grid-cols-5 gap-4'>
+                    <div className='grid grid-cols-1 md:grid-cols-5 gap-4'>
                         <DashboardNavbar />
-                        <section className="col-span-4">
+                        <section className="md:col-span-4 mt-16 md:mt-0">
                         {children}
                         </section>
                     </div>

components/DashboardNavbar.tsx

@@ -5,11 +5,10 @@ import React from 'react'
 
 export default function DashboardNavbar() {
     const session = useSession()
-    console.log(session)
     return (
-        <div className='bg-[#00000008] rounded-xl p-6 flex flex-col gap-2'>
+        <div className='bg-white md:bg-[#00000008] rounded-xl w-full md:w-auto p-2 pr-10 md:p-6 fixed md:static top-0 md:flex flex-col gap-2'>
             <h2 className='text-lg font-semibold'>Hello, {session.data?.user.username}</h2>
-            <div className='*:bg-[#00000010] *:hover:bg-brand-primary-700 *:transition-colors *:duration-200 *:p-4 *:rounded-lg *:w-full flex flex-col gap-2'>
+            <div className='*:bg-[#00000010] *:hover:bg-brand-primary-700 *:transition-colors *:duration-200 *:px-2 *:py-1 md:*:p-4 *:rounded-lg *:w-full flex md:flex-col gap-2'>
                 <Link href={'/dashboard'} className='bg-brand-primary-800'>Overview</Link>
                 <Link href={'/events'} className=''>Events</Link>
                 <Link href={'/guest-book'} className=''>Guest Book</Link>

components/EventInfoDisplay.tsx

@@ -48,7 +48,6 @@ export default function EventInfoDisplay({ event }: Props) {
     const [todos, setTodos] = useState(event.todos)
 
     const eventGuests = event.eventGuests
-    console.log(eventGuests)
     
     const [saving, setSaving] = useState(false)
     const [error, setError] = useState('')
@@ -111,8 +110,8 @@ export default function EventInfoDisplay({ event }: Props) {
     }
 
     return (
-        <div className="*:bg-[#00000008] *:p-6 *:rounded-lg *:space-y-4 grid grid-cols-6 gap-4">
+        <div className="*:bg-[#00000008] *:p-6 *:rounded-lg *:space-y-4 grid grid-cols-1 md:grid-cols-6 gap-4">
-            <div className='col-span-6'>
+            <div className='md:col-span-6 order-first'>
                 <div className="flex justify-between items-start col-span-6">
                     <h2 className="text-2xl font-bold">{event.name}</h2>
                     <button
@@ -187,7 +186,7 @@ export default function EventInfoDisplay({ event }: Props) {
                     />
                 </div>
             </div>
-            <div className='col-span-3'>
+            <div className='md:col-span-3 order-3 md:order-2'>
                 <div className='flex justify-between items-center'>
                     <h2 className='text-xl font-semibold'>Guest List</h2>
                     <button
@@ -239,7 +238,7 @@ export default function EventInfoDisplay({ event }: Props) {
                 </ul>
                 
             </div>
-            <div className='col-span-3'>
+            <div className='md:col-span-3 order-2 md:order-3'>
                 <ToDoList 
                     eventId={event.id}
                     initialTodos={todos}