menu wrapper added

src/backend/views/components/sidebar.twig

@@ -1,16 +1,15 @@
-
 <div data-module="sidebar" class="docs-sidebar">
 
 	<div class="docs-sidebar__toggler">
-    {{ svg('menu') }} Table of contents
+		{{ svg('menu') }}
+		Table of contents
 	</div>
 
 	<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 }}"
-        >
+					<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 }}
@@ -26,9 +25,7 @@
 						<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 }}">
+									<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>
@@ -39,6 +36,7 @@
 					{% endif %}
 				</section>
 			{% endfor %}
+		</div>
 
 		<div class="docs-sidebar__logo">
 			<a class="docs-sidebar__logo-wrapper" href="https://github.com/codex-team/codex.docs">

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;

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;