From 8a4bcc38a0c452313629c7a6f7e4e609f5f88122 Mon Sep 17 00:00:00 2001
From: "Umang G. Patel" <23169768+robonetphy@users.noreply.github.com>
Date: Sun, 19 Jun 2022 23:09:32 +0530
Subject: [PATCH] menu wrapper added

---
 src/backend/views/components/sidebar.twig   | 96 ++++++++++-----------
 src/frontend/styles/components/sidebar.pcss | 13 +--
 src/frontend/styles/vars.pcss               |  2 +-
 3 files changed, 55 insertions(+), 56 deletions(-)

diff --git a/src/backend/views/components/sidebar.twig b/src/backend/views/components/sidebar.twig
index d452cc8..2b6d265 100644
--- a/src/backend/views/components/sidebar.twig
+++ b/src/backend/views/components/sidebar.twig
@@ -1,55 +1,53 @@
-
 <div data-module="sidebar" class="docs-sidebar">
 
-  <div class="docs-sidebar__toggler">
-    {{ svg('menu') }} Table of contents
-  </div>
+	<div class="docs-sidebar__toggler">
+		{{ svg('menu') }}
+		Table of contents
+	</div>
 
-  <aside class="docs-sidebar__content docs-sidebar__content--hidden">
-    {% for firstLevelPage in menu %}
-      <section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
-        <a class="docs-sidebar__section-title-wrapper"
-          href="{{firstLevelPage.uri ? '/' ~ firstLevelPage.uri : '/page/' ~ firstLevelPage._id }}"
-        >
-        <div class="docs-sidebar__section-title {{page is defined and page._id == firstLevelPage._id ? 'docs-sidebar__section-title--active' : ''}}">
-          <span>
-            {{ firstLevelPage.title | striptags }}
-          </span>
-          {% if firstLevelPage.children is not empty %}
-            <button class="docs-sidebar__section-toggler">
-              {{ svg('arrow-up') }}
-            </button>
-          {% endif %}
-        </div>
-        </a>
-        {% if firstLevelPage.children is not empty %}
-          <ul class="docs-sidebar__section-list">
-            {% for child in firstLevelPage.children %}
-              <li>
-                <a
-                  class="docs-sidebar__section-list-item-wrapper"
-                  href="{{ child.uri ? '/' ~ child.uri : '/page/' ~ child._id }}">
-                    <div class="docs-sidebar__section-list-item {{page is defined and page._id == child._id ? 'docs-sidebar__section-list-item--active' : ''}}">
-                      <span>{{ child.title | striptags }}</span>
-                    </div>
-                </a>
-              </li>
-            {% endfor %}
-          </ul>
-        {% endif %}
-      </section>
-    {% endfor %}
+	<aside class="docs-sidebar__content docs-sidebar__content--hidden">
+		<div class="docs-sidebar__menu-wrapper">
+			{% for firstLevelPage in menu %}
+				<section class="docs-sidebar__section" data-id="{{firstLevelPage._id}}">
+					<a class="docs-sidebar__section-title-wrapper" href="{{firstLevelPage.uri ? '/' ~ firstLevelPage.uri : '/page/' ~ firstLevelPage._id }}">
+						<div class="docs-sidebar__section-title {{page is defined and page._id == firstLevelPage._id ? 'docs-sidebar__section-title--active' : ''}}">
+							<span>
+								{{ firstLevelPage.title | striptags }}
+							</span>
+							{% if firstLevelPage.children is not empty %}
+								<button class="docs-sidebar__section-toggler">
+									{{ svg('arrow-up') }}
+								</button>
+							{% endif %}
+						</div>
+					</a>
+					{% if firstLevelPage.children is not empty %}
+						<ul class="docs-sidebar__section-list">
+							{% for child in firstLevelPage.children %}
+								<li>
+									<a class="docs-sidebar__section-list-item-wrapper" href="{{ child.uri ? '/' ~ child.uri : '/page/' ~ child._id }}">
+										<div class="docs-sidebar__section-list-item {{page is defined and page._id == child._id ? 'docs-sidebar__section-list-item--active' : ''}}">
+											<span>{{ child.title | striptags }}</span>
+										</div>
+									</a>
+								</li>
+							{% endfor %}
+						</ul>
+					{% endif %}
+				</section>
+			{% endfor %}
+		</div>
 
-    <div class="docs-sidebar__logo">
-        <a class="docs-sidebar__logo-wrapper" href="https://github.com/codex-team/codex.docs">
-          <div class="docs-sidebar__logo-image">
-            {{ svg('aside-logo') }}
-          </div>
-          <p class="docs-sidebar__logo-caption">
-            Powered by CodeX Docs
-          </p>
-        </a>
-    </div>
+		<div class="docs-sidebar__logo">
+			<a class="docs-sidebar__logo-wrapper" href="https://github.com/codex-team/codex.docs">
+				<div class="docs-sidebar__logo-image">
+					{{ svg('aside-logo') }}
+				</div>
+				<p class="docs-sidebar__logo-caption">
+					Powered by CodeX Docs
+				</p>
+			</a>
+		</div>
 
-  </aside>
+	</aside>
 </div>
diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss
index 6355031..6b36bdc 100644
--- a/src/frontend/styles/components/sidebar.pcss
+++ b/src/frontend/styles/components/sidebar.pcss
@@ -1,9 +1,9 @@
 .docs-sidebar {
   width: 100vw;
-  position: fixed;
-  top: var(--layout-height-header);
 
   @media (--desktop) {
+    position: fixed;
+    top: var(--layout-height-header);
     width: var(--layout-sidebar-width);
   }
 
@@ -11,11 +11,9 @@
     border-bottom: 1px solid var(--color-line-gray);
     box-sizing: border-box;
     padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
-    position: sticky;
-    top: var(--layout-height-header);
     display: flex;
     flex-direction: column;
-    overflow: auto;
+    overflow: hidden;
 
     @media (--desktop) {
       height: calc(100vh - var(--layout-height-header));
@@ -28,7 +26,10 @@
       display: none;
     }
   }
-
+  &__menu-wrapper {
+    overflow: auto;
+    height: 100%;
+  }
   &__section {
     overflow: hidden;
     flex-shrink: 0;
diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss
index cdb983e..4d8f92f 100644
--- a/src/frontend/styles/vars.pcss
+++ b/src/frontend/styles/vars.pcss
@@ -25,7 +25,7 @@
   --layout-padding-horizontal: 22px;
   --layout-padding-vertical: 30px;
 
-  --layout-width-aside: 300px;
+  --layout-sidebar-width: 344px;
   --layout-padding-horizontal-aside: 22px;
 
   --layout-width-main-col: 650px;