import styles from './index.module.scss' import ActiveLink from '../ActiveLink' import { Svg } from 'react-optimized-image' export default function HeaderNav() { return ( <header className={styles.header}> <nav className={styles.nav}> <div className={styles.navPart1}> <ActiveLink href="/" activeClassName={styles.active}><a className={styles.link}>Home</a></ActiveLink> <ActiveLink href="/posts" activeClassName={styles.active}><a className={styles.link}>Posts</a></ActiveLink> <ActiveLink href="/tools" activeClassName={styles.active}><a className={styles.link}>Toolbox</a></ActiveLink> </div> <div className={styles.navPart2}> <a href="https://social.treehouse.systems/@lukegb" className={styles.link} aria-label="Mastodon" rel="me" > <Svg src={require('./assets/mastodon.svg')} viewBox="0 0 16 16" /> </a> <a href="https://twitter.com/lukegb" className={styles.link} aria-label="Twitter" rel="me" > <Svg src={require('./assets/iconmonstr-twitter-1.svg')} viewBox="0 0 24 24" /> </a> <a href="https://github.com/lukegb" className={styles.link} aria-label="GitHub" rel="me" > <Svg src={require('./assets/iconmonstr-github-1.svg')} viewBox="0 0 24 24" /> </a> </div> </nav> </header> ) }