bubble/devthread.ru
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/devthread.ru.git synced 2026-10-11 10:19:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

amp sidebar

Browse Source
This commit is contained in:
Sergey Yarkov 2020-08-17 03:52:52 +03:00
parent 7bcded8428
commit 56c3b7d72f
2 changed files with 99 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gatsby-config.js
View File

@ -145,7 +145,7 @@ module.exports = {
resolve: `gatsby-plugin-amp`,
options: {
canonicalBaseUrl: 'https://devthread.ru/',
components: ['amp-form', 'amp-sidebar'],
components: ['amp-sidebar', 'amp-accordion'],
excludedPaths: ['/404*', '/'],
pathIdentifier: '/amp/',
relAmpHtmlPattern: '{{canonicalBaseUrl}}{{pathname}}{{pathIdentifier}}',

109
src/lib/amp.js
View File

@ -1,13 +1,78 @@
import React from 'react';
import { Helmet } from 'react-helmet'
import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
import LogoIcon from '../images/logo-icon.svg'
import TelegramIcon from "../images/telegram-icon.svg"
import TwitterIcon from "../images/twitter-icon.svg"
import YadzenIcon from "../images/yadzen-icon.svg"
const HeaderAMP = () => {
const {
siteMetadata: {
title,
menuLinks,
social: { twitter, telegram, yadzen },
},
} = useSiteMetadataQuery()
return (
<>
<Helmet>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<style jsx amp-custom>
{`
amp-sidebar {
height: 100%;
padding: 0px 24px;
padding-top: 25px;
background-color: rgba(7,11,14,.99);
width: 320px;
}
amp-sidebar nav li {
margin: 0 0 15px;
font-size: 24px;
font-weight: 600;
}
amp-sidebar nav li a {
color: #eee;
text-decoration: none;
}
amp-sidebar nav span {
color: #eee;
display: block;
margin-bottom: 20px;
font-weight: 700;
font-size: 16px;
}
amp-sidebar nav .amp-sidebar__toggleBtn {
background: none;
color: #fff;
font-size: 32px;
position: absolute;
right: 25px;
top: 10px;
}
amp-sidebar .amp-sidebar__social {
display: flex;
}
amp-sidebar .amp-sidebar__social a {
font-size: 0;
margin-right: 15px;
}
amp-sidebar .amp-sidebar__social svg .telegram-svg-social {
fill: #fff;
}
amp-sidebar .amp-sidebar__social svg .twitter-svg-social {
fill: #fff;
}
amp-sidebar .amp-sidebar__social svg .yadzen-svg-social {
fill: #fff;
}
amp-sidebar .amp-sidebar__social svg .yadzen-svg-social_black {
fill: black;
}
`}
</style>
</Helmet>
<header style={{ height: 60 }}>
<div className="header-content amp">
@ -15,21 +80,43 @@ const HeaderAMP = () => {
<LogoIcon />
<a href='/'>devthread.ru</a>
</div>
<div role="button" sdsd="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
{/* <button on='tap:sidebar1.toggle' aria-label="menu" className="header-content__button mobile">
<button on='tap:sidebar-header' aria-label="menu" className="header-content__button mobile">
<span />
<span />
<span />
</button> */}
</button>
</div>
</header>
<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
<div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
<ul class="sidebar">
<li><a href="/">Example 1</a></li>
<li><a href="/">Example 2</a></li>
<li><a href="/">Example 3</a></li>
</ul>
<amp-sidebar id="sidebar-header" layout="nodisplay" side="left">
<nav>
<div role='button' on='tap:sidebar-header.toggle' aria-label="menu" className='amp-sidebar__toggleBtn'>
✕
</div>
<span>{title}</span>
<ul>
{menuLinks.map((page, i) => {
return (
<li key={i}>
<a href={page.link}>{page.name}</a>
</li>
)
})}
</ul>
<div className="amp-sidebar__social">
<a href={yadzen} target="_blank" rel="noreferrer">
<YadzenIcon />
Ян.Дзен
</a>
<a href={telegram} target="_blank" rel="noreferrer">
<TelegramIcon />
Телеграмм
</a>
<a href={twitter} target="_blank" rel="noreferrer">
<TwitterIcon />
Твиттер
</a>
</div>
</nav>
</amp-sidebar>
</>
)