sana137.in

Sana's gatsbyjs-based blog
git clone http://git.hanabi.in/repos/sana137.in.git
Log | Files | Refs | README | LICENSE

complexHeader.js (2385B)

      1 import PropTypes from 'prop-types';
      2 import React from 'react';
      3 import { graphql, useStaticQuery, Link } from 'gatsby';
      4 
      5 const ComplexHeader = ({ siteTitle, description, headerImg, hideName }) => {
      6   const data = useStaticQuery(graphql`
      7     query getHomeNameForComplex {
      8       site {
      9         siteMetadata {
     10           homeName
     11           siteUrl
     12         }
     13       }
     14     }
     15   `);
     16   const { homeName, siteUrl } = data.site.siteMetadata;
     17   return (
     18     <header
     19       style={{
     20         backgroundColor: `#86BD26`,
     21         backgroundImage: `url(${headerImg})`,
     22       }}
     23       className={'site-header outer'}
     24     >
     25       <div className={'inner'}>
     26         <TinyHeader homeName={homeName} siteUrl={siteUrl} />
     27         <div className={'site-header-content'}>
     28           <h1 style={{ margin: 0 }} className={'site-title'}>
     29             {siteTitle}
     30           </h1>
     31           <br />
     32           <h2 className={'site-description'}>{description}</h2>
     33           {!hideName && <h2>{homeName}</h2>}
     34         </div>
     35       </div>
     36     </header>
     37   );
     38 };
     39 
     40 ComplexHeader.propTypes = {
     41   siteTitle: PropTypes.string,
     42   description: PropTypes.string,
     43 };
     44 
     45 ComplexHeader.defaultProps = {
     46   siteTitle: `Sana's stories`,
     47   description: `Hi, I am Sana!`,
     48 };
     49 
     50 export default ComplexHeader;
     51 
     52 const TinyHeader = ({ homeName, siteUrl }) => {
     53   return (
     54     <nav className={'site-nav'}>
     55       <div className={'site-nav-left'}>
     56         <Link to={'/'} className={'site-nav-logo'}>
     57           {homeName}
     58         </Link>
     59         <ul className="nav" role="menu">
     60           <li className="nav-weblog" role="menuitem">
     61             <Link to={'/tags'} style={{ textTransform: `upper` }}>
     62               Topics
     63             </Link>
     64           </li>
     65         </ul>
     66       </div>
     67       <div className={'site-nav-right'}>
     68         <div className={'social-links'} />
     69         <a
     70           className={'rss-button'}
     71           href={`https://feedly.com/i/subscription/feed/${siteUrl}/rss.xml`}
     72           rel="noopener noreferrer"
     73           target="_blank"
     74           title="RSS"
     75         >
     76           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     77             <circle cx="6.18" cy="17.82" r="2.18"></circle>
     78             <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>
     79           </svg>
     80         </a>
     81       </div>
     82     </nav>
     83   );
     84 };