computer-scienceangular-roadmapbackend-roadmapblockchain-roadmapdba-roadmapdeveloper-roadmapdevops-roadmapfrontend-roadmapgo-roadmaphactoberfestjava-roadmapjavascript-roadmapnodejs-roadmappython-roadmapqa-roadmapreact-roadmaproadmapstudy-planvue-roadmapweb3-roadmap
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
2.4 KiB
82 lines
2.4 KiB
--- |
|
import Icon from './Icon.astro'; |
|
--- |
|
|
|
<div class='bg-slate-900 text-white py-5 sm:py-8'> |
|
<nav class='container flex items-center justify-between'> |
|
<a class='font-medium text-lg flex items-center text-white' href='/'> |
|
<Icon icon='logo' /> |
|
<span class='ml-3'>roadmap.sh</span> |
|
</a> |
|
|
|
<!-- Desktop navigation items --> |
|
<ul class='hidden sm:flex space-x-5'> |
|
<li> |
|
<a href='/roadmaps/' class='text-gray-400 hover:text-white'>Roadmaps</a> |
|
</li> |
|
<li> |
|
<a href='/guides/' class='text-gray-400 hover:text-white'>Guides</a> |
|
</li> |
|
<li> |
|
<a href='/videos/' class='text-gray-400 hover:text-white'>Videos</a> |
|
</li> |
|
<li> |
|
<a |
|
class='py-2 px-4 text-sm font-regular rounded-full bg-gradient-to-r from-blue-500 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white' |
|
href='/signup/' |
|
> |
|
Subscribe |
|
</a> |
|
</li> |
|
</ul> |
|
|
|
<!-- Mobile Navigation Button --> |
|
<button |
|
id='show-mobile-navigation' |
|
class='text-gray-400 hover:text-gray-50 block sm:hidden cursor-pointer' |
|
aria-label='Menu' |
|
onclick="document.getElementById('mobile-navigation').classList.remove('hidden');" |
|
> |
|
<Icon icon='hamburger' /> |
|
</button> |
|
|
|
<!-- Mobile Navigation Items --> |
|
<div |
|
id='mobile-navigation' |
|
class='fixed top-0 bottom-0 left-0 right-0 z-40 bg-slate-900 items-center flex hidden' |
|
> |
|
<button |
|
id='close-mobile-navigation' |
|
class='text-gray-400 hover:text-gray-50 block cursor-pointer absolute top-6 right-6' |
|
aria-label='Close Menu' |
|
onclick="document.getElementById('mobile-navigation').classList.add('hidden');" |
|
> |
|
<Icon icon='close' /> |
|
</button> |
|
<ul class='flex flex-col gap-2 md:gap-3 items-center w-full'> |
|
<li> |
|
<a href='/roadmaps/' class='text-xl md:text-lg hover:text-blue-300' |
|
>Roadmaps</a |
|
> |
|
</li> |
|
<li> |
|
<a href='/guides/' class='text-xl md:text-lg hover:text-blue-300' |
|
>Guides</a |
|
> |
|
</li> |
|
<li> |
|
<a href='/videos/' class='text-xl md:text-lg hover:text-blue-300' |
|
>Videos</a |
|
> |
|
</li> |
|
<li> |
|
<a |
|
href='/signup/' |
|
class='text-xl md:text-lg text-red-300 hover:text-red-400' |
|
>Subscribe</a |
|
> |
|
</li> |
|
</ul> |
|
</div> |
|
</nav> |
|
</div>
|
|
|