From 43d94ae6ff105cf1e6ff0f3891b3a11c4dea19ca Mon Sep 17 00:00:00 2001
From: "Umang G. Patel" <23169768+robonetphy@users.noreply.github.com>
Date: Sun, 5 Jun 2022 00:39:05 +0530
Subject: [PATCH] right aside added with style

---
 src/backend/views/components/leftAside.twig  | 16 +++---
 src/backend/views/components/rightAside.twig | 52 +++++++-----------
 src/backend/views/layout.twig                |  6 +-
 src/frontend/styles/components/aside.pcss    | 58 +++++++++++++++++++-
 4 files changed, 88 insertions(+), 44 deletions(-)

diff --git a/src/backend/views/components/leftAside.twig b/src/backend/views/components/leftAside.twig
index a99d375..c15d325 100644
--- a/src/backend/views/components/leftAside.twig
+++ b/src/backend/views/components/leftAside.twig
@@ -1,19 +1,19 @@
-<div class="docs-aside-toggler" onclick="document.querySelector('.docs-aside').classList.toggle('docs-aside--toggled')">
+<div class="docs-aside-toggler" onclick="document.querySelector('.docs-left-aside').classList.toggle('docs-left-aside--toggled')">
 	{{ svg('menu') }}
 	Table of contents
 </div>
-<div class="docs-aside">
-	<div class="docs-aside__section-wrapper">
+<div class="docs-left-aside">
+	<div class="docs-left-aside__section-wrapper">
 		{% for firstLevelPage in menu %}
-			<section class="docs-aside__section">
-				<a {% if page is defined and page._id == firstLevelPage._id%} class="docs-aside__section-title docs-aside__current" {% else %} class="docs-aside__section-title" {% endif %} {% if firstLevelPage.uri %} href="/{{ firstLevelPage.uri }}" {% else %} href="/page/{{ firstLevelPage._id }}" {% endif %}>
+			<section class="docs-left-aside__section">
+				<a {% if page is defined and page._id == firstLevelPage._id%} class="docs-left-aside__section-title docs-left-aside__current" {% else %} class="docs-left-aside__section-title" {% endif %} {% if firstLevelPage.uri %} href="/{{ firstLevelPage.uri }}" {% else %} href="/page/{{ firstLevelPage._id }}" {% endif %}>
 					{{ firstLevelPage.title | striptags }}
 				</a>
 				{% if firstLevelPage.children is not empty %}
-					<ul class="docs-aside__section-list">
+					<ul class="docs-left-aside__section-list">
 						{% for child in firstLevelPage.children %}
 							<li>
-								<a {% if page is defined and page._id == child._id %} class="docs-aside__current" {% endif %} {% if child.uri %} href="/{{ child.uri }}" {% else %} href="/page/{{ child._id }}" {% endif %}>
+								<a {% if page is defined and page._id == child._id %} class="docs-left-aside__current" {% endif %} {% if child.uri %} href="/{{ child.uri }}" {% else %} href="/page/{{ child._id }}" {% endif %}>
 									{{ child.title | striptags }}
 								</a>
 							</li>
@@ -23,7 +23,7 @@
 			</section>
 		{% endfor %}
 	</div>
-	<a class="docs-aside__logo-wrapper" href="https://github.com/codex-team/codex.docs">
+	<a class="docs-left-aside__logo-wrapper" href="https://github.com/codex-team/codex.docs">
 		<div class="logo">
 			{{ svg('aside-logo') }}
 		</div>
diff --git a/src/backend/views/components/rightAside.twig b/src/backend/views/components/rightAside.twig
index a99d375..91363ea 100644
--- a/src/backend/views/components/rightAside.twig
+++ b/src/backend/views/components/rightAside.twig
@@ -1,34 +1,22 @@
-<div class="docs-aside-toggler" onclick="document.querySelector('.docs-aside').classList.toggle('docs-aside--toggled')">
-	{{ svg('menu') }}
-	Table of contents
-</div>
-<div class="docs-aside">
-	<div class="docs-aside__section-wrapper">
-		{% for firstLevelPage in menu %}
-			<section class="docs-aside__section">
-				<a {% if page is defined and page._id == firstLevelPage._id%} class="docs-aside__section-title docs-aside__current" {% else %} class="docs-aside__section-title" {% endif %} {% if firstLevelPage.uri %} href="/{{ firstLevelPage.uri }}" {% else %} href="/page/{{ firstLevelPage._id }}" {% endif %}>
-					{{ firstLevelPage.title | striptags }}
-				</a>
-				{% if firstLevelPage.children is not empty %}
-					<ul class="docs-aside__section-list">
-						{% for child in firstLevelPage.children %}
-							<li>
-								<a {% if page is defined and page._id == child._id %} class="docs-aside__current" {% endif %} {% if child.uri %} href="/{{ child.uri }}" {% else %} href="/page/{{ child._id }}" {% endif %}>
-									{{ child.title | striptags }}
-								</a>
-							</li>
-						{% endfor %}
-					</ul>
-				{% endif %}
-			</section>
-		{% endfor %}
+<div class="docs-right-aside">
+	<div class="docs-right-aside__title">
+		On this page
+	</div>
+	<div class="docs-right-aside__section-wrapper">
+		<section class="docs-right-aside__section">
+			<a class="docs-right-aside__section-title">
+				Fast access link
+			</a>
+		</section>
+		<section class="docs-right-aside__section">
+			<a class="docs-right-aside__section-title docs-right-aside__current">
+				Hawk roadmap
+			</a>
+		</section>
+		<section class="docs-right-aside__section">
+			<a class="docs-right-aside__section-title">
+				The third section with long title for several lines of text
+			</a>
+		</section>
 	</div>
-	<a class="docs-aside__logo-wrapper" href="https://github.com/codex-team/codex.docs">
-		<div class="logo">
-			{{ svg('aside-logo') }}
-		</div>
-		<div class="caption">
-			<span>Powered by CodeX Docs</span>
-		</div>
-	</a>
 </div>
diff --git a/src/backend/views/layout.twig b/src/backend/views/layout.twig
index 8ad9dfb..e388ba2 100644
--- a/src/backend/views/layout.twig
+++ b/src/backend/views/layout.twig
@@ -24,10 +24,10 @@
         <div class="docs__content-inner">
           {% block body %}{% endblock %}
         </div>
-      </div>
-       <aside class="docs__right-aside">
+        <aside class="docs__right-aside">
          {% include "components/rightAside.twig" %}
-       </aside>
+        </aside>
+      </div>
     </div>
     <script src="/dist/main.bundle.js"></script>
     {% if config.yandexMetrikaId is not empty %}
diff --git a/src/frontend/styles/components/aside.pcss b/src/frontend/styles/components/aside.pcss
index 4f208f5..9fd5e71 100644
--- a/src/frontend/styles/components/aside.pcss
+++ b/src/frontend/styles/components/aside.pcss
@@ -1,4 +1,4 @@
-.docs-aside {
+.docs-left-aside {
   font-size: 14px;
   letter-spacing: 0.01em;
   display: flex;
@@ -104,3 +104,59 @@
     margin-right: 10px;
   }
 }
+
+.docs-right-aside {
+  padding-left: 22px;
+  border-left: solid 1px var(--color-line-gray);
+  font-size: 14px;
+  letter-spacing: 0.01em;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+
+  &__title {
+    padding: 0px 6px;
+    font-size: 16px;
+    line-height: 21px;
+    font-weight: 600;
+    margin-bottom: 16px;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    border-radius: 8px;
+
+    &:hover {
+      background-color: var(--color-link-hover);
+    }
+  }
+
+  &__section-wrapper {
+    flex-grow: 1;
+    overflow: auto;
+    padding-left: 8px;
+  }
+
+  &__section {
+    margin-bottom: 6px;
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+
+    &-title {
+      display: inline-block;
+      font-size: 14px;
+      line-height: 21px;
+      font-weight: 400;
+      max-width: var(--layout-width-aside);
+      white-space: wrap;
+      padding: 4px 8px;
+    }
+  }
+
+  &__current {
+    background-color: var(--color-link-hover) !important;
+  }
+}