feat: add sign in/dashboard links to header navigation
- Add Sign In button to desktop header (shows Dashboard when logged in) - Add Sign In/Sign Up links to mobile menu - Fix auth config to use BETTER_AUTH_SECRET and BETTER_AUTH_URL env vars 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
6060492169
commit
ed3a215ee8
3 changed files with 48 additions and 2 deletions
|
|
@ -5,6 +5,7 @@ import { Header } from '@tpmjs/ui/Header/Header';
|
|||
import { Icon } from '@tpmjs/ui/Icon/Icon';
|
||||
import Link from 'next/link';
|
||||
import { useState } from 'react';
|
||||
import { useSession } from '@/lib/auth-client';
|
||||
import { MobileMenu } from './MobileMenu';
|
||||
|
||||
/**
|
||||
|
|
@ -12,6 +13,7 @@ import { MobileMenu } from './MobileMenu';
|
|||
*/
|
||||
export function AppHeader(): React.ReactElement {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
const { data: session } = useSession();
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -96,6 +98,19 @@ export function AppHeader(): React.ReactElement {
|
|||
>
|
||||
<Icon icon="github" size="md" />
|
||||
</a>
|
||||
{session ? (
|
||||
<Link href="/dashboard">
|
||||
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
|
||||
Dashboard
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<Link href="/sign-in">
|
||||
<Button variant="ghost" size="sm" className="text-foreground hover:text-foreground">
|
||||
Sign In
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
<Link href="/publish">
|
||||
<Button variant="default" size="sm">
|
||||
Publish Tool
|
||||
|
|
@ -118,7 +133,7 @@ export function AppHeader(): React.ReactElement {
|
|||
/>
|
||||
|
||||
{/* Mobile Menu Drawer */}
|
||||
<MobileMenu isOpen={mobileMenuOpen} onClose={() => setMobileMenuOpen(false)} />
|
||||
<MobileMenu isOpen={mobileMenuOpen} onClose={() => setMobileMenuOpen(false)} session={session} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { useEffect } from 'react';
|
|||
interface MobileMenuProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
session: { user: { name: string; email: string } } | null;
|
||||
}
|
||||
|
||||
const navLinks = [
|
||||
|
|
@ -28,7 +29,7 @@ const socialLinks = [
|
|||
{ href: 'https://github.com/tpmjs/tpmjs', icon: 'github' as const, label: 'GitHub' },
|
||||
];
|
||||
|
||||
export function MobileMenu({ isOpen, onClose }: MobileMenuProps): React.ReactElement | null {
|
||||
export function MobileMenu({ isOpen, onClose, session }: MobileMenuProps): React.ReactElement | null {
|
||||
// Lock body scroll when menu is open
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
|
|
@ -138,6 +139,34 @@ export function MobileMenu({ isOpen, onClose }: MobileMenuProps): React.ReactEle
|
|||
{/* Divider */}
|
||||
<div className="my-4 border-t border-border" />
|
||||
|
||||
{/* Auth links */}
|
||||
{session ? (
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="block px-3 py-3 text-foreground hover:bg-surface rounded-md transition-colors mb-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
Dashboard
|
||||
</Link>
|
||||
) : (
|
||||
<div className="space-y-1 mb-4">
|
||||
<Link
|
||||
href="/sign-in"
|
||||
className="block px-3 py-3 text-foreground hover:bg-surface rounded-md transition-colors"
|
||||
onClick={onClose}
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
href="/sign-up"
|
||||
className="block px-3 py-3 text-foreground hover:bg-surface rounded-md transition-colors"
|
||||
onClick={onClose}
|
||||
>
|
||||
Sign Up
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Publish button */}
|
||||
<Link href="/publish" onClick={onClose}>
|
||||
<Button variant="default" size="lg" className="w-full">
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import { prismaAdapter } from 'better-auth/adapters/prisma';
|
|||
import { sendVerificationEmail } from './email';
|
||||
|
||||
export const auth = betterAuth({
|
||||
secret: process.env.BETTER_AUTH_SECRET,
|
||||
baseURL: process.env.BETTER_AUTH_URL,
|
||||
database: prismaAdapter(prisma, {
|
||||
provider: 'postgresql',
|
||||
}),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue