A documentation section has been added to the site.

app/application/resources/site/js/_choose-documentation-version.js

@@ -0,0 +1,8 @@
+let blockDocumentationVersion = document.querySelector('#documentation-version');
+blockDocumentationVersion.querySelector('.documentation-version__button').addEventListener('click', (e) => {
+    if (blockDocumentationVersion.classList.contains('active')) {
+        blockDocumentationVersion.classList.remove('active');
+    } else {
+        blockDocumentationVersion.classList.add('active');
+    }
+});

app/application/resources/site/js/app.js

@@ -1,2 +1,3 @@
 import './_menu.js';
 import './_choose-language.js';
+import './_choose-documentation-version.js';

app/application/resources/site/scss/app.scss

@@ -43,7 +43,8 @@ body {
     grid-template-columns: 1fr 1fr;
     grid-template-areas:
         "logo menu"
-        "language language";
+        "language language"
+        "documentation-version documentation-version";
     padding: 8px;
     box-shadow: 0 3px 9px rgba(0,0,0,0.48);
     background: #eee;
@@ -195,6 +196,77 @@ body.mobile-menu-open {
         border-radius: 5px 5px 0 0;
     }
 }
+
+#documentation-version {
+    grid-area: documentation-version;
+    margin-top: 10px;
+
+    .status {
+        font-size: 13px;
+        color: #444;
+        display: block;
+    }
+    .status.status__100 {
+        color: #0a6f4d;
+    }
+    .status.status__50 {
+        color: #0a53be;
+    }
+    .status.status__0 {
+        color: #6c0e22;
+    }
+}
+.documentation-version__block {
+    position: relative;
+}
+.documentation-version__button {
+    border: 0;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.48);
+    background: #ccc;
+    width: 100%;
+    cursor: pointer;
+    font-size: 18px;
+    position: relative;
+    padding: 10px;
+    border-radius: 5px;
+    color: #000;
+}
+.documentation-version__button__str {
+    position: absolute;
+    top: calc(50% - 8px);
+    right: 10px;
+}
+.documentation-version__list {
+    background: #ddd;
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    list-style: none;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.48);
+    padding: 10px 0;
+    margin: 0;
+    border-radius: 0 0 5px 5px;
+    z-index: 100;
+
+    a {
+        text-decoration: none;
+        color: #000;
+        font-size: 16px;
+        display: block;
+        padding: 10px 20px;
+    }
+}
+#documentation-version.active {
+    .documentation-version__list {
+        display: block;
+    }
+    .documentation-version__button {
+        border-radius: 5px 5px 0 0;
+    }
+}
+
 .main-container {
     display: flex;
     flex-direction: column;
@@ -225,6 +297,15 @@ body.mobile-menu-open {
         font-weight: bold;
     }
 }
+.alert-version {
+    padding: 20px;
+    margin-top: 20px;
+    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
+    font-size: 16px;
+}
+.alert-version.version-status-not-supported {
+    color: #6c0e22;
+}
 
 @media (min-width: 1000px) {
     body {
@@ -232,8 +313,8 @@ body.mobile-menu-open {
         margin: 0 auto;
     }
     .header {
-        grid-template-areas: "logo language";
-        grid-template-columns: 1fr 200px;
+        grid-template-areas: "logo documentation-version language";
+        grid-template-columns: 1fr 200px 200px;
     }
     .header_logo {
         width: 150px;
@@ -250,6 +331,7 @@ body.mobile-menu-open {
     .main-container {
         flex-direction: row;
     }
+
     #language {
         margin-right: 10px;
     }
@@ -259,6 +341,17 @@ body.mobile-menu-open {
     .language__button {
         padding: 7px 10px 7px 0;
     }
+
+    #documentation-version {
+        margin-right: 10px;
+    }
+    .documentation-version__block {
+        margin-top: 0px;
+    }
+    .documentation-version__button {
+        padding: 7px 10px 7px 0;
+    }
+
     #menu {
         flex: none;
         background: #eee;