tinyHeader.js (1710B)
1 import React from 'react'; 2 import { graphql, useStaticQuery, Link } from 'gatsby'; 3 4 const TinyHeader = () => { 5 const data = useStaticQuery(graphql` 6 query getSiteUrl { 7 site { 8 siteMetadata { 9 homeName 10 siteUrl 11 } 12 } 13 } 14 `); 15 const { homeName, siteUrl } = data.site.siteMetadata; 16 return ( 17 <header className={'site-header outer'}> 18 <div className={'inner'}> 19 <nav className={'site-nav'}> 20 <div className={'site-nav-left'}> 21 <Link to={'/'} className={'site-nav-logo'}> 22 {homeName} 23 </Link> 24 <ul className="nav" role="menu"> 25 <li className="nav-weblog" role="menuitem"> 26 <Link to={'/tags'} style={{ textTransform: `upper` }}> 27 Topics 28 </Link> 29 </li> 30 </ul> 31 </div> 32 <div className={'site-nav-right'}> 33 <div className={'social-links'}> 34 <a 35 className={'rss-button'} 36 href={`https://feedly.com/i/subscription/feed/${siteUrl}/rss.xml`} 37 rel="noopener noreferrer" 38 target="_blank" 39 title="RSS" 40 > 41 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> 42 <circle cx="6.18" cy="17.82" r="2.18"></circle> 43 <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"></path> 44 </svg> 45 </a> 46 </div> 47 </div> 48 </nav> 49 </div> 50 </header> 51 ); 52 }; 53 54 export default TinyHeader;