Highlight official roadmaps, add changelog

src/components/Navigation/Navigation.astro

@@ -46,6 +46,22 @@ import { RoadmapDropdownMenu } from '../RoadmapDropdownMenu/RoadmapDropdownMenu'
         <a href='/teams' class='group relative text-gray-400 hover:text-white'>
           Teams
         </a>
+        <a
+          href='/changelog'
+          class='group relative text-blue-300 hover:text-white hidden md:block ml-0.5'
+        >
+          Changelog
+
+          <span class='absolute -right-[11px] top-0'>
+            <span class='relative flex h-2 w-2'>
+              <span
+                class='absolute inline-flex h-full w-full animate-ping rounded-full bg-sky-400 opacity-75'
+              ></span>
+              <span class='relative inline-flex h-2 w-2 rounded-full bg-sky-500'
+              ></span>
+            </span>
+          </span>
+        </a>
       </div>
     </div>
 

src/components/NavigationDropdown.tsx

@@ -6,7 +6,7 @@ import {
   Menu,
   Shirt,
   Video,
-  Waypoints,
+  Map,
 } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { cn } from '../lib/classname.ts';
@@ -22,31 +22,36 @@ const links = [
     link: '/roadmaps',
     label: 'Official Roadmaps',
     description: 'Made by subject matter experts',
-    Icon: Waypoints,
+    Icon: Map,
+    isHighlighted: true,
   },
   {
     link: '/projects',
     label: 'Projects',
     description: 'Skill-up with real-world projects',
     Icon: FolderKanban,
+    isHighlighted: false,
   },
   {
     link: '/best-practices',
     label: 'Best Practices',
     description: "Do's and don'ts",
     Icon: CheckSquare,
+    isHighlighted: false,
   },
   {
     link: '/questions',
     label: 'Questions',
     description: 'Test and Practice your knowledge',
     Icon: FileQuestion,
+    isHighlighted: false,
   },
   {
     link: '/guides',
     label: 'Guides',
     description: 'In-depth articles and tutorials',
     Icon: BookOpenText,
+    isHighlighted: false,
   },
   {
     link: 'https://youtube.com/@roadmapsh',
@@ -54,6 +59,7 @@ const links = [
     description: 'Animated and interactive content',
     Icon: Video,
     isExternal: true,
+    isHighlighted: false,
   },
   {
     link: 'https://cottonbureau.com/people/roadmapsh',
@@ -61,12 +67,14 @@ const links = [
     description: 'Get some cool swag',
     Icon: Shirt,
     isExternal: true,
+    isHighlighted: false,
   },
   {
     link: '/advertise',
     label: 'Advertise',
     description: 'Promote your product or service',
     Icon: Menu,
+    isHighlighted: false,
   },
 ];
 
@@ -115,7 +123,13 @@ export function NavigationDropdown() {
             target={link.isExternal ? '_blank' : undefined}
             rel={link.isExternal ? 'noopener noreferrer' : undefined}
             key={link.link}
-            className="group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700"
+            className={cn(
+              'group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700',
+              {
+                'mx-2 mb-1 rounded-md border border-slate-600 bg-slate-700 pl-2.5 text-gray-200 hover:bg-slate-600':
+                  link.isHighlighted,
+              },
+            )}
             role="menuitem"
           >
             <span className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-slate-600 transition-colors group-hover:bg-slate-500 group-hover:text-slate-100">

src/components/RoadmapDropdownMenu/RoadmapDropdownMenu.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, Globe, Menu, Sparkles, Waypoints } from 'lucide-react';
+import { ChevronDown, Globe, Menu, Sparkles, Map } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { useOutsideClick } from '../../hooks/use-outside-click';
 import { cn } from '../../lib/classname';
@@ -13,19 +13,22 @@ const links = [
     link: '/roadmaps',
     label: 'Official Roadmaps',
     description: 'Made by subject matter experts',
-    Icon: Waypoints,
+    Icon: Map,
+    isHighlighted: true,
   },
   {
     link: '/ai/explore',
     label: 'AI Roadmaps',
     description: 'Generate roadmaps with AI',
     Icon: Sparkles,
+    isHighlighted: false,
   },
   {
     link: '/community',
     label: 'Community Roadmaps',
     description: 'Made by community members',
     Icon: Globe,
+    isHighlighted: false,
   },
 ];
 
@@ -73,14 +76,34 @@ export function RoadmapDropdownMenu() {
           <a
             href={link.link}
             key={link.link}
-            className="group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700"
+            className={cn(
+              'group flex items-center gap-3 px-4 py-2.5 text-gray-400 transition-colors hover:bg-slate-700',
+              {
+                'mx-2 mb-1 rounded-md border border-slate-600 bg-slate-700 text-gray-200 hover:bg-slate-600':
+                  link.isHighlighted,
+              },
+            )}
             role="menuitem"
           >
-            <span className="flex h-[40px] w-[40px] items-center justify-center rounded-full bg-slate-600 transition-colors group-hover:bg-slate-500 group-hover:text-slate-100">
+            <span
+              className={cn(
+                'flex h-[40px] w-[40px] items-center justify-center rounded-full bg-slate-600 transition-colors group-hover:bg-slate-500 group-hover:text-slate-100',
+                {
+                  'bg-slate-500 text-slate-100': link.isHighlighted,
+                },
+              )}
+            >
               <link.Icon className="inline-block h-5 w-5" />
             </span>
             <span className="flex flex-col">
-              <span className="font-medium text-slate-300 transition-colors group-hover:text-slate-100">
+              <span
+                className={cn(
+                  'font-medium text-slate-300 transition-colors group-hover:text-slate-100',
+                  {
+                    'text-white': link.isHighlighted,
+                  },
+                )}
+              >
                 {link.label}
               </span>
               <span className="text-sm">{link.description}</span>