From 88c83142d0054baf23e4d74ab8ef1bba7b9e4505 Mon Sep 17 00:00:00 2001
From: Taly <vitalik7tv@yandex.ru>
Date: Tue, 21 Jun 2022 13:38:28 +0300
Subject: [PATCH] update layout

---
 src/backend/views/components/sidebar-right.twig  |  1 +
 src/backend/views/components/sidebar.twig        |  5 +----
 src/backend/views/layout.twig                    |  9 ++++++---
 src/frontend/js/modules/page.js                  |  2 +-
 src/frontend/js/modules/table-of-content.js      |  2 +-
 .../styles/components/sidebar-right.pcss         | 16 ++++++++++++++++
 src/frontend/styles/components/sidebar.pcss      | 10 +++++-----
 .../styles/components/table-of-content.pcss      |  9 +--------
 src/frontend/styles/layout.pcss                  |  8 +-------
 src/frontend/styles/main.pcss                    |  2 ++
 10 files changed, 35 insertions(+), 29 deletions(-)
 create mode 100644 src/backend/views/components/sidebar-right.twig
 create mode 100644 src/frontend/styles/components/sidebar-right.pcss
diff --git a/src/backend/views/components/sidebar-right.twig b/src/backend/views/components/sidebar-right.twig
new file mode 100644
index 0000000..31bf938
--- /dev/null
+++ b/src/backend/views/components/sidebar-right.twig
@@ -0,0 +1 @@
+<aside class="docs-sidebar--right" id="layout-sidebar-right"></aside>
diff --git a/src/backend/views/components/sidebar.twig b/src/backend/views/components/sidebar.twig
index d452cc8..c698add 100644
--- a/src/backend/views/components/sidebar.twig
+++ b/src/backend/views/components/sidebar.twig
@@ -1,6 +1,4 @@
-
-<div data-module="sidebar" class="docs-sidebar">
-
+<div class="docs-sidebar" data-module="sidebar">
   <div class="docs-sidebar__toggler">
     {{ svg('menu') }} Table of contents
   </div>
@@ -50,6 +48,5 @@
           </p>
         </a>
     </div>
-
   </aside>
 </div>
diff --git a/src/backend/views/layout.twig b/src/backend/views/layout.twig
index a483fcb..2beddad 100644
--- a/src/backend/views/layout.twig
+++ b/src/backend/views/layout.twig
@@ -16,18 +16,21 @@
     </script>
   <body>
     {% include "components/header.twig" with res.locals.isAuthorized %}
+
     <div class="docs">
-      
       {% include "components/sidebar.twig" %}
-      
+
       <div class="docs__content">
         <div class="docs__content-inner">
           {% block body %}{% endblock %}
         </div>
       </div>
-      <aside class="docs__aside-right" id="layout-right-column"></aside>
+
+      {% include "components/sidebar-right.twig" %}
     </div>
+
     <script src="/dist/main.bundle.js"></script>
+
     {% if config.yandexMetrikaId is not empty %}
       <script type="text/javascript" >
         (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
diff --git a/src/frontend/js/modules/page.js b/src/frontend/js/modules/page.js
index d1d623e..78882a8 100644
--- a/src/frontend/js/modules/page.js
+++ b/src/frontend/js/modules/page.js
@@ -48,7 +48,7 @@ export default class Page {
         'h2.block-header--anchor,' +
         'h3.block-header--anchor,' +
         'h4.block-header--anchor',
-      tocWrapperSelector: '#layout-right-column',
+      tocWrapperSelector: '#layout-sidebar-right',
     });
   }
 }
diff --git a/src/frontend/js/modules/table-of-content.js b/src/frontend/js/modules/table-of-content.js
index 9e07787..e1f50c5 100644
--- a/src/frontend/js/modules/table-of-content.js
+++ b/src/frontend/js/modules/table-of-content.js
@@ -100,7 +100,7 @@ export default class TableOfContent {
    */
   initIntersectionObserver() {
     const options = {
-      rootMargin: '-5% 0 -80%',
+      rootMargin: '-5% 0 -60%',
     };
 
     const callback = (entries) => {
diff --git a/src/frontend/styles/components/sidebar-right.pcss b/src/frontend/styles/components/sidebar-right.pcss
new file mode 100644
index 0000000..b76882d
--- /dev/null
+++ b/src/frontend/styles/components/sidebar-right.pcss
@@ -0,0 +1,16 @@
+.docs-sidebar--right {
+  @media (--mobile) {
+    display: none;
+  }
+
+  height: calc(100vh - var(--layout-height-header));
+  width: var(--layout-sidebar-width);
+  padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
+  box-sizing: border-box;
+
+  position: sticky;
+  top: var(--layout-height-header);
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss
index 5747c70..83be188 100644
--- a/src/frontend/styles/components/sidebar.pcss
+++ b/src/frontend/styles/components/sidebar.pcss
@@ -1,6 +1,6 @@
 .docs-sidebar {
   width: 100vw;
-    
+
   @media (--desktop) {
     width: var(--layout-sidebar-width);
   }
@@ -14,7 +14,7 @@
     display: flex;
     flex-direction: column;
     overflow: auto;
-  
+
     @media (--desktop) {
       height: calc(100vh - var(--layout-height-header));
       border-right: 1px solid var(--color-line-gray);
@@ -153,7 +153,7 @@
     height: 24px;
     transition-property: background-color;
     transition-duration: 0.1s;
-    
+
     @apply --squircle;
 
     @media (--can-hover) {
@@ -174,7 +174,7 @@
     color: var(--color-text-second);
     padding: 20px 15px;
     border-bottom: 1px solid var(--color-line-gray);
-    
+
     @media (--desktop) {
       display: none;
     }
@@ -213,4 +213,4 @@
     }
   }
 
-}
\ No newline at end of file
+}
diff --git a/src/frontend/styles/components/table-of-content.pcss b/src/frontend/styles/components/table-of-content.pcss
index bf26ba4..8a3bad3 100644
--- a/src/frontend/styles/components/table-of-content.pcss
+++ b/src/frontend/styles/components/table-of-content.pcss
@@ -1,12 +1,5 @@
 .table-of-content {
-  position: sticky;
-  max-height: 100vh;
-  overflow-y: auto;
-
-  margin-top: 30px;
-  top: 30px;
-  width: 300px;
-  border-left: 1px solid #E8E8EB;
+  border-left: 1px solid var(--color-line-gray);
   padding-left: 22px;
 
   &__header {
diff --git a/src/frontend/styles/layout.pcss b/src/frontend/styles/layout.pcss
index dca90fb..c5479c1 100644
--- a/src/frontend/styles/layout.pcss
+++ b/src/frontend/styles/layout.pcss
@@ -21,13 +21,7 @@
     }
 
     @media not (--mobile) {
-      margin-bottom: 80vh;
-    }
-  }
-
-  &__aside-right {
-    @media (--mobile) {
-      display: none;
+      margin-bottom: 50vh;
     }
   }
 
diff --git a/src/frontend/styles/main.pcss b/src/frontend/styles/main.pcss
index 9678cb4..05845d8 100644
--- a/src/frontend/styles/main.pcss
+++ b/src/frontend/styles/main.pcss
@@ -1,4 +1,5 @@
 @import 'normalize.css';
+
 @import './vars.pcss';
 @import './layout.pcss';
 @import './carbon.pcss';
@@ -9,6 +10,7 @@
 @import './components/auth.pcss';
 @import './components/button.pcss';
 @import './components/sidebar.pcss';
+@import './components/sidebar-right.pcss';
 @import './components/table-of-content.pcss';
 
 body {
