Skip to content

Commit

Permalink
Make admin page responsive
Browse files Browse the repository at this point in the history
Close #37.
  • Loading branch information
JaneIRL committed Sep 3, 2023
1 parent 8384e44 commit ed28ae0
Showing 1 changed file with 28 additions and 45 deletions.
73 changes: 28 additions & 45 deletions src/app/admin/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,65 +1,48 @@
import Link from 'next/link'

import { Box } from '@/components/Box'
'use client'

import styles from './layout.module.css'

export const dynamic = 'force-dynamic'
import Link from 'next/link'
import { useSelectedLayoutSegment } from 'next/navigation'

export default async function AdminLayout({
export default function AdminLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<Box direction="row" className={styles.adminLayoutRoot}>
<aside>
<div className={'flex flex-col gap-2 w-full'}>
<nav className="flex flex-row justify-center">
<Sidebar />
</aside>
<main className={'w-full'}>{children}</main>
</Box>
</nav>
<main className={'w-full pb-4'}>{children}</main>
</div>
)
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const Links = {
'/admin/users': 'Users',
'/admin/schedule': 'Schedule',
'/admin/post': 'Posts',
'/admin/marketing': 'Marketing',
'/admin/faq': 'FAQ',
'/admin/check-in': 'Check',
'/admin/applications': 'Applications',
'/admin': 'Root',
'/admin/applications': 'Applications',
'/admin/check-in': 'Check-In',
'/admin/faq': 'FAQ',
'/admin/marketing': 'Marketing',
'/admin/post': 'Posts',
'/admin/schedule': 'Schedule',
'/admin/users': 'Users',
}

function Sidebar() {
const selectedSegment = useSelectedLayoutSegment()
const selectedPath = `/admin${selectedSegment ? `/${selectedSegment}` : ''}`
return (
<ul>
<li>
<Link href="/admin">Root</Link>
</li>
<li>
<Link href="/admin/applications">Applications</Link>
</li>
<li>
<Link href="/admin/check-in">Check-In</Link>
</li>
<li>
<Link href="/admin/faq">FAQ</Link>
</li>
<li>
<Link href="/admin/marketing">Marketing Emails</Link>
</li>
<li>
<Link href="/admin/post">Posts</Link>
</li>
<li>
<Link href="/admin/schedule">Schedule</Link>
</li>
<li>
<Link href="/admin/users">Users</Link>
</li>
<ul className="flex flex-row flex-wrap gap-2">
{Object.entries(Links).map(([path, name]) => (
<li key={path}>
{selectedPath === path ? (
<b>{name}</b>
) : (
<Link href={path}>{name}</Link>
)}
</li>
))}
</ul>
)
}

0 comments on commit ed28ae0

Please sign in to comment.