Copied relevant changes from 5x docs.

_includes/nav.html

@@ -1,4 +1,4 @@
-<ul>
+<ul class="aside-navlist-override">
 
 {% unless include.recursed %}
   <li>

_includes/template/bodycontents.html

@@ -1,4 +1,3 @@
-{% include template/notification.html %}
 {% include template/menu.html css="body > *" %}
 
 <style>
@@ -18,7 +17,36 @@
     }
 
     .modern-navigation-extra {
-        padding: 0 0 20px 0;
+        padding: 0 0 26px 0;
+    }
+
+    .modern-navigation-extra > div:first-child {
+        margin: 0 0 16px;
+    }
+
+    .modern-navigation-extra a {
+        font-size: 14px;
+        font-weight: 900;
+    }
+
+    .modern-navigation-extra a svg {
+        display: inline-block;
+        width: 14px;
+        height: 14px;
+        vertical-align: text-top;
+        margin: 0.5px 8px 0 0;
+    }
+
+    .modern-navigation-extra a.back-home {
+        color: #1976D2;
+    }
+
+    .modern-navigation-extra a.back-home:hover path {
+        fill: rgb(145, 180, 225);
+    }
+
+    .modern-navigation-extra a.back-home:hover {
+        color: rgb(145, 180, 225);
     }
 
     @media screen and (max-width: 1126px) {
@@ -72,6 +100,25 @@
         }
     }
 
+    aside>ul.aside-navlist-override {
+        margin: 0 !important;
+    }
+
+    @media screen and (max-width: 1126px) {
+        aside div#optimize-bottom,
+        aside div#optimize-top {
+            display: none;
+            visibility: hidden;
+        }    
+    }
+
+    aside div#optimize-top {
+        margin: 32px 0 24px 0;
+    }
+
+    aside div#optimize-bottom {
+        margin: 0 0 348px 0;
+    }
 </style>
 
 <div class="modern-main {{ page.type }} {{ page.class }}">
@@ -91,13 +138,40 @@
         <div id="side-nav-controller">Expand Menu</div>
 
         <div class="modern-navigation-extra">
-            <a href="https://www.tiny.cloud/get-tiny/"
-               data-marketing="docs-nav-get-tiny">Get TinyMCE</a>
+            <div>
+                <a href="/get-tiny/" data-marketing="docs-nav-get-tiny">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+                        <path fill="#3F3F3F" fill-rule="evenodd" d="M8 12c-.3 0-.5-.1-.7-.3L1.6 6 3 4.6l4 4V0h2v8.6l4-4L14.4 6l-5.7 5.7c-.2.2-.4.3-.7.3zm-7 2h14v2H1v-2z"/>
+                    </svg>Get TinyMCE
+                </a>
+            </div>
+            <div>
+                <a class="back-home" href="/" data-marketing="docs-nav-back-home">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+                        <path fill="#1976D2" fill-rule="evenodd" d="M6.25 10.5L1 5.25 6.25 0l1.361 1.361-2.917 2.917h5.445C12.86 4.278 15 6.417 15 9.138 15 11.862 12.861 14 10.139 14H2.36v-1.944h7.778c1.653 0 2.917-1.264 2.917-2.917 0-1.653-1.264-2.917-2.917-2.917H4.694L7.611 9.14 6.25 10.5z"/>
+                    </svg>Return to Website
+                </a>
+            </div>
         </div>
 
         {% assign nav = site.data.nav | array_concat:site.data.nav_api %}
         {% include nav.html links=nav preceding_address="/" %}
-
+        <div id="optimize-top">
+            <a href="/features/">
+                <img
+                    title="Power meets beauty with TinyMCE 5."
+                    src="{{ site.baseurl }}/images/optimize/editor/mini/primary.gif"
+                />
+            </a>
+        </div>
+        <div id="optimize-bottom">
+            <a href="/signup/">
+                <img
+                    title="Create your Tiny Account. Get the most out of TinyMCE with a 30-day free trial of all premium plugins."
+                    src="{{ site.baseurl }}/images/optimize/account/standard/base.gif"
+                />
+            </a>
+        </div>
     </aside>
 
     <main class="modern-main-container">

_includes/template/menu.html

@@ -176,6 +176,7 @@
 </style>
 
 <header class="modern-header">
+    {% include template/notification.html %}
     <div class="nav-container">
         <div class="nav-container__menu-container">
             <div class="nav-container__homepage-link-container">

_includes/template/notification.html

@@ -1,29 +1,29 @@
 <div class="tiny-news-docs">
-    <div>
-        <a href="https://go.tiny.cloud/blog/"
-           data-marketing="tiny-news-blog-link"
-           class="tiny-news-prefix">
-            TINY BLOG
-        </a>
-        &gt;
-        <span class="tiny-news-text">Important changes to Tiny Cloud pricing</span>
-        &gt;
-        <a href="https://go.tiny.cloud/blog/important-changes-to-tiny-cloud-pricing-metric/"
-           data-marketing="tiny-news-pricing-blog-link" class="tiny-news-link">
-            Find out more
-        </a>
+        <div>
+            <a href="https://go.tiny.cloud/blog/"
+               data-marketing="tiny-news-blog-link"
+               class="tiny-news-prefix">
+                TINY BLOG
+            </a>
+            &gt;
+            <span class="tiny-news-text">Important changes to Tiny Cloud pricing</span>
+            &gt;
+            <a href="https://go.tiny.cloud/blog/important-changes-to-tiny-cloud-pricing-metric/"
+               data-marketing="tiny-news-pricing-blog-link" class="tiny-news-link">
+                Find out more
+            </a>
+        </div>
+    
+        <div>
+            <a class="utility-link" href="/" data-marketing="tiny-docs-news-back-home">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+                    <path fill="#FFFFFF" fill-rule="evenodd" d="M6.25 10.5L1 5.25 6.25 0l1.361 1.361-2.917 2.917h5.445C12.86 4.278 15 6.417 15 9.138 15 11.862 12.861 14 10.139 14H2.36v-1.944h7.778c1.653 0 2.917-1.264 2.917-2.917 0-1.653-1.264-2.917-2.917-2.917H4.694L7.611 9.14 6.25 10.5z"/>
+                </svg>Return to Website
+            </a>
+        </div>
     </div>
 
-    <div>
-        <a class="utility-link" href="/" data-marketing="tiny-docs-news-back-home">
-            Return to Tiny.cloud
-        </a>
-    </div>
-</div>
-
-
 <style type="text/css">
-
     .tiny-news-docs {
         display: flex;
         align-content: flex-start;
@@ -31,8 +31,8 @@
         border-bottom: 1px solid #D2D2D2;
         padding: 0.5rem 2rem 0.5rem;
         text-align: center;
-        color: #4A4A4A;
-        background-color: white;
+        color: white;
+        background-color: #1976D2;
         box-sizing: border-box;
         position: relative;
         z-index: 1000;
@@ -41,27 +41,33 @@
     }
 
     .tiny-news-docs a {
-        color: rgb(25, 118, 210);
-        font-weight: 600;
+        color: white;
+        font-weight: 900;
         text-decoration: none;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-        transition: border-bottom 0.25s ease 0s;
     }
 
-        .tiny-news-docs a:hover {
-            border-bottom: 1px solid rgb(255, 255, 255);
-        }
+    .tiny-news-docs a svg {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        vertical-align: text-top;
+        margin: 0 4px 0 0;
+    }
+
+    .tiny-news-docs a:hover {
+        border-bottom: 1px solid rgb(255, 255, 255);
+    }
 
     .tiny-news-docs .utility-link {
         margin: 0 1rem 0 0;
         height: 1rem;
         line-height: 1rem;
         font-weight: 900;
-        color: #4A4A4A;
+        color: white;
     }
 
     .tiny-news-docs .utility-link:hover{
-        color: #1976D2;
+        color: white;
     }
 
     .tiny-news-docs .utility-link:last-child {
@@ -75,6 +81,4 @@
             position: absolute;
         }
     }
-
-
 </style>