move Resources and AI Tools under Roadmap & add FAQ link into header

Author: nikohoffren

components/data/roadmapList.ts

@@ -19,5 +19,7 @@ export const roadmapList = [
     link: '/roadmaps/open-source-terminology'
   },
   { name: 'Discussions', link: '/community/discussions' },
-  { name: 'Events', link: '/community/events' }
+  { name: 'Events', link: '/community/events' },
+  { name: 'Resources', link: '/resources' },
+  { name: 'AI Tools', link: '/ai' }
 ]

components/layout/Header.tsx

@@ -318,23 +318,17 @@ const Header = () => {
 
           <div className='hidden items-center md:flex'>
             <div className='flex items-center space-x-4'>
-              <Link
-                href='/resources'
-                className='mx-2 font-medium text-gray-700 transition-colors hover:text-modern-purple'
-              >
-                Resources
-              </Link>
               <Link
                 href='/contributors'
                 className='mx-2 font-medium text-gray-700 transition-colors hover:text-modern-purple'
               >
                 Contributors
               </Link>
               <Link
-                href='/ai'
+                href='/faq'
                 className='mx-2 font-medium text-gray-700 transition-colors hover:text-modern-purple'
               >
-                AI Tools
+                FAQ
               </Link>
 
               <div className='h-5 border-r border-gray-300'></div>
@@ -494,13 +488,40 @@ const Header = () => {
               )}
             </div>
 
-            <Link
-              href='/resources'
-              onClick={() => setIsOpen(false)}
-              className='block px-3 py-2 text-base font-medium text-gray-700 hover:text-modern-purple'
-            >
-              Resources
-            </Link>
+            <div className='block px-3 py-2 text-base font-medium text-gray-700'>
+              <button
+                onClick={toggleRoadmapDropdown}
+                className='flex w-full items-center justify-between'
+              >
+                <span>Roadmap</span>
+                <svg
+                  className={`ml-1 h-5 w-5 transition-transform ${isRoadmapDropdownOpen ? 'rotate-180' : ''}`}
+                  fill='none'
+                  viewBox='0 0 24 24'
+                  stroke='currentColor'
+                >
+                  <path
+                    strokeLinecap='round'
+                    strokeLinejoin='round'
+                    strokeWidth={2}
+                    d='M19 9l-7 7-7-7'
+                  />
+                </svg>
+              </button>
+              {isRoadmapDropdownOpen && (
+                <div className='space-y-2 pl-4 pt-2'>
+                  {roadmapList.map(roadmap => (
+                    <button
+                      key={roadmap.name}
+                      onClick={() => navigateToRoadmap(roadmap.link)}
+                      className='block w-full py-1 text-left text-sm text-gray-600 hover:text-modern-purple'
+                    >
+                      {roadmap.name}
+                    </button>
+                  ))}
+                </div>
+              )}
+            </div>
 
             <Link
               href='/contributors'
@@ -510,14 +531,6 @@ const Header = () => {
               Contributors
             </Link>
 
-            <Link
-              href='/ai'
-              onClick={() => setIsOpen(false)}
-              className='block px-3 py-2 text-base font-medium text-gray-700 hover:text-modern-purple'
-            >
-              AI Tools
-            </Link>
-
             <Link
               href='/faq'
               onClick={() => setIsOpen(false)}
@@ -527,6 +540,23 @@ const Header = () => {
             </Link>
 
             <div className='flex items-center space-x-2 px-3 py-2'>
+              <a
+                href='https://github.com/fork-commit-merge/fork-commit-merge'
+                target='_blank'
+                rel='noopener noreferrer'
+                className='flex items-center text-gray-700 transition-colors hover:text-modern-purple'
+              >
+                <svg
+                  className='mr-1 h-5 w-5'
+                  viewBox='0 0 24 24'
+                  fill='currentColor'
+                >
+                  <path d='M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z' />
+                </svg>
+                {starCount !== null && (
+                  <span className='text-sm font-medium'>{starCount}</span>
+                )}
+              </a>
               <ThemeSelector />
               {isLoaded && !user && (
                 <Link
@@ -537,6 +567,11 @@ const Header = () => {
                   Sign In
                 </Link>
               )}
+              {isLoaded && user && (
+                <div className='flex items-center'>
+                  <UserButton afterSignOutUrl='/' />
+                </div>
+              )}
             </div>
           </div>
         </div>