From 472cf673f79958a6f6a05073f2caa4e21bf9336a Mon Sep 17 00:00:00 2001
From: "Umang G. Patel" <23169768+robonetphy@users.noreply.github.com>
Date: Sat, 4 Jun 2022 00:31:00 +0530
Subject: [PATCH] aside style and container added

---
 src/backend/views/components/aside.twig   | 75 +++++++++--------------
 src/frontend/styles/components/aside.pcss | 10 +++
 2 files changed, 40 insertions(+), 45 deletions(-)

diff --git a/src/backend/views/components/aside.twig b/src/backend/views/components/aside.twig
index 25a6133..a99d375 100644
--- a/src/backend/views/components/aside.twig
+++ b/src/backend/views/components/aside.twig
@@ -1,49 +1,34 @@
 <div class="docs-aside-toggler" onclick="document.querySelector('.docs-aside').classList.toggle('docs-aside--toggled')">
-  {{ svg('menu') }} Table of contents
+	{{ svg('menu') }}
+	Table of contents
 </div>
 <div class="docs-aside">
-  {% 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 %}
-  <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 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>
+	<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/frontend/styles/components/aside.pcss b/src/frontend/styles/components/aside.pcss
index 9630bd1..4f208f5 100644
--- a/src/frontend/styles/components/aside.pcss
+++ b/src/frontend/styles/components/aside.pcss
@@ -1,6 +1,10 @@
 .docs-aside {
   font-size: 14px;
   letter-spacing: 0.01em;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
 
   @media (--mobile) {
     position: static;
@@ -24,6 +28,11 @@
     }
   }
 
+  &__section-wrapper {
+    flex-grow: 1;
+    overflow: auto;
+  }
+
   &__section {
     margin-bottom: 30px;
 
@@ -73,6 +82,7 @@
     display: flex;
     align-items: center;
     gap: 18px;
+    padding-bottom: 20px;
 
     .logo {
       display: inline-flex;