Add Header component with logo, nav using router and base styling
This commit is contained in:
Moris Zen
38
src/components/Header.js
Normal file
38
src/components/Header.js
Normal file
@@ -0,0 +1,38 @@
|
||||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
import SaburlyLogo from "../images/Saburly-Logo.svg"
|
||||
|
||||
const Header = ({ siteTitle }) => (
|
||||
<header>
|
||||
<nav className="flex items-center justify-between flex-wrap p-6">
|
||||
<div class="flex items-center flex-no-shrink text-white mr-6">
|
||||
<Link to="/">
|
||||
<img src={SaburlyLogo} alt='Saburly Logo' style={{ maxWidth: '300px' }} />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="sm:invisible lg:visible w-full block flex-grow lg:flex lg:items-center lg:w-auto">
|
||||
<ul className="flex text-sm justify-center lg:flex-grow">
|
||||
<Link to="/services">
|
||||
<li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">What We Do
|
||||
</li>
|
||||
</Link>
|
||||
<Link to="/about">
|
||||
<li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">TEAM
|
||||
</li>
|
||||
</Link>
|
||||
<Link to="/blog">
|
||||
<li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">BLOG
|
||||
</li>
|
||||
</Link>
|
||||
</ul>
|
||||
<Link to="/contact" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-darkest border-teal-darkest hover:border-teal hover:text-white hover:bg-teal mt-4 lg:mt-0 uppercase mr-3 rounded-full">Contact</Link>
|
||||
|
||||
<Link to="/proposal" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-lightest border-grey-darkest hover:border-transparent hover:text-white hover:bg-white mt-4 lg:mt-0 uppercase bg-grey-darkest hover:bg-teal rounded-full ">Get a free proposal</Link>
|
||||
</div>
|
||||
</nav>
|
||||
{siteTitle}
|
||||
</header>
|
||||
)
|
||||
|
||||
export default Header
|
||||
@@ -1,13 +1,37 @@
|
||||
import React from 'react'
|
||||
import Link from 'gatsby-link'
|
||||
import SaburlyLogo from "../images/Saburly-Logo.svg"
|
||||
|
||||
const Header = ({ siteTitle }) => (
|
||||
<header>
|
||||
<nav>
|
||||
<Link to="/">
|
||||
{siteTitle}
|
||||
<nav className="flex items-center justify-between flex-wrap p-6">
|
||||
<div class="flex items-center flex-no-shrink text-white mr-6">
|
||||
<Link to="/">
|
||||
<img src={SaburlyLogo} alt='Saburly Logo' style={{ maxWidth: '300px' }} />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="sm:invisible lg:visible w-full block flex-grow lg:flex lg:items-center lg:w-auto">
|
||||
<ul className="flex text-sm justify-center lg:flex-grow">
|
||||
<Link to="/services">
|
||||
<li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">What We Do
|
||||
</li>
|
||||
</Link>
|
||||
<Link to="/about">
|
||||
<li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">TEAM
|
||||
</li>
|
||||
</Link>
|
||||
<Link to="/blog">
|
||||
<li className="no-underline block mt-4 lg:inline-block lg:mt-0 text-grey-darkest hover:text-teal uppercase mr-4">BLOG
|
||||
</li>
|
||||
</Link>
|
||||
</ul>
|
||||
<Link to="/contact" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-darkest border-teal-darkest hover:border-teal hover:text-white hover:bg-teal mt-4 lg:mt-0 uppercase mr-3 rounded-full">Contact</Link>
|
||||
|
||||
<Link to="/proposal" className="no-underline inline-block text-sm px-4 py-2 leading-none border rounded text-grey-lightest border-grey-darkest hover:border-transparent hover:text-white hover:bg-white mt-4 lg:mt-0 uppercase bg-grey-darkest hover:bg-teal rounded-full ">Get a free proposal</Link>
|
||||
</div>
|
||||
</nav>
|
||||
{siteTitle}
|
||||
</header>
|
||||
)
|
||||
|
||||
|
||||
34
src/images/Saburly-Logo.svg
Normal file
34
src/images/Saburly-Logo.svg
Normal file
@@ -0,0 +1,34 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="566px" height="72px" viewBox="0 0 566 72" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 46.1 (44463) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Group</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="Desktop-" transform="translate(-361.000000, -345.000000)" fill-rule="nonzero">
|
||||
<g id="Group" transform="translate(361.000000, 345.000000)">
|
||||
<g id="saburly_final-_1_">
|
||||
<g id="g26" transform="translate(283.000000, 36.000000) scale(1, -1) translate(-283.000000, -36.000000) ">
|
||||
<path d="M24.1147394,29.4028784 C24.0131766,29.3992297 23.9164502,29.4004459 23.8173057,29.4028784 L23.6190165,29.4040946 C23.5537262,29.4040946 23.489645,29.4089595 23.4255637,29.4150405 C23.3252101,29.4211216 23.2260655,29.4284189 23.1196665,29.4308514 C13.056493,29.6996351 4.86860274,38.1486892 4.86860274,48.2663919 C4.86860274,58.3828784 13.056493,66.8319324 23.1245028,67.1007162 C23.2260655,67.1031486 23.3252101,67.1104459 23.4255637,67.116527 C23.489645,67.1213919 23.5537262,67.127473 23.6190165,67.127473 L23.8173057,67.1286892 C23.868087,67.1286892 23.9176593,67.1286892 23.973277,67.1286892 C24.0288947,67.1286892 24.0893487,67.1286892 24.1618935,67.127473 L61.1150078,67.127473 L68.7781573,67.127473 L68.7962935,71.4936892 L23.6190165,71.4936892 C23.4799723,71.4936892 23.3421372,71.4851757 23.2055111,71.4754459 L23.0362399,71.4657162 C10.625033,71.1507162 0.528005268,60.7447703 0.528005268,48.2663919 C0.528005268,35.7880135 10.625033,25.3796351 23.0386581,25.0658514 L23.2055111,25.0561216 C23.3421372,25.0463919 23.4799723,25.0378784 23.6190165,25.0378784" id="path34" fill="#F9A933"></path>
|
||||
<path d="M23.6192583,24.7339459 C23.4717506,24.7339459 23.3290791,24.7424595 23.1839895,24.7521892 L23.0219728,24.7619189 C10.4560036,25.0805676 0.225977066,35.6239459 0.225977066,48.2665135 C0.225977066,60.9066486 10.4547945,71.4512432 23.0280182,71.7698919 L23.1876168,71.7784054 C23.3290791,71.7881351 23.4717506,71.7978649 23.6192583,71.7978649 L69.1000144,71.7978649 L69.0794601,66.8223243 L23.6204674,66.8223243 C23.5624316,66.8223243 23.5068139,66.8186757 23.4511962,66.8138108 L23.3689788,66.8077297 C23.2903886,66.8028649 23.2117984,66.798 23.13079,66.7955676 C13.2284242,66.5328649 5.17111457,58.220027 5.17111457,48.2665135 C5.17111457,38.3117838 13.226006,29.9989459 23.1283718,29.735027 C23.2105893,29.7325946 23.2915976,29.7277297 23.3713969,29.7228649 L23.4511962,29.718 C23.5068139,29.7131351 23.5624316,29.7082703 23.6192583,29.7082703 L23.8199656,29.7070541 C23.9191102,29.7034054 24.0110003,29.7046216 24.1053085,29.7070541 L24.1234447,29.0989459 C24.0170457,29.0952973 23.9142739,29.0965135 23.810293,29.0989459 L23.6180493,29.1001622 C23.5455045,29.1001622 23.4717506,29.1062432 23.4004148,29.1123243 C23.2613706,29.1196216 23.1888258,29.1244865 23.1138629,29.1269189 C12.8862545,29.3993514 4.56657453,37.9858378 4.56657453,48.2665135 C4.56657453,58.545973 12.8874636,67.1312432 23.115072,67.4036757 C23.1888258,67.4061081 23.2601616,67.4097568 23.3314973,67.4146216 L23.4076693,67.4194865 C23.4717506,67.4255676 23.5455045,67.4304324 23.6192583,67.4304324 L23.9735188,67.4328649 L24.1718079,67.4304324 L68.4773382,67.4304324 L68.4930562,71.1897568 L23.6192583,71.1897568 C23.4862595,71.1897568 23.3556789,71.180027 23.2250982,71.1715135 L23.0534089,71.1617838 C10.7957551,70.8504324 0.830517103,60.5807027 0.830517103,48.2665135 C0.830517103,35.9511081 10.7969642,25.6801622 23.0461544,25.3688108 L23.221471,25.3590811 C23.3556789,25.3505676 23.4862595,25.3420541 23.6192583,25.3420541 L23.6192583,24.7339459 Z" id="path38" fill="#F9A933"></path>
|
||||
<path d="M45.2099221,42.8038784 C45.3114849,42.807527 45.4082113,42.8063108 45.5073558,42.8038784 L45.705645,42.8026622 C45.7709353,42.8026622 45.8350165,42.7977973 45.8990978,42.7917162 C45.9994514,42.7856351 46.098596,42.7783378 46.204995,42.7759054 C56.2681685,42.5071216 64.4560588,34.0580676 64.4560588,23.9403649 C64.4560588,13.8238784 56.2681685,5.37482432 46.2001587,5.10604054 C46.098596,5.10360811 45.9994514,5.09631081 45.8990978,5.09022973 C45.8350165,5.08536486 45.7709353,5.07928378 45.705645,5.07928378 L45.5073558,5.07806757 C45.4565745,5.07806757 45.4070022,5.07806757 45.3513845,5.07806757 C45.2957668,5.07806757 45.2353128,5.07806757 45.162768,5.07928378 L8.2096537,5.07928378 L0.546504194,5.07928378 L0.528367992,0.713067568 L45.705645,0.713067568 C45.8446892,0.713067568 45.9825243,0.721581081 46.1191504,0.731310811 L46.2884216,0.741040541 C58.6996285,1.05604054 68.7966562,11.4619865 68.7966562,23.9403649 C68.7966562,36.4187432 58.6996285,46.8271216 46.2860034,47.1409054 L46.1191504,47.1506351 C45.9825243,47.1603649 45.8446892,47.1688784 45.705645,47.1688784" id="path42" fill="#7CCBC7"></path>
|
||||
<polygon id="path46" fill="#E94B80" points="143.554319 0.696162162 112.460407 61.146973 81.3664945 0.696162162 76.9702793 2.83305405 112.460407 71.8302162 147.950534 2.83305405"></polygon>
|
||||
<path d="M207.110218,47.7878108 L206.948201,47.7963243 C206.890165,47.799973 206.832129,47.8011892 206.774093,47.8036216 L206.774093,47.8145676 L206.521396,47.8145676 C206.518978,47.8145676 206.516559,47.8145676 206.512932,47.8145676 L206.512932,47.8145676 L206.424669,47.8145676 L206.424669,42.8232162 L206.774093,42.8232162 L206.774093,42.8256486 C206.849056,42.8207838 206.925228,42.8159189 207.005028,42.8134865 C216.906184,42.5495676 224.962285,34.2367297 224.962285,24.2832162 C224.962285,14.3284865 216.904975,6.01564865 207.0014,5.75172973 C206.916765,5.75051351 206.833338,5.74564865 206.679785,5.73591892 C206.624167,5.73105405 206.569759,5.72618919 206.511723,5.72618919 L165.868496,5.72618919 L165.868496,24.7575405 L161.032176,24.7575405 L161.032176,0.751864865 L206.512932,0.751864865 C206.659231,0.751864865 206.80432,0.760378378 206.943365,0.770108108 L207.104172,0.779837838 C219.677396,1.09848649 229.906213,11.6418649 229.906213,24.2832162 C229.906213,36.9245676 219.676187,47.4679459 207.110218,47.7878108" id="path50" fill="#E4E315"></path>
|
||||
<path d="M207.001521,29.7345405 C206.916886,29.7321081 206.833459,29.7272432 206.678697,29.7175135 C206.624288,29.7126486 206.56988,29.709 206.511844,29.709 L165.868617,29.709 L165.868617,66.8048108 L206.774214,66.8048108 L206.774214,66.8072432 C206.849177,66.8023784 206.925349,66.7987297 207.00394,66.7962973 C216.906305,66.5323784 224.961197,58.2195405 224.961197,48.2648108 C224.961197,38.3112973 216.903887,29.9984595 207.001521,29.7345405 M207.110339,71.7706216 L206.948322,71.7779189 C206.890286,71.7827838 206.831041,71.7827838 206.774214,71.7864324 L206.774214,71.7973784 L206.521517,71.7973784 C206.519098,71.7973784 206.51668,71.7973784 206.513053,71.7973784 L206.513053,71.7973784 L165.868617,71.7973784 L161.083078,71.7973784 L161.032297,71.7973784 L161.032297,24.7346757 L165.868617,24.7346757 L206.513053,24.7346757 C206.659352,24.7346757 206.804441,24.7431892 206.943486,24.7517027 L207.104293,24.7614324 C219.677517,25.0812973 229.906334,35.6246757 229.906334,48.2648108 C229.906334,60.9073784 219.676308,71.4507568 207.110339,71.7706216" id="path54" fill="#8A77B4"></path>
|
||||
<path d="M280.630871,0.713432432 C261.707558,0.713432432 246.312342,16.4634324 246.312342,35.8231622 C246.312342,36.0566757 246.299042,36.2999189 246.286951,36.5443784 C246.253097,37.1403243 246.221661,37.7204595 246.259142,38.3115405 L246.254306,71.8876216 L251.13778,71.8876216 L251.13778,38.151 C251.111181,37.6572162 251.136571,37.2850541 251.158335,36.9177568 C251.178889,36.5322162 251.197025,36.1697838 251.197025,35.8231622 C251.197025,19.1792432 264.401389,5.64032432 280.630871,5.64032432 C296.279994,5.64032432 309.247378,18.1576216 310.152979,34.1387027 L310.19046,35.1651892 C310.200133,35.468027 310.206178,35.693027 310.206178,35.9192432 C310.206178,36.1466757 310.200133,36.3741081 310.192878,36.5991081 L310.109452,38.7420811 L315.013481,38.9062703 L315.070307,36.8399189 C315.081189,36.5346486 315.089653,36.2293784 315.089653,35.9192432 C315.089653,35.6103243 315.081189,35.3050541 315.070307,34.9985676 L314.989299,33.2557297 C313.625457,14.9857297 298.536137,0.713432432 280.630871,0.713432432" id="path58" fill="#F9A933"></path>
|
||||
<path d="M265.375182,45.7493108 C265.375182,47.8910676 267.100539,49.6266081 269.229729,49.6266081 C271.35771,49.6266081 273.083067,47.8910676 273.083067,45.7493108 C273.083067,43.6075541 271.35771,41.8720135 269.229729,41.8720135 C267.100539,41.8720135 265.375182,43.6075541 265.375182,45.7493108" id="path62" fill="#F9A933"></path>
|
||||
<path d="M289.277123,45.7493108 C289.277123,47.8910676 291.00248,49.6266081 293.13167,49.6266081 C295.259651,49.6266081 296.985009,47.8910676 296.985009,45.7493108 C296.985009,43.6075541 295.259651,41.8720135 293.13167,41.8720135 C291.00248,41.8720135 289.277123,43.6075541 289.277123,45.7493108" id="path66" fill="#F9A933"></path>
|
||||
<path d="M375.094967,24.7517027 C374.955923,24.741973 374.810833,24.7334595 374.664534,24.7334595 L368.471626,24.7334595 L392.040224,0.713189189 L398.653892,0.713189189 L375.281165,24.7626486 C375.271493,24.7626486 375.264238,24.7614324 375.255775,24.7614324 L375.094967,24.7517027 Z" id="path70" fill="#A2ABD6"></path>
|
||||
<polygon id="path74" fill="#A2ABD6" points="334.065439 66.8049324 334.019494 66.8049324 334.019494 29.7079054 334.042467 29.7079054 334.042467 59.8518243 363.594802 29.7079054 370.433359 29.7079054"></polygon>
|
||||
<polygon id="path78" fill="#A2ABD6" points="329.183536 24.7338243 329.183536 43.4173378 329.131546 0.713554054 334.027111 0.713554054 334.042829 24.7338243 334.019857 24.7338243"></polygon>
|
||||
<path d="M375.261457,71.7696486 L375.09944,71.7781622 C375.041405,71.7818108 374.983369,71.783027 374.925333,71.7854595 L374.925333,71.7964054 L374.672635,71.7964054 C374.670217,71.7964054 374.667799,71.7964054 374.664172,71.7964054 L374.664172,71.7964054 L334.019736,71.7964054 L329.235406,71.7964054 L329.183416,71.7964054 L329.183416,43.4172162 L329.183416,24.7337027 L334.019736,24.7337027 L334.042708,24.7337027 L334.042708,29.708027 L334.019736,29.708027 L334.019736,66.8050541 L334.065681,66.8050541 L374.925333,66.8050541 L374.925333,66.8074865 C375.000296,66.8026216 375.077677,66.7977568 375.156267,66.7953243 C385.057424,66.5314054 393.113524,58.2185676 393.113524,48.2650541 C393.113524,38.3103243 385.056215,29.9974865 375.15264,29.7335676 C375.068004,29.7323514 374.984578,29.7274865 374.831025,29.7177568 C374.775407,29.7128919 374.720998,29.708027 374.662963,29.708027 L370.432391,29.708027 L363.595044,29.708027 L368.471264,24.7337027 L374.664172,24.7337027 C374.81047,24.7337027 374.95556,24.7422162 375.094604,24.7519459 L375.255412,24.7616757 C375.263875,24.7616757 375.272339,24.7628919 375.280802,24.7628919 C387.841935,25.0961351 398.057453,35.6322162 398.057453,48.2650541 C398.057453,60.9064054 387.827426,71.4497838 375.261457,71.7696486" id="path82" fill="#40C1D5"></path>
|
||||
<path d="M424.109018,66.6887838 L450.729334,66.6887838 L450.729334,5.69310811 L424.109018,5.69310811 L424.109018,66.6887838 Z M419.20378,0.713918919 L455.634572,0.713918919 L455.634572,71.6704054 L419.20378,71.6704054 L419.20378,0.713918919 Z" id="path84" fill="#E4E315"></path>
|
||||
<polygon id="path88" fill="#E94B80" points="488.017605 0.713432432 419.204022 0.713432432 419.204022 23.3265405 424.109259 23.3265405 424.109259 5.69383784 483.206675 5.68410811 483.206675 23.3265405 488.017605 23.3265405"></polygon>
|
||||
<polygon id="path92" fill="#F9A933" points="546.636588 0.828 546.636588 71.4171892 541.73135 71.4171892 541.73135 5.77313514 512.013371 5.69894595 512.018207 0.828"></polygon>
|
||||
<path d="M565.954786,69.5254865 L565.89675,71.5918378 L560.99393,71.4276486 L561.076148,69.2846757 C561.083402,69.0596757 561.090656,68.8334595 561.090656,68.6048108 C561.090656,68.3785946 561.083402,68.1535946 561.073729,67.8507568 L561.036248,66.8242703 C560.131856,50.8444054 547.163263,38.3258919 531.515349,38.3258919 C515.284658,38.3258919 502.080294,51.866027 502.080294,68.5099459 C502.080294,68.8553514 502.062158,69.219 502.041604,69.6033243 C502.021049,69.9706216 501.995659,70.3427838 502.022259,70.8365676 L502.022259,71.8217027 L497.14362,71.8217027 L497.14362,70.9971081 C497.10493,70.406027 497.137575,69.8258919 497.17022,69.2299459 C497.18352,68.9854865 497.195611,68.7422432 497.195611,68.5099459 C497.195611,49.1502162 512.590827,33.399 531.515349,33.399 C549.419407,33.399 564.509935,47.6712973 565.872568,65.9412973 L565.954786,67.6841351 C565.964458,67.9906216 565.974131,68.2958919 565.974131,68.6048108 C565.974131,68.9149459 565.964458,69.2214324 565.954786,69.5254865" id="path96" fill="#40C1D5"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
@@ -2,8 +2,8 @@ import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import Helmet from 'react-helmet'
|
||||
|
||||
import Header from '../components/header'
|
||||
import Footer from '../components/footer'
|
||||
import Header from '../components/Header'
|
||||
import Footer from '../components/Footer'
|
||||
import "../styles/index.css"
|
||||
|
||||
const Layout = ({ children, data }) => (
|
||||
@@ -14,7 +14,7 @@ const Layout = ({ children, data }) => (
|
||||
{ name: 'description', content: 'We code & design great software' },
|
||||
{ name: 'keywords', content: 'software, design, coding, programming, code, consulting' },
|
||||
]}
|
||||
/>t
|
||||
/>
|
||||
<Header siteTitle={data.site.siteMetadata.title} />
|
||||
<main>
|
||||
{children()}
|
||||
|
||||
19806
src/styles/index.css
19806
src/styles/index.css
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user