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.
45 lines
2.0 KiB
45 lines
2.0 KiB
2 years ago
|
---
|
||
|
|
import YouTubeBanner from "./YouTubeBanner.astro";
|
||
|
|
import Icon from "./Icon.astro";
|
||
|
|
---
|
||
|
|
|
||
|
|
<YouTubeBanner />
|
||
|
|
|
||
|
|
<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">
|
||
|
|
<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 flex items-center hidden'>
|
||
|
|
<button id='close-mobile-navigation' class='text-gray-400 hover:text-gray-50 block cursor-pointer absolute top-6 right-6 cursor-pointer'>
|
||
|
|
<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>
|