mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 18:05:11 +03:00
Anthony Lio
819df2ae4d
## What kind of change does this PR introduce? feature reworks the www header dropdowns ## What is the current behavior? menu dropdown navigation animation between items feels scattered ## What is the new behavior? - adds dropdown card resize with a transition and the content crossfades when switching - removes dead zone between or under nav items - sets card is centered on the screen + enhance tablet bp - adds slight ui refresh spacing, colors, sizes | state | preview | | -------|------| | before | <video src="https://github.com/user-attachments/assets/acd8e161-a697-4070-b751-4f4e9f1eab19" /> | | after | <video src="https://github.com/user-attachments/assets/fe403afd-0074-4cb5-9223-fd6cdd2f7d5a" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Navigation dropdowns now provide smoother directional transitions, keyboard-focus states, and reduced-motion support. * Product navigation is organized into clearer Products and Modules sections. * Navigation layouts adapt earlier across screen sizes with responsive two-column arrangements. * **Style** * Updated dropdown spacing, colors, borders, menu item styling, and customer imagery sizing. * Refined blog loading placeholders with slightly tighter spacing. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
81 lines
3.5 KiB
TypeScript
81 lines
3.5 KiB
TypeScript
import staticContent from '.generated/staticContent/_index.json'
|
|
import { data as DevelopersData } from 'data/Developers'
|
|
import { ChevronRight } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
|
|
type LinkProps = {
|
|
text: string
|
|
description?: string
|
|
url?: string
|
|
icon?: any
|
|
svg?: any
|
|
}
|
|
|
|
export const DevelopersDropdown = () => {
|
|
const { jobsCount, latestBlogPosts } = staticContent
|
|
|
|
return (
|
|
<div className="flex flex-col lg:flex-row">
|
|
<div className="w-full lg:w-[470px] px-6 py-5 bg-surface-75 grid gap-3 grid-cols-2">
|
|
{DevelopersData['navigation'].map((column) => (
|
|
<div key={column.label} className="p-0 flex flex-col gap-6">
|
|
<label className="text-foreground-lighter text-xs uppercase tracking-widest font-mono">
|
|
{column.label}
|
|
</label>
|
|
<ul className="flex flex-col gap-4">
|
|
{column.links.map(({ icon: Icon, ...link }: LinkProps) => (
|
|
<li key={link.text}>
|
|
<Link
|
|
href={link.url!}
|
|
className="flex group items-center gap-2 text-foreground-light text-sm hover:text-foreground focus-visible:text-foreground focus-ring rounded-sm"
|
|
>
|
|
{Icon && <Icon size={16} strokeWidth={1.3} />}
|
|
<span>{link.text}</span>
|
|
{link.text === 'Careers' && jobsCount > 0 && (
|
|
<span className="text-xs flex items-center justify-center text-foreground-lighter -ml-1">
|
|
({jobsCount})
|
|
</span>
|
|
)}
|
|
<ChevronRight
|
|
strokeWidth={2}
|
|
className="w-3 -ml-1 transition-all will-change-transform -translate-x-1 opacity-0 group-hover:translate-x-0 group-hover:opacity-100"
|
|
/>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="bg-surface-75 flex flex-col w-full lg:flex-1 border-t lg:border-t-0 lg:border-l">
|
|
<div className="flex-col gap-2 p-5">
|
|
<Link
|
|
href="/blog"
|
|
className="group flex items-center gap-1 text-foreground-lighter hover:text-foreground text-xs uppercase tracking-widest font-mono mb-5 focus-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative rounded-xs focus-visible:text-foreground"
|
|
>
|
|
<span>Blog</span>
|
|
<ChevronRight className="h-3 w-3 transition-transform will-change-transform -translate-x-1 group-hover:translate-x-0" />
|
|
</Link>
|
|
<ul className="flex flex-col gap-5">
|
|
{latestBlogPosts?.slice(0, 2).map((post: any) => (
|
|
<li key={post.title}>
|
|
<Link
|
|
href={post.url}
|
|
className="group flex flex-col focus-ring focus-visible:ring-offset-4 focus-visible:ring-offset-background-alternative rounded-sm"
|
|
>
|
|
<p className="text-foreground-light mb-0 line-clamp-2 group-hover:text-foreground group-focus-visible:text-foreground">
|
|
{post.title}
|
|
</p>
|
|
<p className="text-sm line-clamp-2 text-foreground-lighter leading-relaxed mb-0! group-hover:text-foreground-light group-focus-visible:text-foreground-light">
|
|
{post.description}
|
|
</p>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|