Kamran Ahmed
10 months ago
parent
733e9cb5af
commit
468e92bac1
3 changed files with 114 additions and 51 deletions
@ -0,0 +1,89 @@ |
|||||||
|
import { |
||||||
|
CheckSquare, |
||||||
|
FileQuestion, |
||||||
|
Menu, |
||||||
|
Shirt, |
||||||
|
Waypoints, |
||||||
|
} from 'lucide-react'; |
||||||
|
import { useRef, useState } from 'react'; |
||||||
|
import { cn } from '../lib/classname.ts'; |
||||||
|
import { useOutsideClick } from '../hooks/use-outside-click.ts'; |
||||||
|
|
||||||
|
const links = [ |
||||||
|
{ |
||||||
|
link: '/roadmaps', |
||||||
|
label: 'Roadmaps', |
||||||
|
description: 'Step by step learning paths', |
||||||
|
Icon: Waypoints, |
||||||
|
}, |
||||||
|
{ |
||||||
|
link: '/best-practices', |
||||||
|
label: 'Best Practices', |
||||||
|
description: "Do's and don'ts", |
||||||
|
Icon: CheckSquare, |
||||||
|
}, |
||||||
|
{ |
||||||
|
link: '/questions', |
||||||
|
label: 'Questions', |
||||||
|
description: 'Test and Practice your knowledge', |
||||||
|
Icon: FileQuestion, |
||||||
|
}, |
||||||
|
{ |
||||||
|
link: 'https://cottonbureau.com/people/roadmapsh', |
||||||
|
label: 'Shop', |
||||||
|
description: 'Get some cool swag', |
||||||
|
Icon: Shirt, |
||||||
|
isExternal: true, |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
export function NavigationDropdown() { |
||||||
|
const dropdownRef = useRef<HTMLDivElement>(null); |
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
|
||||||
|
useOutsideClick(dropdownRef, () => { |
||||||
|
setIsOpen(false); |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="relative flex items-center" ref={dropdownRef}> |
||||||
|
<button |
||||||
|
className={cn('text-gray-400 hover:text-white', { |
||||||
|
'text-white': isOpen, |
||||||
|
})} |
||||||
|
onClick={() => setIsOpen(true)} |
||||||
|
onMouseOver={() => setIsOpen(true)} |
||||||
|
> |
||||||
|
<Menu className="h-5 w-5" /> |
||||||
|
</button> |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
'absolute left-0 top-full z-[999] mt-2 w-48 min-w-[320px] -translate-y-1 rounded-lg bg-slate-800 py-2 opacity-0 shadow-xl transition-all duration-100', |
||||||
|
{ |
||||||
|
'translate-y-2.5 opacity-100': isOpen, |
||||||
|
}, |
||||||
|
)} |
||||||
|
> |
||||||
|
{links.map((link) => ( |
||||||
|
<a |
||||||
|
href={link.link} |
||||||
|
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" |
||||||
|
> |
||||||
|
<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"> |
||||||
|
<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"> |
||||||
|
{link.label} |
||||||
|
</span> |
||||||
|
<span className="text-sm">{link.description}</span> |
||||||
|
</span> |
||||||
|
</a> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue