info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-16 06:04:24 +02:00
Code Issues Releases Wiki Activity

Make navigation interactive

Browse Source
This commit is contained in:
Kamran Ahmed
2023-01-03 17:08:14 +04:00
parent 9f4ffa211e
commit b34376ce3e
4 changed files with 129 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Navigation.astro
View File

@@ -1,45 +0,0 @@
---
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>

84
src/components/Navigation/Navigation.astro Normal file
View File

@@ -0,0 +1,84 @@
---
import YouTubeBanner from '../YouTubeBanner.astro';
import Icon from '../Icon.astro';
---
<script src='./navigation.js'></script>
<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>

44
src/components/Navigation/navigation.js Normal file
View File

@@ -0,0 +1,44 @@
class Navigation {
constructor() {
this.showNavigationId = 'show-mobile-navigation';
this.navigationId = 'mobile-navigation';
this.closeNavigationId = 'close-mobile-navigation';
this.init = this.init.bind(this);
this.onDOMLoaded = this.onDOMLoaded.bind(this);
this.showNavigation = this.showNavigation.bind(this);
this.closeNavigation = this.closeNavigation.bind(this);
}
get showNavigationEl() {
return document.getElementById(this.showNavigationId);
}
get navigationEl() {
return document.getElementById(this.navigationId);
}
get closeNavigationEl() {
return document.getElementById(this.closeNavigationId);
}
showNavigation() {
this.navigationEl.classList.toggle('hidden');
}
closeNavigation() {
this.navigationEl.classList.add('hidden');
}
onDOMLoaded() {
this.showNavigationEl.addEventListener('click', this.showNavigation);
this.closeNavigationEl.addEventListener('click', this.closeNavigation);
}
init() {
window.addEventListener('DOMContentLoaded', this.onDOMLoaded);
}
}
const navigation = new Navigation();
navigation.init();

2
src/layouts/BaseLayout.astro
View File

@@ -1,6 +1,6 @@
--- ---
import '../styles/global.css'; import '../styles/global.css';
import Navigation from '../components/Navigation.astro'; import Navigation from '../components/Navigation/Navigation.astro';
import OpenSourceBanner from '../components/OpenSourceBanner.astro'; import OpenSourceBanner from '../components/OpenSourceBanner.astro';
import Footer from '../components/Footer.astro'; import Footer from '../components/Footer.astro';
import type { SponsorType } from '../components/Sponsor/Sponsor.astro'; import type { SponsorType } from '../components/Sponsor/Sponsor.astro';