Skip to content

BSL-59: updated admin layout #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Junny20 wants to merge 1 commit into
base: main
Choose a base branch
from
+106 −28
Open

BSL-59: updated admin layout #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
133 changes: 106 additions & 27 deletions components/admin/AdminLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,23 @@
import React from "react";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useSession } from "next-auth/react";
import {
LayoutDashboard,
FileText,
Calendar,
Settings,
TrendingUp,
} from "lucide-react";

const navItems = [
{ label: "Dashboard", href: "/admin" },
{ label: "Applications", href: "/admin/applications" },
{ label: "Events", href: "/admin/events" },
const mainNavItems = [
{ label: "Dashboard", href: "/admin", icon: LayoutDashboard },
{ label: "Applications", href: "/admin/applications", icon: FileText },
{ label: "Events", href: "/admin/events", icon: Calendar },
];

const systemNavItems = [
{ label: "Settings", href: "/admin/settings", icon: Settings },
Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you render as a non-clickable with "Coming Soon" badge. Don't want to leave it as a live link that 404s at this stage.

Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

<span
  className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-gray-300 cursor-not-allowed"
>
  <Icon className="h-4 w-4 shrink-0" />
  {label}
  <span className="ml-auto text-[10px] bg-gray-100 text-gray-400 rounded px-1.5 py-0.5">Soon</span>
</span>

];

export default function AdminLayout({
Expand All @@ -16,32 +28,99 @@ export default function AdminLayout({
children: React.ReactNode;
}) {
const pathname = usePathname();
const { data: session } = useSession();

const isActive = (href: string) =>
href === "/admin" ? pathname === "/admin" : pathname.startsWith(href);

const userInitial = session?.user?.name?.[0]?.toUpperCase() ?? "?";

return (
<div className="min-h-screen flex">
<aside className="w-64 border-r p-4">
<div className="text-lg font-semibold mb-6">BSL Admin</div>
<nav className="flex flex-col gap-1">
{navItems.map(({ label, href }) => {
const active =
href === "/admin"
? pathname === "/admin"
: pathname.startsWith(href);
return (
<Link
key={href}
href={href}
className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
active
? "bg-gray-100 text-gray-900"
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
}`}
>
{label}
</Link>
);
})}
</nav>
<aside className="w-64 border-r flex flex-col">
<div className="px-4 pt-5 pb-2">
<div className="flex items-center gap-1 leading-none">
<span className="text-base font-bold">Big</span>
<TrendingUp className="h-3.5 w-3.5 text-emerald-500" />
</div>
<div className="flex items-center gap-1.5 mt-0.5">
<span className="text-base font-bold leading-none">Strategy Labs</span>
<span className="h-2 w-2 rounded-full bg-red-500 shrink-0" />
</div>
</div>

<div className="px-3 mt-5 flex-1">
<p className="px-1 mb-1.5 text-[10px] font-semibold uppercase tracking-widest text-gray-400">
Main
</p>
<nav className="flex flex-col gap-0.5">
{mainNavItems.map(({ label, href, icon: Icon }) => {
const active = isActive(href);
return (
<Link
key={href}
href={href}
className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
active
? "bg-gray-900 text-white"
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
}`}
>
<Icon className="h-4 w-4 shrink-0" />
{label}
</Link>
);
})}
</nav>
</div>

<div className="px-3 mb-4">
<p className="px-1 mb-1.5 text-[10px] font-semibold uppercase tracking-widest text-gray-400">
System Preference
</p>
<nav className="flex flex-col gap-0.5">
{systemNavItems.map(({ label, href, icon: Icon }) => {
const active = isActive(href);
return (
<Link
key={href}
href={href}
className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
active
? "bg-gray-900 text-white"
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
}`}
>
<Icon className="h-4 w-4 shrink-0" />
{label}
</Link>
);
})}
</nav>
</div>

<div className="border-t px-4 py-3 flex items-center gap-3">
<div className="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center text-sm font-semibold text-gray-700 shrink-0 overflow-hidden">
{session?.user?.image ? (
<img
src={session.user.image}
referrerPolicy="no-referrer"
alt={session.user.name ?? "User"}
className="h-full w-full object-cover"
/>
Comment on lines +105 to +110
Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

use Image from next/image

and if using Image, have to specify width and height... so just replace with this:

<Image
  src={session.user.image}
  referrerPolicy="no-referrer"
  alt={session.user.name ?? "User"}
  width={32}
  height={32}
  className="h-full w-full object-cover"
/>

) : (
userInitial
)}
</div>
<div className="min-w-0">
<p className="text-sm font-semibold text-gray-900 truncate leading-tight">
{session?.user?.name ?? "Admin"}
</p>
<p className="text-xs text-gray-500 truncate">
{session?.user?.email ?? ""}
</p>
Comment on lines +119 to +121
Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also expose the role as a small badge

</div>
</div>
</aside>

<main className="flex-1 p-6">{children}</main>
Expand Down
1 change: 0 additions & 1 deletion tsconfig.tsbuildinfo
View file
Open in desktop
Copy link
Copy Markdown
Collaborator

@rohanarcot rohanarcot May 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can you remove this from the PR and add it to the .gitignore

add *.tsbuildinfo in gitignore

This file was deleted.