Render footer in sidebar for article view

js/components/PageItem.js

@@ -2,6 +2,7 @@ import React from 'react';
 import Badge from './Badge';
 import ItemList from './ItemList';
 import Link from './Link';
+import FooterEnd from './FooterEnd';
 import SetTitle from './SetTitle';
 import { createAnimation, createAnimationRunner } from '../animation';
 
@@ -58,14 +59,25 @@ class PageItem extends React.Component {
           opacity: '1',
         },
         400 + 100 * i
-      )))
+      ))),
+      footer: createAnimation({
+          transition: 'opacity 150ms ease-out, transform 300ms ease-out',
+          transform: 'translateX(-40px)',
+          opacity: '0',
+        }, {
+          transition: 'opacity 150ms ease-out, transform 300ms ease-out',
+          transform: 'translateX(0px)',
+          opacity: '1',
+        },
+        600 + itemsInRing.length * 100
+      ),
     };
 
     this.animationsOut = {
       background: createAnimation(
         this.animationsIn.background.stateB,
         this.animationsIn.background.stateA,
-        0
+        300 + itemsInRing.length * 50
       ),
       navHeader: createAnimation(
         this.animationsIn.navHeader.stateB,
@@ -92,8 +104,17 @@ class PageItem extends React.Component {
           transform: 'translateX(40px)',
           opacity: '0',
         },
-        100 + 100 * i
+        100 + 50 * i
-      )))
+      ))),
+      footer: createAnimation(
+          this.animationsIn.text.stateB,
+          {
+            transition: 'opacity 150ms ease-out, transform 300ms ease-out',
+            transform: 'translateX(40px)',
+            opacity: '0',
+          },
+          200 + itemsInRing.length * 50
+      ),
     };
 
     if (props.leaving) { // entering from an other page
@@ -168,6 +189,9 @@ class PageItem extends React.Component {
                   </div>
                 </div>
               </ItemList>
+              <div className="item-page__footer" style={this.getAnimationState('footer')}>
+                <FooterEnd modifier="in-sidebar" />
+              </div>
             </div>
           </div>
           <div className="item-page__content" style={this.getAnimationState('background')}>

styles/components/footer.css

@@ -1,7 +1,8 @@
 .footer {
   border-top: 1px solid var(--color-gray-normal);
-  transition: opacity 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98) 600ms;
+  transition: opacity 450ms cubic-bezier(0.24, 1.12, 0.71, 0.98) 1500ms;
   opacity: 1;
+  backface-visibility: hidden;
 
   &.is-hidden {
     opacity: 0;

styles/components/item-page.css

@@ -5,6 +5,7 @@
   position: absolute;
   top: 0;
   left: 0;
+  z-index: 10;
 
   &__nav,
   &__content {
@@ -20,6 +21,7 @@
   }
 
   &__nav {
+    background: var(--color-gray-dark);
     flex: 0 0 calc((100vw - 1200px) / 2 + 400px);
     &__inner {
       box-sizing: border-box;

styles/components/page.css

@@ -30,6 +30,5 @@
 
   &__footer {
     flex: 0 0 auto;
-     z-index: 200;
   }
 }