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

Refactor navigation

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

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

Write Preview
Loading…
Cancel
Save