amp sidebar

gatsby-config.js

@@ -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}}',

src/lib/amp.js

@@ -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:sidebar-header' aria-label="menu" className="header-content__button mobile">
-          {/* <button on='tap:sidebar1.toggle' aria-label="menu" className="header-content__button mobile">
             <span />
             <span />
             <span />
-          </button> */}
+          </button>
         </div>
       </header>
-      <amp-sidebar id="sidebar1" layout="nodisplay" side="left">
+      <amp-sidebar id="sidebar-header" layout="nodisplay" side="left">
-        <div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
+        <nav>
-        <ul class="sidebar">
+          <div role='button' on='tap:sidebar-header.toggle' aria-label="menu" className='amp-sidebar__toggleBtn'>
-          <li><a href="/">Example 1</a></li>
+            ✕
-          <li><a href="/">Example 2</a></li>
+          </div>
-          <li><a href="/">Example 3</a></li>
+          <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>
     </>
   )