feat: split MegaMenu into specialized components

Replace the generic MegaMenu component with two specialized menu
components to improve maintainability and separation of concerns.

- Delete generic MegaMenu.tsx
- Add StackMegaMenu.tsx for AI coding stack navigation
- Add RankingMegaMenu.tsx for ranking-related navigation
- Update Header to support multiple mega menu types
- Add megaMenuType configuration to menu items

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ericyangpan

src/components/Header.tsx

@@ -6,7 +6,8 @@ import { useTranslations } from 'next-intl'
 import { memo, useCallback, useEffect, useMemo, useState } from 'react'
 import { Link } from '@/i18n/navigation'
 import SearchDialog from './controls/SearchDialog'
-import { MegaMenu } from './MegaMenu'
+import { RankingMegaMenu } from './RankingMegaMenu'
+import { StackMegaMenu } from './StackMegaMenu'
 
 // Menu item configuration type
 interface MenuItem {
@@ -15,6 +16,7 @@ interface MenuItem {
   namespace?: 'header' | 'community'
   isExternal?: boolean
   hasMegaMenu?: boolean
+  megaMenuType?: 'aiCodingStack' | 'ranking'
 }
 
 // Common CSS class names - extracted to constants for DRY
@@ -27,7 +29,7 @@ function Header() {
   const params = useParams()
   const locale = params?.locale as string | undefined
   const [isMenuOpen, setIsMenuOpen] = useState(false)
-  const [isMegaMenuOpen, setIsMegaMenuOpen] = useState(false)
+  const [activeMegaMenu, setActiveMegaMenu] = useState<'aiCodingStack' | 'ranking' | null>(null)
   const [isSearchDialogOpen, setIsSearchDialogOpen] = useState(false)
   const tHeader = useTranslations('header')
   const tCommunity = useTranslations('community')
@@ -41,8 +43,16 @@ function Header() {
         translationKey: 'aiCodingStack',
         namespace: 'header',
         hasMegaMenu: true,
+        megaMenuType: 'aiCodingStack',
       },
       { href: '/ai-coding-landscape', translationKey: 'landscape', namespace: 'header' },
+      {
+        href: '#',
+        translationKey: 'ranking',
+        namespace: 'header',
+        hasMegaMenu: true,
+        megaMenuType: 'ranking',
+      },
       { href: '/curated-collections', translationKey: 'collections', namespace: 'header' },
     ],
     []
@@ -57,12 +67,12 @@ function Header() {
     setIsMenuOpen(false)
   }, [])
 
-  const handleMegaMenuOpen = useCallback(() => {
-    setIsMegaMenuOpen(true)
+  const handleMegaMenuOpen = useCallback((type: 'aiCodingStack' | 'ranking') => {
+    setActiveMegaMenu(type)
   }, [])
 
   const handleMegaMenuClose = useCallback(() => {
-    setIsMegaMenuOpen(false)
+    setActiveMegaMenu(null)
   }, [])
 
   // Handle keyboard shortcuts for search
@@ -92,23 +102,29 @@ function Header() {
   // Render desktop menu item
   const renderDesktopMenuItem = useCallback(
     (item: MenuItem) => {
-      if (item.hasMegaMenu) {
+      if (item.hasMegaMenu && item.megaMenuType) {
+        const isActive = activeMegaMenu === item.megaMenuType
         return (
           <li
             key={item.href}
             className="relative"
-            onMouseEnter={handleMegaMenuOpen}
+            onMouseEnter={() => handleMegaMenuOpen(item.megaMenuType!)}
             onMouseLeave={handleMegaMenuClose}
           >
             <Link
               href={item.href}
               className={DESKTOP_LINK_CLASSES}
-              aria-expanded={isMegaMenuOpen}
+              aria-expanded={isActive}
               aria-haspopup="true"
             >
               {getMenuText(item)}
             </Link>
-            <MegaMenu isOpen={isMegaMenuOpen} onClose={handleMegaMenuClose} />
+            {item.megaMenuType === 'aiCodingStack' && (
+              <StackMegaMenu isOpen={isActive} onClose={handleMegaMenuClose} />
+            )}
+            {item.megaMenuType === 'ranking' && (
+              <RankingMegaMenu isOpen={isActive} onClose={handleMegaMenuClose} />
+            )}
           </li>
         )
       }
@@ -127,7 +143,7 @@ function Header() {
         </li>
       )
     },
-    [isMegaMenuOpen, handleMegaMenuOpen, handleMegaMenuClose, getMenuText]
+    [activeMegaMenu, handleMegaMenuOpen, handleMegaMenuClose, getMenuText]
   )
 
   // Render mobile menu item

src/components/RankingMegaMenu.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import { useTranslations } from 'next-intl'
+import { memo } from 'react'
+import { Link } from '@/i18n/navigation'
+
+interface RankingMegaMenuProps {
+  isOpen: boolean
+  onClose: () => void
+}
+
+// Shared CSS classes for reusability
+const featuredLinkClass =
+  'block p-[var(--spacing-sm)] border border-[var(--color-border)] hover:border-[var(--color-border-strong)] hover:bg-[var(--color-hover)] transition-all'
+
+export const RankingMegaMenu = memo(function RankingMegaMenu({
+  isOpen,
+  onClose,
+}: RankingMegaMenuProps) {
+  const tNav = useTranslations('header')
+
+  if (!isOpen) return null
+
+  return (
+    <div className="absolute top-full left-[-2rem] pt-[var(--spacing-xs)] w-[400px] z-50">
+      {/* Invisible bridge area to prevent menu from closing */}
+      <div className="h-[var(--spacing-xs)]" />
+
+      <div className="bg-[var(--color-bg)] border border-[var(--color-border)] shadow-lg animate-fadeIn">
+        <div className="p-[var(--spacing-md)]">
+          {/* Open Source Ranking Link */}
+          <Link href="/open-source-rank" onClick={onClose} className={featuredLinkClass}>
+            <div className="font-medium mb-[var(--spacing-xs)]">{tNav('openSourceRank')}</div>
+            <div className="text-xs text-[var(--color-text-secondary)]">
+              {tNav('openSourceRankDesc')}
+            </div>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+})

src/components/MegaMenu.tsx src/components/StackMegaMenu.tsxsrc/components/MegaMenu.tsx renamed to src/components/StackMegaMenu.tsx

@@ -4,7 +4,7 @@ import { useTranslations } from 'next-intl'
 import { memo, useMemo } from 'react'
 import { Link } from '@/i18n/navigation'
 
-interface MegaMenuProps {
+interface StackMegaMenuProps {
   isOpen: boolean
   onClose: () => void
 }
@@ -80,7 +80,7 @@ const MenuColumn = memo(function MenuColumn({
   )
 })
 
-export const MegaMenu = memo(function MegaMenu({ isOpen, onClose }: MegaMenuProps) {
+export const StackMegaMenu = memo(function StackMegaMenu({ isOpen, onClose }: StackMegaMenuProps) {
   const tStacks = useTranslations('stacks')
   const tNav = useTranslations('header')
 
@@ -101,17 +101,7 @@ export const MegaMenu = memo(function MegaMenu({ isOpen, onClose }: MegaMenuProp
   )
 
   // Memoize featured links configuration
-  const featuredLinks = useMemo<FeaturedLink[]>(
-    () => [
-      {
-        href: '/open-source-rank',
-        titleKey: 'openSourceRank',
-        descKey: 'openSourceRankDesc',
-        marginBottom: 'md',
-      },
-    ],
-    []
-  )
+  const featuredLinks = useMemo<FeaturedLink[]>(() => [], [])
 
   // Memoize menu columns configuration
   const menuColumns = useMemo<MenuColumn[]>(
@@ -137,23 +127,22 @@ export const MegaMenu = memo(function MegaMenu({ isOpen, onClose }: MegaMenuProp
           ))}
 
           {/* Two Column Grid */}
-          <div className="grid grid-cols-2 gap-[var(--spacing-md)] mb-[var(--spacing-sm)]">
+          <div className="grid grid-cols-2 gap-[var(--spacing-md)]">
             {menuColumns.map(column => (
               <MenuColumn key={column.titleKey} {...column} onClose={onClose} tNav={tNav} />
             ))}
           </div>
 
-          {/* All Vendors */}
-          <Link
-            href="/vendors"
-            onClick={onClose}
-            className="flex items-center justify-between px-[var(--spacing-sm)] py-[var(--spacing-xs)] border border-[var(--color-border)] hover:border-[var(--color-border-strong)] hover:bg-[var(--color-hover)] transition-all group"
-          >
-            <span className="text-sm font-medium">{tStacks('vendors')}</span>
-            <span className="text-[var(--color-text-muted)] group-hover:text-[var(--color-text)] group-hover:translate-x-1 transition-all">
-              →
-            </span>
-          </Link>
+          {/* All Vendors - separated by top border */}
+          <div className="mt-[var(--spacing-md)] pt-[var(--spacing-sm)] border-t border-[var(--color-border)]">
+            <Link
+              href="/vendors"
+              onClick={onClose}
+              className="block px-[var(--spacing-xs)] py-1 text-sm hover:bg-[var(--color-hover)] transition-colors"
+            >
+              {tStacks('vendors')}
+            </Link>
+          </div>
         </div>
       </div>
     </div>