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'; import Icon from '../Icon.astro';
--- ---
<script src='./navigation.js'></script> <script src='./navigation.js'></script>
<YouTubeBanner />
<div class='bg-slate-900 text-white py-5 sm:py-8'> <div class='bg-slate-900 text-white py-5 sm:py-8'>
<nav class='container flex items-center justify-between'> <nav class='container flex items-center justify-between'>
<a class='font-medium text-lg flex items-center text-white' href='/'> <a class='font-medium text-lg flex items-center text-white' href='/'>
@@ -47,11 +44,11 @@ import Icon from '../Icon.astro';
<!-- Mobile Navigation Items --> <!-- Mobile Navigation Items -->
<div <div
id='mobile-navigation' 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 <button
id='close-mobile-navigation' 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' /> <Icon icon='close' />
</button> </button>

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

@@ -23,11 +23,13 @@ class Navigation {
} }
showNavigation() { showNavigation() {
this.navigationEl.classList.toggle('hidden'); this.navigationEl.classList.remove('hidden');
this.navigationEl.classList.add('flex');
} }
closeNavigation() { closeNavigation() {
this.navigationEl.classList.add('hidden'); this.navigationEl.classList.add('hidden');
this.navigationEl.classList.remove('flex');
} }
onDOMLoaded() { 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 Footer from '../components/Footer.astro';
import type { SponsorType } from '../components/Sponsor/Sponsor.astro'; import type { SponsorType } from '../components/Sponsor/Sponsor.astro';
import Sponsor from '../components/Sponsor/Sponsor.astro'; import Sponsor from '../components/Sponsor/Sponsor.astro';
import YouTubeBanner from '../components/YouTubeBanner.astro';
export interface Props { export interface Props {
title: string; title: string;
@@ -26,6 +27,7 @@ const { title, sponsor } = Astro.props;
<slot name='after-header' /> <slot name='after-header' />
</head> </head>
<body> <body>
<YouTubeBanner />
<Navigation /> <Navigation />
<slot /> <slot />