github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make navigation interactive

Browse Source
astro
Kamran Ahmed 2 years ago
parent 9f4ffa211e
commit b34376ce3e
4 changed files with 129 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      src/components/Navigation.astro
  2. 84
      src/components/Navigation/Navigation.astro
  3. 44
      src/components/Navigation/navigation.js
  4. 2
      src/layouts/BaseLayout.astro

45
src/components/Navigation.astro
Unescape 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
Unescape 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
Unescape 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
Unescape View File

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

Write Preview
Loading…
Cancel
Save