diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
index c85f11b3b..4e4c567fa 100644
--- a/src/components/Navigation/Navigation.astro
+++ b/src/components/Navigation/Navigation.astro
@@ -46,6 +46,22 @@ import { RoadmapDropdownMenu } from '../RoadmapDropdownMenu/RoadmapDropdownMenu'
Teams
+
+ Changelog
+
+
+
+
+
+
+
+
diff --git a/src/components/NavigationDropdown.tsx b/src/components/NavigationDropdown.tsx
index 4f2dc56bc..d9f7c99c7 100644
--- a/src/components/NavigationDropdown.tsx
+++ b/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"
>
diff --git a/src/components/RoadmapDropdownMenu/RoadmapDropdownMenu.tsx b/src/components/RoadmapDropdownMenu/RoadmapDropdownMenu.tsx
index 209404e32..0d7847bf3 100644
--- a/src/components/RoadmapDropdownMenu/RoadmapDropdownMenu.tsx
+++ b/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() {
-
+
-
+
{link.label}
{link.description}