Miroirs/noc-book-2
1
0
Fork 0
mirror of https://github.com/nature-of-code/noc-book-2 synced 2024-11-17 07:49:05 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

add icon for external links

Browse source
This commit is contained in:
Yifei Gao 2024-04-17 14:02:13 -04:00
parent 38ca2239bf
commit 27b8f299fa
No known key found for this signature in database
1 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/OverlayNav.js
View file

@ -1,6 +1,6 @@
import React from 'react';
import { useStaticQuery, graphql, Link } from 'gatsby';
import { FiChevronDown } from 'react-icons/fi';
import { FiChevronDown, FiExternalLink } from 'react-icons/fi';
const OverlayNav = () => {
const data = useStaticQuery(graphql`
@ -56,7 +56,7 @@ const OverlayNav = () => {
>
<span>Chapters</span>
<FiChevronDown
className="h-5 w-5"
className="h-5 w-5 transition-transform"
style={{
// flip icon vertically when open
transform: `scaleY(${chapterListOpen ? -1 : 1})`,
@ -72,7 +72,7 @@ const OverlayNav = () => {
<li key={node.slug}>
<Link
to={`/${node.slug}/`}
className="flex items-center text-gray-700"
className="flex items-center text-gray-600"
activeClassName="font-bold"
>
<span className="w-8">{chapterNumber}</span>
@ -114,25 +114,28 @@ const OverlayNav = () => {
<li key="support">
<a
href="https://www.patreon.com/codingtrain"
className="text-lg text-gray-800"
className="flex items-center gap-1 text-lg text-gray-800"
>
Support
<FiExternalLink className="w-3.5 text-gray-400" />
</a>
</li>
<li key="github">
<a
href="https://github.com/nature-of-code/noc-book-2"
className="text-lg text-gray-800"
className="flex items-center gap-1 text-lg text-gray-800"
>
GitHub
<FiExternalLink className="w-3.5 text-gray-400" />
</a>
</li>
<li key="coding-train">
<a
href="https://thecodingtrain.com/"
className="text-lg text-gray-800"
className="flex items-center gap-1 text-lg text-gray-800"
>
Coding Train
<FiExternalLink className="w-3.5 text-gray-400" />
</a>
</li>
</ul>