info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-17 14:41:52 +02:00
Code Issues Releases Wiki Activity

Refactor navigation

Browse Source
This commit is contained in:
Kamran Ahmed
2023-01-03 17:38:46 +04:00
parent b34376ce3e
commit bb2cc12ed0
3 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Navigation/Navigation.astro
View File

@@ -1,12 +1,9 @@
---
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='/'>
@@ -47,11 +44,11 @@ import Icon from '../Icon.astro';
<!-- 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'
class='fixed top-0 bottom-0 left-0 right-0 z-40 bg-slate-900 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'
class='text-gray-400 hover:text-gray-50 block cursor-pointer absolute top-6 right-6'
>
<Icon icon='close' />
</button>

4
src/components/Navigation/navigation.js
View File

@@ -23,11 +23,13 @@ class Navigation {
}
showNavigation() {
this.navigationEl.classList.toggle('hidden');
this.navigationEl.classList.remove('hidden');
this.navigationEl.classList.add('flex');
}
closeNavigation() {
this.navigationEl.classList.add('hidden');
this.navigationEl.classList.remove('flex');
}
onDOMLoaded() {

2
src/layouts/BaseLayout.astro
View File

@@ -5,6 +5,7 @@ import OpenSourceBanner from '../components/OpenSourceBanner.astro';
import Footer from '../components/Footer.astro';
import type { SponsorType } from '../components/Sponsor/Sponsor.astro';
import Sponsor from '../components/Sponsor/Sponsor.astro';
import YouTubeBanner from '../components/YouTubeBanner.astro';
export interface Props {
title: string;
@@ -26,6 +27,7 @@ const { title, sponsor } = Astro.props;
<slot name='after-header' />
</head>
<body>
<YouTubeBanner />
<Navigation />
<slot />